Claude Code Recreates Figma Designs: Two Practical Ways to Skip Manual Styling

1. Install Claude Code and the Figma plugin

Claude Code is now installed with a native script instead of npm. For macOS/Linux run:

# macOS / Linux
curl -fsSL https://claude.ai/install.sh | bash

For Windows PowerShell run:

# Windows (PowerShell)
irm https://claude.ai/install.ps1 | iex

After installation, start the CLI with claude to open the interactive interface.

Install the official Figma plugin with a single command:

claude plugin install figma@claude-plugins-official

Restart Claude Code (or run /reload-plugins) and authorize the plugin in the plugin manager.

2. Two reconstruction routes

Claude Code can turn a Figma design into code in two ways:

Route A – Official MCP extraction : reads the real design variables (spacing, colors, font sizes) directly from the Figma file via the MCP server, giving high‑precision output.

Route B – Screenshot visual reconstruction : you drop a screenshot, Claude Code infers layout and colors visually, requiring no configuration but delivering medium precision.

Key differences:

Configuration : Route A needs the plugin and authorization; Route B works with a simple image drop.

Precision : Route A reads true values; Route B estimates values from the picture.

Design variables : Available in Route A, unavailable in Route B.

Applicability : Route A requires the original Figma file; Route B works with any image or third‑party mockup.

Cost : Route A consumes more tokens for structured data; Route B uses only one image.

3. Route A practical example – personal‑center page

Using a typical mini‑program "personal center" page (avatar, nickname, VIP tag, stats, menu list) as a case study:

Copy the Figma frame link (e.g., https://figma.com/design/AbC123/小程序?node-id=12-345) which contains the node-id of the selected frame.

Send the link to Claude Code with a clear prompt:

把这个 Figma 页面还原成 uni-app 的个人中心页：
https://figma.com/design/AbC123/小程序?node-id=12-345

要求：
- Vue3 setup 语法
- 单位用 rpx，设计稿宽度 750
- 功能列表用 v-for 渲染

Claude Code reads the layer hierarchy, variables, and layout, then generates a screenshot for visual verification before producing code.

The generated <template> looks like:

<template>
  <view class="profile">
    <!-- 顶部用户卡片 -->
    <view class="user-card">
      <image class="avatar" src="/static/avatar.png" mode="aspectFill" />
      <view class="user-info">
        <text class="nickname">技术洋</text>
        <text class="vip-tag">SVIP 会员</text>
      </view>
    </view>
    <!-- 数据栏 -->
    <view class="stat-bar">
      <view class="stat-item" v-for="s in stats" :key="s.label">
        <text class="stat-num">{{ s.num }}</text>
        <text class="stat-label">{{ s.label }}</text>
      </view>
    </view>
    <!-- 功能列表 -->
    <view class="menu">
      <view class="menu-item" v-for="m in menus" :key="m.id">
        <image class="menu-icon" :src="m.icon" />
        <text class="menu-text">{{ m.text }}</text>
        <text class="arrow">›</text>
      </view>
    </view>
  </view>
</template>

The accompanying CSS uses the exact design values, for example:

.avatar {
  width: 120rpx; /* design‑specified width */
  height: 120rpx;
  border-radius: 50%;
}
.user-card {
  display: flex;
  align-items: center;
  padding: 40rpx 32rpx; /* real inner padding from the design */
}
.vip-tag {
  font-size: 22rpx;
  color: #b8860b;
  background: #fdf3d7;
  border-radius: 8rpx;
}

After generation, replace placeholder assets in the static folder with your own images.

4. Route B practical example – screenshot reconstruction

When only a static image of the design is available, drag the screenshot into Claude Code and give a prompt such as:

照这张图还原成 uni-app 个人中心页，单位用 rpx（设计稿 750 宽），配色和布局尽量贴近图片。

Claude Code “looks at the picture” and produces a layout, but spacing is estimated (e.g., it may output 40rpx where the design actually uses 36rpx) and colors are sampled from pixels.

5. Common pitfalls for uni‑app / mini‑program output

px → rpx conversion : In uni‑app, 750rpx equals the screen width. For a 750‑px wide design, use 1px = 1rpx. For a 375‑px wide design, use 1px = 2rpx.

Figma element → uni‑app component mapping :

div / frame → view span / text → text img → image scroll area → scroll-view Claude Code usually converts correctly, but if it emits a raw <div>, replace it with the appropriate uni‑app component.

Fonts and icons : Chinese fonts may be missing on the mini‑program side; rely on system defaults. Export icons from iconfont or replace with image assets.

Safe‑area handling : Add safe-area-inset and top padding manually for status bars, iPhone notch, and the mini‑program capsule button, which are often omitted from the design.

6. Selecting the right route

If you have the original Figma file and need exact spacing and colors → choose Route A (official MCP).

If only a screenshot, third‑party mockup, or quick prototype is available → choose Route B (screenshot reconstruction).

For the best of both worlds, run Route A to get structured data, then verify/adjust with a screenshot (combine both).

By offloading the repetitive measurement and CSS generation to Claude Code, developers can focus on interaction, state management, and data integration, turning a labor‑intensive task into a few minutes of verification.