The promises are big: “Describe a component in natural language, and AI generates production-ready code.” Tools like Vercel’s v0, Claude Artifacts, Bolt.new, and StackBlitz Codeflow demonstrate that AI-generated UI components work technically. The question is: how well do they fit into an existing design system?

State of the Art

v0 (Vercel): Generates React components with Tailwind CSS and shadcn/ui. Results are visually appealing but tied to the Vercel/Next.js ecosystem. Generated components use shadcn/ui defaults – not your design system’s tokens.

Claude Artifacts: Generates HTML/CSS/JS, React components, or SVGs directly in chat. Quality depends heavily on context – with a CLAUDE.md and token references, Claude generates system-conformant code. Without context, generic code with hardcoded values.

Bolt.new: Generates complete applications in the browser. Impressive for prototyping, problematic for design system integration – Bolt generates its own architecture.

Cursor / Copilot: Inline code generation within existing codebase context. Cursor with its .cursorrules file generates the most system-conformant code of all mentioned tools.

Quality of AI-Generated Components

Visual correctness (good): AI generates visually appealing components following modern design standards.

Accessibility (moderate): Basic ARIA attributes are often correct. Complex patterns – focus trapping, roving tabindex, live regions – are frequently missing or incorrect.

Token compliance (poor without context): Without explicit token references, AI generates hardcoded colors and pixel values. With token context, compliance improves drastically.

Responsive behavior (good): AI generates responsive layouts with appropriate breakpoint logic.

Code quality (variable): Simple components are clean. Complex components need human review.

Integration into Existing Design Systems

Three strategies: Strategy 1 (AI as starting point): AI generates a raw version, developer refactors to use tokens and ensure accessibility. 30–50% time savings. Strategy 2 (Token-informed generation): AI receives token file and context file. Generated code references correct tokens from the start. 50–70% time savings. Strategy 3 (Template-based generation): AI receives an existing component as reference and generates variants in the same style. 60–80% time savings.

Ensuring Token Compliance

Four measures: Provide context (DTCG token file + CLAUDE.md). Set up linting (CSS rules that flag hardcoded values). Review checklist (tokens used? ARIA correct? keyboard navigation? responsive?). Automated tests (visual regression + accessibility tests).

Tool
Framework
Token Compliance
Accessibility
Sovereignty
v0
React (shadcn)
Low (shadcn defaults)
Medium
Low (Vercel lock-in)
Claude Artifacts
All
High (with context)
Medium
High (framework-free)
Cursor
All
High (repo context)
Medium
High (local execution)
Copilot
All
Medium
Medium
Medium (cloud)

Key Takeaways

  • AI-generated components are visually appealing and responsive, but often not accessible and not token-compliant.
  • Token compliance increases drastically when AI receives explicit context (DTCG file, CLAUDE.md).
  • Cursor and Claude with context files generate the most system-conformant code.
  • v0 and Bolt generate visually impressive components but with framework and platform lock-in.
  • Integration requires a strategy: AI as starting point (30–50% savings) or token-informed generation (50–70%).
  • Linting, review checklists, and automated tests are quality assurance for AI-generated code.