Claude Code + UI/UX

Yes — via the official Figma MCP server (Model Context Protocol). Once connected with a Figma personal access token, Claude Code can pull frames, components, auto-layout properties, variants, design tokens (color, type, spacing, effects), and even individual node JSON. It reads structure not just pixels — so the generated code uses your actual component names, your actual token names, and respects your auto-layout intent. We set this up day one of every project. Without MCP, we fall back to high-fidelity screenshots + token JSON exported from Figma plugins (Style Dictionary, Tokens Studio).

Yes — we encode WCAG 2.2 AA as a hard rule in CLAUDE.md: every interactive element gets a proper role, accessible name, keyboard handler, visible focus ring, and aria-state attributes (aria-expanded, aria-pressed, aria-current, aria-invalid, etc.). We pair Claude Code with axe-core in CI — no PR merges with a11y violations. Color-contrast is checked against tokens at design-token compile time, so a 4.4:1 pair fails the build before code is even written. Manual NVDA + VoiceOver pass before sign-off on any complex widget (dialogs, comboboxes, date pickers).

Whichever your codebase uses. We don’t force a stack. Claude Code reads your existing patterns — if your repo has tailwind.config.js with custom theme keys, it generates Tailwind utility classes. If it has styled-components with a theme provider, it writes styled blocks against your theme tokens. If it has CSS Modules with BEM, it writes .Component_root__xyz classes. The token pipeline (Figma → theme) adapts: Tailwind config keys, CSS variables, Style Dictionary platforms, or theme-provider object — same Figma source, different output.

Yes — this is a hard rule in our design-system projects. Every component ships with a colocated *.stories.tsx (or .stories.mdx) file containing: (a) the default state; (b) all design-token variants from Figma; (c) error / loading / empty / disabled states; (d) dark-mode variant; (e) Storybook controls (knobs) for every prop; (f) auto-generated docs from JSDoc / TypeScript types. Stories run in Chromatic for visual regression on every PR. Designers approve in Storybook before integration into the app.

Yes — that’s the whole point. Claude Code reads your token source (Figma styles, tokens.json, tailwind.config.js, Style Dictionary output) and writes code that only uses those tokens — never raw #ff0000, never raw 16px. We add an ESLint rule (tailwindcss/no-arbitrary-value or a custom no-magic-number rule) that fails the build if a non-token value sneaks in. Tokens flow Figma → tokens.json → tailwind.config.js + CSS vars → component code → rendered UI — one source of truth from designer to user.

Token-driven, semantic-named. We write tokens with semantic names (--color-bg-surface, --color-text-default, --color-action-primary) not literal names (--gray-100). Claude Code emits CSS variables on :root for light, :root[data-theme="dark"] for dark, and additional brand themes via data-brand attributes. Every component reads from semantic tokens only — so flipping data-theme instantly re-themes the entire UI. Storybook ships with a theme switcher addon so designers approve all variants before merge.

The output is your design, executed in code — not Claude’s opinion of how a button should look. Claude Code reads your Figma frames pixel-by-pixel (via MCP or screenshots), uses your tokens, your typography, your spacing scale — the visual result is identical to your designer’s file. We don’t use AI to design the UI (that’s your designer’s job); we use AI to translate a finished design into accessible, on-brand code. If your designs are original, your code will be too.

Output format changes, workflow stays identical. On Hyvä we emit .phtml files with Tailwind utility classes, Alpine.js x-data directives, and Magento layout XML wiring. On vanilla React we emit .tsx with semantic JSX, hooks, and the framework’s state management. Same Figma source, same tokens, same a11y rules, same Storybook setup — just different file extensions. We have separate slash-commands per stack: /scaffold-hyva-block, /scaffold-react-component, etc. See our Claude Code + Hyvä page for the Magento-specific deep-dive.

Within 1–2px on first pass, pixel-identical after visual-QA. Claude Code reads Figma auto-layout (gaps, padding, alignment) and pulls exact token values, so spacing, typography, and color match by construction. Where AI-only output drifts — complex shadows, gradients, micro-animations — we run a Percy or Chromatic visual diff against a Figma export and fix any pixel deltas before merge. We commit to a 99%+ visual match on simple components and 95%+ on complex ones (data viz, charts, custom illustrations).

Yes — mobile-first by default, with breakpoints driven by your design tokens, not magic numbers. We pair every component with three Storybook viewports (mobile 375px, tablet 768px, desktop 1280px) and visual-snapshot all three. Claude Code reads your Figma responsive variants (Figma now has device-frame variants and breakpoint constraints) and emits matching media queries or Tailwind sm: / md: / lg: prefixes. Touch-target sizes are checked against WCAG 2.5.5 (44×44 CSS px minimum). Container queries (@container) used where component-context responsiveness beats viewport-based.

Day-one wiring on every project. We push every Storybook story to Chromatic (or Percy / BackstopJS) on first PR. From then on, every commit auto-snapshots all stories — if a single pixel changes anywhere, the PR shows a side-by-side diff. Designer or design-engineer approves the diff before merge to main. AI-generated code is held to the same bar as human-written code — no exemption, no shortcut. Across 40+ projects, this has caught dozens of subtle regressions (focus rings, hover states, dark-mode contrast bugs) that would otherwise have shipped to production.

14 days of free post-launch coverage on every project — same warranty whether the code came from human keystrokes or AI suggestions. Bug-fix scope: pixel mismatches, a11y violations, broken focus states, contrast failures, keyboard-trap bugs, screen-reader breakage — anything that traces back to our build. After day 14, optional retainer (USD 1,499/mo) for embedded designer-engineer support. What’s not covered: bugs in your existing code we didn’t touch, third-party widgets, server / hosting failures. Every bug fix is itself reviewed by Claude Code + a human + visual-regression diff before re-deploy — so we don’t paper over root causes.