AI高效还原设计稿工作流

Claude Code安装与 GLM4.6 配置

点击查看教程👉Claude Code安装与 GLM4.6 配置

如果文档查看不全，可以查看官方文档

Claude Code | Claudeclaude.com ↗

安装 Figma MCP

Figm MCP 安装流程，这里建议安装远程 MCP，将以下代码发给 Claude Code 既可安装

claude mcp add --transport http figma https://mcp.figma.com/mcp

安装完成后，重启 Claude Code ，然后输入/mcp，选中 figma mcp 进行账号关联

其他 IDE编辑器安装方式可以官方教程

Remote server | Developer Docsdevelopers.figma.com ↗

Claude MD 提示词

## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework.  Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.

### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design‑system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
- Use the project's color system, typography scale, and spacing tokens consistently.
- Respect existing routing, state management, and data‑fetch patterns already adopted in the repo.
- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals.
- Validate the final UI against the Figma screenshot for both look and behavior.

# MCP Servers
## Figma MCP server rules
  - The Figma MCP server provides an assets endpoint which can serve image and SVG assets
  - IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
  - IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
  - IMPORTANT: do NOT use or create placeholders if a localhost source is provided

AI快速引用组件库推荐

Discover community-made UI components | 21st.dev21st.dev ↗ React Bitsreactbits.dev ↗ The Foundation for your Design System - shadcn/uiui.shadcn.com ↗ Community-made library of free and customizable UI elements made with CSS or Tailwind. It's all freeuiverse.io ↗ Motion — JavaScript & React animation librarymotion.dev ↗ GitHub - Remix-Design/RemixIcon-MCPgithub.com ↗

优秀设计师官网推荐

优秀 B 端官网参考

国内B端网站 · 语雀yuque.com ↗