Design Systems · 2026

From consensus to control.

How building a design system with AI changed what it means for a designer to own the full stack, from brand decision to shipped token.

Project
Lune, Wedding Planning App
Role
Product Designer · Design System Lead
Stack
Claude · Figma MCP · Cursor · Tailwind
Year
2026

Background

Two systems. Two completely different power structures.

Komodo Health · Fire Design System

A mature, team maintained system built in Storybook and documented through engineering. Thorough, consistent, and completely out of a designer's hands.

Every token change, every documentation update, every small correction required a Jira ticket, engineering bandwidth, and a review cycle that could take weeks. The system was well built. The designer was a passenger.

Lune · Built with AI

A brand foundation built directly with Claude: token decisions, type pairing, color roles, spacing logic. No Storybook. No handoff docs. No tickets.

Documented in Figma via MCP. Components sourced from Tailwind and shaped to the brand in Cursor. The designer controls the entire stack, from the first decision to the deployed screen.

The Shift

Same craft. Different power structure.

Before: Komodo · Fire Design System

  • Change a color token

    File a Jira ticket. Wait for an engineer to update the Storybook source. Review in staging. Merge. Days or weeks.

  • Update documentation

    Write the content. Hand off to engineering. Wait for the MDX file to be updated and deployed. Can't do it yourself.

  • Add a new component

    Design in Figma, write specs, hand to eng, wait for build, review implementation, revise. Multiple people, multiple weeks.

  • Make a decision

    Slack thread. Design review. Stakeholder input. Cross functional alignment. The system belongs to everyone, which means it belongs to no one.

After: Lune · Built with AI

  • Change a color token

    Update the CSS variable in the foundation file. Push to Cursor. Live. The designer does it in minutes, alone.

  • Update documentation

    Figma doc pages owned by design. Connected via MCP, any update reflects immediately. No tickets. No waiting.

  • Add a new component

    Pull from Tailwind's library. Apply brand tokens in Cursor. Document in Figma. Done in one session, one person.

  • Make a decision

    Think through it with Claude. Make the call. Build it. The designer decides: AI is the thinking partner, not a blocker.

How it was built

The process wasn't about moving fast. It was about staying in control.

01

Brand foundation in conversation

Instead of a brand sprint with a room full of stakeholders, the brand foundation was built through direct conversation with Claude. Color roles, type pairing, spacing logic: every decision made by the designer, with AI as a thinking partner. The output wasn't a slide deck. It was a living set of decisions, reasoned through and ready to implement.

02

Tokens documented in Figma via MCP

Token pages for color, typography, spacing, and radius, built directly in Figma using the Claude MCP connection. No export scripts. No Storybook MDX. Documentation lives in the same tool as the design, updated by the designer, immediately accurate. When the token changes, the doc changes.

03

Tailwind as the component layer

Lune doesn't need a custom component library. It needs a brand foundation that shapes existing, battle tested components. Tailwind provides the primitives. The design system provides the tokens that make them feel like Lune. This is the right scope for a two person startup, and AI helped clarify that by helping reason through it, not by automating the decision.

04

Color as semantic signal

One of the sharpest decisions in Lune's system: slate green is reserved exclusively for AI intelligence states. When Lune is actively curating or orchestrating, green appears. Everywhere else, it doesn't. The design system carries the meaning, decided by the designer in one conversation, without a committee, and shipped the same day.

Outcome

A complete design system. One designer. Zero tickets.

1

Designer owned the entire system, from brand decision to deployed token. No engineering dependency on documentation or token updates.

0

Jira tickets filed to update design system documentation. All token and doc changes made directly by the designer.

↑

Decisions made with higher confidence in far less calendar time. AI as thinking partner, not gatekeeper.

Reflection

What this changed about how I think about design systems.

A design system's value isn't in its completeness. It's in how quickly the people who use it can make decisions. The Fire design system at Komodo was comprehensive and well built. But it was slow to change, hard to influence, and owned by a committee. Right model for a large org. Wrong model for a startup.

Building Lune's system taught me to ask a different question. Not “what should a design system include?” but “what does this team actually need to ship?” The answer: a clear brand foundation, semantic token decisions, and a component strategy that doesn't require reinventing what already exists.

AI didn't replace design judgment. It eliminated the friction that slows judgment down.Every decision in Lune's system (the color roles, the type pairing, the green for AI only rule) was made by a designer. Claude helped me think faster, not think less.

  • Design Systems
  • Figma MCP
  • Claude
  • Tailwind CSS
  • Cursor
  • Brand Identity
  • Design Tokens
  • Startup Design