08 · 从 Figma 设计稿生成 Web App

07-Notebook重构与Dashboard ｜ 下一篇 → 09-命令与提示词速查

场景：设计稿 → 可运行网页

把一张 Figma 设计稿 变成真正能跑的 Web App，并让 Claude 自己打开浏览器看页面、对照设计稿调样式——这是「智能体 + 工具」威力的高潮演示。

核心新工具：MCP Server

MCP（Model Context Protocol） 是让智能体接外部能力的标准协议。本节用到两类：

配置 MCP（概念）

# 给 Claude Code 添加一个 MCP server
claude mcp add playwright -- npx @playwright/mcp@latest
# 查看已连接的 MCP
claude mcp list

工作流：看稿 → 实现 → 自查 → 修正（闭环）

读 Figma 稿 → 生成页面代码 → Playwright 打开看 → 截图对比设计稿
        ↑                                          │
        └──────────── 发现差异、自动修样式 ←─────────┘

示例提示词：

1) 用 Figma MCP 读这张设计稿，提取布局、配色、字号
2) 用 React + Tailwind 实现这个页面
3) 用 Playwright 打开本地页面截图，和设计稿对比
4) 哪里不一致就改，直到接近设计稿

为什么这很关键

智能体有了「眼睛」（浏览器）和「设计来源」（Figma）后，能形成自我验证的闭环——不再是「写完就完」，而是「写完→看→改」，像真人前端一样迭代。

• Playwright MCP = 自主 UI 测试：不止建页面，还能跑端到端测试、自己发现并修 UI bug。
• 这套「执行 + 观察 + 纠错」的闭环，是智能体能自主工作很久的根本原因。

延伸用法

• 自主 UI 回归测试：用 Playwright 跑一遍登录流程，截图每一步，发现报错就修。
• 跨浏览器检查、可访问性检查、响应式断点检查。

本节实操

• 给 Claude Code 装一个 Playwright MCP（claude mcp add ...）
• 让它打开你本地跑的页面并截图
• 给它一张简单设计图，让它实现 + 自查 + 修正

下一篇 → 09-命令与提示词速查