Agentic setup
How the Dew team ships the design system — faster, with quality intact.
Agentic Setup is the internal pipeline we use to build and evolve Dew itself. It turns Figma designs into production-ready Dew components through a structured, repeatable workflow — so Dew keeps pace with product needs without compromising the bar.
Figma spec build stories ship.
Every stage produces a versioned artifact — spec, code, stories, QA report — that teams can review and trust. The pipeline runs in order, and stops the moment a stage finds a gap.
Figma → Spec
Convert Figma designs into a structured specification — the spec-as-contract the rest of the pipeline builds from.
- Anatomy and component decomposition
- Layout rules (alignment, spacing, constraints)
- Token mapping (tokens-only styling)
- Interaction states (default/hover/active/focus/disabled/loading)
- Accessibility requirements (WCAG 2.2)
- Motion and animation, when applicable
Spec → Implementation
The Build Agent implements the component strictly from the spec — no guesswork, no magic numbers.
- Tokens-only styling (no hardcoded values)
- Clean, maintainable component structure
- Predictable APIs (no prop explosion)
- WCAG 2.2-aligned semantics and keyboard behavior
Stories → Coverage
One story per variant/pattern component, so every variation is discoverable, reviewable, and easy to adopt.
- Discoverable — every variant has a home
- Easy to review visually in Storybook
- Easy for teams to adopt across products
Visual QA → Fix Loop
The VQA Agent diffs Storybook renders against Figma and produces a fix-ready report. The Build Agent applies fixes — repeat until quality matches the bar.
- Severity (Blocker / High / Medium / Low)
- Expected vs. actual
- Location (variant / component)
- Suggested fix direction (tokens / layout / state)
The goal isn't “AI writes code.”
The goal is a faster loop for Dew maintainers, where quality stays intact. Every stage is designed to remove toil that slows component work down — not to replace the judgment that keeps Dew coherent.
Faster delivery, same quality
Reduce repetitive work and review churn — without lowering the bar on accessibility or consistency.
No styling drift
Token-locked output means components can't invent their own spacing, color, or radius along the way.
Visual gaps caught early
VQA catches mismatches against Figma before they ship — not in a QA ticket three sprints later.
Accessibility baked in
WCAG 2.2 compliance, keyboard behavior, and semantics are enforced at the spec layer, not bolted on.
Quality guardrails the pipeline enforces.
These are Dew's invariants — the rules every generated component has to pass through. No exceptions.
Figma + spec are the source of truth
No guessing. If it isn't in the spec, the Build Agent doesn't ship it.
Tokens-only styling
No hardcoded values. Every color, space, and radius maps to a Dew token.
WCAG 2.2 compliance
Accessibility is a first-class contract — not an optional pass at the end.
Variants are separate components
Each variant/pattern ships as its own component — cleaner APIs, cleaner stories.
Stop on gaps
Missing states or tokens block progress until resolved. No silent defaults.
Dew components evolve. The pipeline keeps up.
UPDATE mode supports the messy reality of a live design system — iterative changes, new variants, and stable ground for everything else.
Patch only what changed
Update a radius, swap a token, adjust spacing — the agent touches only what the diff demands.
Add new variants completely
New variants arrive with full completeness — tokens, states, a11y — never half-shipped.
Keep unchanged variants stable
Untouched variants stay untouched. No surprise regressions on variants nobody asked about.
Need a new component or variation?
Submit a request and we'll run the pipeline end-to-end. Three steps on your side, four stages on ours.
Share Figma links
Make sure variants and states are visible on the frames you share.
Run the pipeline
Spec → Build → Storybook → VQA. Each stage produces a reviewable artifact.
Review and merge
Check the results against the bar. When it matches, merge and ship.
- Figma link(s) with variants and states visible
- Usage context — where it'll be used, priority, expected behavior
- Any special requirements — accessibility, motion, edge cases
- A versioned spec (contract)
- Production-ready component implementation
- Storybook coverage for each variation
- Visual QA report aligned to Figma
Keep exploring Dew × AI.
See how Dew MCP accelerates product UI work, or read how Dewwrite applies the same rigor to copy.