AI-Assisted Design: From Prompt to Production

The Landscape in 2025

AI-powered design tools have matured beyond generating static mockups. The current generation produces usable code—components that can be integrated directly into production applications or used as authoritative references for implementation.

Three tools dominate the space, each with distinct strengths:

Google Stitch

Stitch (from Google Labs) generates web and mobile UI designs from text prompts or images.

Strengths

• Framework-agnostic export — Generates HTML/CSS that works with any framework
• Multi-screen generation — Creates entire application flows, not just single components
• Style modification — Tweak colors, typography, and layout after generation
• Figma export — Send designs to Figma for refinement with your team
• Rapid iteration — Generate multiple variants quickly to explore design directions

Workflow Integration

Stitch excels at the ideation phase. Use it to:

1. Generate initial component layouts from rough descriptions
2. Export as code for reference implementation
3. Adapt the generated patterns to your design system

The export is framework-agnostic, making it suitable for Astro sites that avoid React dependencies.

Vercel v0

v0 from Vercel generates production-ready React components from natural language prompts.

Strengths

• Production-ready code — Components work immediately
• Tailwind CSS styling — Consistent with modern styling approaches
• Shadcn UI integration — Pre-built component patterns
• Conversational refinement — Iterate on designs through dialogue

Limitations for Non-React Projects

v0’s output is tightly coupled to its ecosystem:

• React-specific — Components require React runtime
• Shadcn dependency — Assumes Shadcn UI component library
• Next.js patterns — File structure assumes Next.js conventions

For Astro sites aiming for minimal JavaScript, v0’s output requires significant adaptation:

// v0 output (React)
export function Card({ title, children }) {
  return (
    <div className="rounded-lg border bg-card p-6">
      <h3 className="font-semibold">{title}</h3>
      {children}
    </div>
  )
}

// Astro adaptation
---
const { title } = Astro.props;
---
<div class="rounded-lg border bg-card p-6">
  <h3 class="font-semibold">{title}</h3>
  <slot />
</div>

Use v0 when you need design inspiration or are working within the React/Next.js ecosystem. For Astro projects, treat v0 output as a reference implementation rather than copy-paste code.

Figma AI (Make Designs)

Figma’s AI features integrate directly into the design tool, generating mockups and automating repetitive tasks.

Strengths

• Native integration — Works within your existing Figma workflow
• Team collaboration — Generated designs are immediately shareable
• Prototype wiring — Connects screens into interactive prototypes
• Content generation — Real copy instead of lorem ipsum

When to Use

Figma AI is ideal when:

• Your team already uses Figma as the source of truth
• You need stakeholder-ready mockups
• Designer-developer handoff is a bottleneck

For solo developer projects, Stitch often provides faster iteration since it outputs code directly.

Choosing the Right Tool

For Framework-Agnostic Projects (Astro, Hugo, 11ty)

Google Stitch — Framework-agnostic output means less adaptation work. Export as HTML/CSS and integrate into your static site generator.

For React/Next.js Projects

Vercel v0 — Components work immediately. The Shadcn integration provides consistent patterns.

For Team-Based Design Workflows

Figma AI — Keeps everything in your existing design system. Designers and developers share a single source of truth.

The Evolution from Figma Make

This portfolio site originally used Figma Make (the code export feature) as a starting point. The workflow was:

1. Generate a React prototype with Figma Make
2. Use AI coding agents to convert React → Astro
3. Manually extract patterns and adapt to DaisyUI

With Google Stitch, the workflow becomes:

1. Generate UI concepts from prompts
2. Export as HTML/CSS or send to Figma
3. Adapt styling to your design system (DaisyUI, Tailwind, etc.)

The key improvement: Stitch’s output is framework-agnostic, eliminating the React-to-Astro conversion step.

Practical Tips

Start with constraints — Provide specific requirements in your prompt:

“Category filter bar, horizontal scroll, pill-shaped buttons, active state with accent color, neobrutalism style with hard shadows”

Iterate in the tool — Use multi-turn prompts to refine:

“Make the shadow offset larger, use a magenta accent color, uppercase text”

Export early — Don’t over-polish in the AI tool. Export once you have the general structure, then refine in code where you have precise control.

Maintain design tokens — Whatever tool you use, map AI-generated colors and spacing to your design system variables. This ensures consistency as you iterate.

Related

• Building an Astro Portfolio with AI-Assisted Development — Parent project overview
• Persistent Filter Bar with View Transitions — Component implementation patterns