Human approval is structural
Suggestions do not silently mutate the board or design system.
MOOD
A human-led creative workspace that turns briefs and evidence into directions, decisions and a traceable design system.
My role
Product concept, UX/UI, React development and WebMCP tool design.
Give AI a seat in the studio, not the final say.
MOOD was my first project built around MCP: the interface and the agent work with the same project state and the same bounded actions.
The product protects the parts of creative work that require judgement. AI can inspect context, surface references and propose changes; a person reviews, applies or rejects every meaningful decision, with provenance preserved across the workflow.
Evidence stays attached
References, rationales and source relationships remain visible as a direction develops.
One state, two interfaces
The visual UI and MCP tools operate on the same validated product model.
02 / UX
A numbered creative process with room to explore.
The primary flow moves from source material to direction, refinement, system and output without collapsing creative work into a chat box.
Explore
Collect the brief, constraints and references before generating a direction.
Direct and refine
Compare coherent routes, then make deliberate colour, typography and component decisions.
System and output
Turn approved choices into traceable tokens and a live result that stays linked to its source.
03 / Screens
The complete workflow, shown in real screens.
01 / 05
live project
live project
live project
live project
live project
04 / UI system
A creative studio, not an AI dashboard.
Warm paper and terracotta establish a physical studio mood; cobalt identifies agent and digital actions; olive grounds the working chrome.
Palette
Paper#FFF8F6
Terracotta#C64F00
Cobalt#2E5BFF
Olive#657C3E
Typography
MOODBricolage GrotesqueBrand display
EditEB GaramondEditorial direction titles
ApplyManropeInterface and body
Components
Workflow navigationReference boardAgent suggestionsApply/reject controlsToken inspectorLive output frame
05 / Build
WebMCP is part of the product architecture.
The React application uses a shared Zustand state model, Zod validation and registered WebMCP tools. Agent actions are deliberately bounded so automation can extend the interface without bypassing user control.
- React + TypeScript
- Vite
- Zustand
- Zod
- dnd-kit
- WebMCP
- Local persistence
- Vercel
First MCP project
The interesting part is not that an agent can act. It is that the product defines how.
MOOD turns control, provenance and reversibility into interaction design rather than policy text.
Next: Development →