Generating Next.js Components Without Figma Using Claude Design + Claude Code — A Practical Handoff Bundle Guide

Target audience: Frontend developers who have experience with Next.js and Tailwind CSS and collaborate with designers

The wall between design and development has steadily slowed teams down. While developers pixel-perfectly recreate screens that designers finished in Figma, requirements change, QA discovers mismatches, and revision cycles repeat. Traditional design-development QA cycles commonly take an average of 2–3 days. On April 17, 2026, Anthropic announced the Claude Design + Claude Code Handoff Bundle — an attempt to resolve this structural friction within a single conversation flow.

The core flow of this workflow comes down to three steps: ① Generate a prototype with a text prompt in Claude Design → ② Package the spec bundle with the /handoff command → ③ Claude Code reads the current codebase and automatically generates Next.js 15 App Router components. This article walks through real examples of each step, the current limitations, and common pitfalls encountered in practice.

If you're new to Claude Code, reading just examples 1–2 is enough to get started. Example 3 (Agent Skills) is advanced material for those who want to automate repetitive tasks.

Core Concepts

What Is Claude Design

Claude Design is an experimental product from Anthropic Labs powered by Claude Opus 4.7 that generates visual prototypes, slides, and one-pagers from text prompts alone. Through a partnership with Canva, it supports exporting to PDF, URL, PPTX, and Canva formats, and is included at no additional charge with Claude Pro, Max, Team, and Enterprise subscriptions.

The heart of Claude Design is progressive visualization through iterative conversation. Natural language feedback like "change the layout to a 3-column grid" or "adjust the header background color to #0F172A" is applied immediately, letting you refine prototypes as you go.

Claude Artifacts: A feature on claude.ai that lets you generate interactive React/HTML components and share them via link with no additional setup. If you don't have access to Claude Design yet, Artifacts is a great way to experience rapid prototyping first.

Structure of the Handoff Bundle

Running the /handoff command when Claude Design work is complete generates a bundle that packages the following three types of information.

Claude Code takes this bundle as input and is observed to scan the current codebase's design system. It determines whether to reuse existing components, then generates production code — prioritizing the styles and patterns the team already uses rather than building new components from scratch. This is the biggest difference from the traditional approach of pasting in screenshots directly.

Optional Features: Figma MCP and Agent Skills

These two features are optional tools that extend the core handoff workflow. It's worth considering them after you've grown comfortable with the basic flow (examples 1–2).

Figma MCP — Bidirectional Code↔Design Flow

Since February 2026, connecting a Figma MCP (Model Context Protocol) server to Claude Code enables reverse code→design conversion as well. The browser-rendered state is automatically converted into editable Figma layers, giving designers and developers a shared single source of truth. Refer to the Figma official guide for server installation. After installation, you can confirm the connection in the Claude Code terminal:

# Check the list of MCP servers
claude mcp list

MCP (Model Context Protocol): Anthropic's open protocol for AI models to communicate with external tools and data sources in a standardized way.

Agent Skills (.claude/skills/)

Placing markdown files in the .claude/skills/ directory causes Claude Code to preload that domain knowledge. You can define rules such as automatically syncing Figma design tokens to Tailwind CSS variables, or prioritizing reuse of shadcn/ui when generating components. The specific configuration method is covered in Example 3.

Practical Application

Here are three examples that show how the concepts above connect in practice. Examples 1 and 2 can be started independently; Example 3 is advanced material that automates the repetitive work from Example 1.

Example 1: Implementing a B2B SaaS Dashboard Landing Page

This is the most typical handoff scenario. We walk through the full flow from creating a prototype in Claude Design to converting it into a Next.js 15 App Router component.

Step 1 — Generate a Prototype in Claude Design

Prompt: "Dashboard landing page, dark theme, B2B SaaS feel.
Top navigation, hero section (2 CTA buttons),
3-column feature cards, footer included"

After adjusting the layout and colors through iterative conversation, run /handoff.

Step 2 — Pass the Bundle to Claude Code

[Claude Code Prompt]
Use this handoff bundle to generate a Next.js 15 App Router component.
Reuse existing shadcn/ui components as much as possible,
and reference the current tailwind.config.ts for Tailwind design tokens.
Output code only, no explanations.

Step 3 — Generated Code Example

// src/app/(marketing)/page.tsx
import Link from "next/link";
import { HeroSection } from "@/components/marketing/hero-section";
import { FeatureGrid } from "@/components/marketing/feature-grid";
import { SiteHeader } from "@/components/layout/site-header";
import { SiteFooter } from "@/components/layout/site-footer";
 
interface Feature {
  title: string;
  description: string;
  icon: string;
}
 
const FEATURES: Feature[] = [
  { title: "실시간 분석", description: "데이터를 즉시 시각화합니다", icon: "chart" },
  { title: "팀 협업", description: "권한 기반 대시보드 공유", icon: "users" },
  { title: "API 연동", description: "주요 SaaS와 원클릭 연결", icon: "plug" },
];
 
export default function LandingPage() {
  return (
    <div className="min-h-screen bg-background">
      <SiteHeader />
      <main>
        <HeroSection
          headline="데이터를 인사이트로"
          subline="팀의 의사결정을 10배 빠르게 만드는 B2B 분석 플랫폼"
          primaryCta={{ label: "무료로 시작하기", href: "/signup" }}
          secondaryCta={{ label: "데모 보기", href: "/demo" }}
        />
        <FeatureGrid features={FEATURES} />
      </main>
      <SiteFooter />
    </div>
  );
}

// src/components/marketing/hero-section.tsx
import Link from "next/link";
import { Button } from "@/components/ui/button"; // shadcn/ui 재사용
 
interface HeroSectionProps {
  headline: string;
  subline: string;
  primaryCta: { label: string; href: string };
  secondaryCta: { label: string; href: string };
}
 
export function HeroSection({
  headline,
  subline,
  primaryCta,
  secondaryCta,
}: HeroSectionProps) {
  return (
    <section className="container mx-auto px-4 py-24 text-center">
      <h1 className="text-5xl font-bold tracking-tight text-foreground mb-6">
        {headline}
      </h1>
      <p className="text-xl text-muted-foreground mb-10 max-w-2xl mx-auto">
        {subline}
      </p>
      <div className="flex gap-4 justify-center">
        <Button size="lg" asChild>
          <Link href={primaryCta.href}>{primaryCta.label}</Link>
        </Button>
        <Button size="lg" variant="outline" asChild>
          <Link href={secondaryCta.href}>{secondaryCta.label}</Link>
        </Button>
      </div>
    </section>
  );
}

Example 2: Code→Design Reverse Conversion via Figma MCP

This scenario takes a component completed during development and sends it back to Figma, where a designer can make edits before the changes are reflected back in the code. Requires a Figma MCP server to be installed.

# Terminal: Confirm MCP server connection status first
claude mcp list

[Claude Code Prompt]
Send src/components/marketing/hero-section.tsx to Figma

Running the above prompt converts the browser-rendered state into editable Figma layers. After a designer modifies colors or spacing in Figma, the following prompt can apply those changes back to the code:

[Claude Code Prompt]
Reflect the updated hero-section changes from Figma in the code.
Preserve the existing component structure.

Key insight: This bidirectional flow lets designers and developers each keep their own tools (Figma / code editor) while sharing the same single source of truth. The question "Is the Figma file current, or is the code current?" disappears.

Example 3: Automating Design Token Sync with Agent Skills

This example automates the repetitive task of manually updating the Tailwind config every time design tokens change. Teams that repeatedly run the handoff workflow from Example 1 can use this setup to automatically enforce conventions.

<!-- .claude/skills/design-system.md -->
# Design System Skill
 
## 컴포넌트 생성 규칙
- shadcn/ui 컴포넌트가 존재하면 새로 만들지 않고 재사용합니다
- 링크 요소는 반드시 Next.js `Link` 컴포넌트를 사용합니다
- 색상 값은 반드시 디자인 시스템 토큰을 통해 참조합니다
 
## 토큰 동기화 절차 (/handoff 번들에 토큰 변경이 포함된 경우)
1. 번들의 색상 토큰을 `tailwind.config.ts`의 `colors` 섹션에 반영
2. 타이포그래피 토큰을 `fontSize`, `fontFamily`에 반영
3. CSS 변수는 `src/app/globals.css`의 `:root`와 `.dark` 블록에 동기화
4. 기존 커스텀 값은 덮어쓰지 않고 병합합니다
 
## 파일 구조
- 신규 컴포넌트: `src/components/ui/`
- 페이지 전용 컴포넌트: `src/components/[페이지명]/`

When a new brand color (--brand-500) is added to the handoff bundle, here is how tailwind.config.ts changes before and after sync:

// tailwind.config.ts — Before sync (shadcn/ui default config)
import type { Config } from "tailwindcss";
 
const config: Config = {
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "hsl(var(--primary))",
        "primary-foreground": "hsl(var(--primary-foreground))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
      },
    },
  },
};
 
export default config;

// tailwind.config.ts — After sync (handoff bundle tokens merged)
import type { Config } from "tailwindcss";
 
const config: Config = {
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "hsl(var(--primary))",
        "primary-foreground": "hsl(var(--primary-foreground))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        muted: "hsl(var(--muted))",
        "muted-foreground": "hsl(var(--muted-foreground))",
        // 핸드오프 번들에서 추가된 커스텀 토큰 (기존 값은 덮어쓰지 않음)
        brand: {
          500: "hsl(var(--brand-500))",
          600: "hsl(var(--brand-600))",
        },
      },
    },
  },
};
 
export default config;

Pros and Cons Analysis

Advantages

Disadvantages and Caveats

App Router: The routing approach introduced in Next.js 13, supporting Server Components, layouts, and error boundaries based on the app/ directory. Claude Code is observed to automatically generate components using the App Router structure rather than Pages Router.

The Most Common Mistakes in Practice

1. Passing design screenshots directly to Claude Code without a handoff bundle — The bundle includes numerical specs and a QA checklist, producing far more precise code than passing a screenshot alone. It is strongly recommended to always go through the /handoff command.

2. Explaining project-specific conventions in every prompt instead of using Agent Skills files — Defining team conventions once in the .claude/skills/ directory automatically applies them to all subsequent work. It also reduces onboarding costs.

3. Deploying generated components without a type check — Claude Code attempts to comply with TypeScript strict mode, but errors can occur with complex generics or external type dependencies. It is strongly recommended to always check for type errors after running pnpm build.

Closing Thoughts

When Claude Design's /handoff command is combined with Claude Code's codebase awareness, the translation cost between design and development disappears, and the team's iteration speed changes fundamentally.

Here are three steps you can take right now:

1. Write an Agent Skills file — Define shadcn/ui reuse rules, file structure, and Tailwind token references in your existing project's .claude/skills/design-system.md. The next time you pass a handoff bundle, you'll receive code that automatically reflects your team's conventions.

2. Create your first prototype with Claude Design or Artifacts — After logging in to claude.ai, if you see a "Design" menu in the left sidebar, you can start immediately. If it's not visible yet due to the gradual rollout, try Claude Artifacts first to experience interactive component prototyping.

3. Install the Figma MCP server — Follow the Figma official guide to install the MCP server in your local environment and add the configuration to .claude/mcp.json. Once configured, you can experience the bidirectional code↔design flow from the Claude Code terminal with a single line: "Send the current page to Figma."

If you'd like to be notified when the next article is published, consider subscribing to the newsletter.

Next article: A practical guide to setting up the Figma MCP server in a team environment, integrating it with Claude Code, and building a CI/CD pipeline that continuously syncs design system tokens

References

• Introducing Claude Design by Anthropic Labs | Anthropic
• Anthropic Launches Claude Design | TechCrunch
• Claude Design: First Impressions | Banani
• Getting Started with Claude Design | Muzli Blog
• Anthropic just launched Claude Design | VentureBeat
• From Claude Code to Figma: Production Code → Editable Figma Designs | Figma Blog
• Building AI-driven workflows with Claude Code | UX Collective
• Claude Code + Figma Design System | UX Planet
• Agent Skills: Figma → shadcn/ui Code with AI | shadcn Design
• How to structure Figma files for MCP and AI code generation | LogRocket
• Vibe Design in 2026 | Muzli Blog
• Claude Code Best Practices | Anthropic Official Docs