Skip to main content

Component Generation With AI

5 min read
FrontendUx Eng

Frontend

You're not competing with AI. You're directing it. One good prompt beats 20 mediocre ones.

Ux Eng

AI generates markup. You own design-system coherence and accessibility. That's the moat.

Component Generation With AI

TL;DR

  • AI can spit out React, Vue, or Svelte components in seconds. It often gets syntax right and architecture wrong.
  • Your edge: knowing what to ask for, what to reject, and how the pieces fit together.
  • Prompt with context. "A card with image, title, and CTA" beats "make a card." Component APIs matter.

AI doesn't replace you. It replaces the part of your job where you type boilerplate. The part where you decide what the component should do, how it fits the design system, and whether it's accessible—that's still yours.

What AI Gets Right

  • Boilerplate. Props interfaces, basic structure, common hooks. AI has seen a million useState patterns.
  • Syntax. JSX, template literals, composable patterns. Rarely wrong on the basics.
  • Common patterns. Tabs, modals, accordions. Standard component shapes are in the training data.

What AI Gets Wrong

  • Your design system. AI doesn't know your tokens, your spacing scale, or that you use Card not div.card.
  • Accessibility. AI adds aria-label sometimes. It forgets focus management, keyboard nav, and screen reader order.
  • Edge cases. Empty states, loading states, error states. AI optimizes for the happy path.
  • Composition. How this component slots into your app. AI generates islands; you connect the archipelago.

How to Prompt for Components

Bad: "Make a user profile card."

Good: "React component: UserProfileCard. Props: avatar (string URL), name (string), role (string), onEdit (optional callback). Use our design system: Card from @/ui, Avatar from @/ui, spacing-4 between elements. Include loading skeleton when avatar is null. aria-label on the card."

Specificity pays. The more constraints you give, the less you rewrite.

The Review Checklist

Before you merge AI-generated component code:

  • Does it match our design tokens and component library?
  • Is it keyboard-navigable? Focus trap in modals? Tab order correct?
  • Does it handle null/undefined/empty? Loading? Error?
  • Is it composable or a monolith? Would we reuse any of this?

AI Disruption Risk for Frontend Developers

High Risk

SafeCritical

AI generates components fast, but design system ownership, accessibility, and integration remain irreplaceable. Risk is high for pure implementers; low for those who direct and validate.

Open Figma, inspect specs, type React component from scratch. Wire props, add loading states, debug layout. 2-3 hours per component.

Click "Component Development With AI" to see the difference →

// AI default output — works but ignores your system
<div className="rounded-lg p-4 shadow">
<img src={avatar} className="w-12 h-12 rounded-full" />
<h3 className="font-bold">{name}</h3>
</div>

// Your production version — design tokens, a11y, composition
<Card variant="elevated" padding="md">
<Avatar src={avatar} alt={name} size="md" />
<Text as="h3" variant="subtitle">{name}</Text>
</Card>

Quick Check

AI generated a modal component that looks correct. What should you verify before merging?

Do This Next

  1. Generate one component with Cursor/Copilot using a detailed prompt. Note what you had to fix. That list is your personal "AI component review" checklist.
  2. Create a prompt template for your most common component type (e.g., form field, list item). Include design system refs and a11y requirements. Reuse it.