Role
Design System Designer
Timeline
Feb 2026 - Present
Skills
Design System, Shadcn/ui, MCP Integration, Vibe Code, Tokens, Variables, Dev Hand-off.
Why Espresso exists
Most design systems are built for one audience: humans. But the way teams ship products is changing.
AI tools now sit between design and code, parsing components, generating variants, and writing implementation. A system that wasn't built with machines in mind becomes a bottleneck the moment a team tries to plug it into an AI workflow.
Im working with other 3 design system experts, attempting to build a design system that works for all three readers from day one: Startup Founder who compose with it, Developers who implement it, and AI agents that interpret it.
Foundation & principles
Architecture Component structure follows the shadcn/ui pattern. Atoms compose into primitives, primitives compose into patterns. Each layer has a clear job and a predictable shape.
Naming Semantic over descriptive. A button isn't Button-Blue-Large, it's Button / Primary / lg. Variants describe role and size, not appearance. This keeps the system meaningful when colors or scales change later.
Auto-layout discipline Every component is built with strict auto-layout hierarchy. Padding, gap, and alignment follow the same logic across the system, so structure is readable without opening the file.
Variants & properties Properties are split between what changes the component's role (variant, state) and what changes its content (label, icon, slot). This separation makes the API predictable, both in Figma and when exposed to an AI tool.
What I've shipped so far
I have covered four components, chosen because they exercise the full range of system decisions: states, slots, motion, and edge cases.
Card: the composition test. Slots, density variants, and how content scales inside a container.
Dialog: the layering test. Overlay behavior, focus states, and nested actions.
Upload: the state test. Idle, hover, dragging, uploading, success, error. Six states, one component, no duplicate variants.
Toast: the motion test. Status types, dismiss behavior, and positioning logic that travels cleanly into code.
What's next
Besides creating components, I am about making the system legible to people who don't open Figma.
Documentation layer: usage guidelines, do's and don'ts, accessibility notes per component.
MCP template; exposing tokens and component metadata so AI tools can read the system directly.
Prompt template: a structured prompt format developers can use to generate implementation from any Espresso component.
Dev handoff notes: short, opinionated guides for engineers working in React + Tailwind environments.