用 MCP 给 Claude Code 接感官：视觉验证与 design-to-code

Claude Code 默认能读写文件、跑命令，但看不见浏览器里渲染出来的样子——做前端时只能靠人截图贴回去。MCP（Model Context Protocol）服务器就是给它接上“感官与四肢”的标准接口。课程用两个具体 MCP 演示了这带来的范式变化。

两个 MCP：眼睛与手

• Playwright MCP = 浏览器的眼睛和手：CC 能自主打开页面、点击、截图、读取渲染结果。UI 改完不再需要人工“改→截图→贴回→再改”的往返，CC 自己截图自验，闭环内迭代。
• Figma MCP = 设计稿的眼睛：CC 能读 Figma 里的布局、尺寸、颜色、组件。官方 Dev Mode MCP 需 Figma 付费版；Framelink 等是免费替代。

design-to-code 两阶段范式

把“设计稿变成能用的 Web 应用”拆成两步，而不是一口气生成：

1. 视觉复刻：先只做“长得像”——读设计稿 → 生成组件代码 → 用 Playwright 自己截图、和设计稿比对相似度、迭代到位。这一阶段只管外观保真，不接数据。
2. 数据注入（灵魂）：外观对了再接真实数据——CC 自主 WebSearch 目标 API 的文档、发现需要 API key、主动向用户请求 key、写数据服务层、把前后端接起来。

这个顺序的价值：把“像不像”和“通不通”两个正交问题分开验证，各有清晰的成功判据（截图相似度 / 数据跑通），避免一锅乱炖时难以定位问题。呼应本库 两遍法——先立形、再落实。

两个可迁移技巧

• 布局即 prompt：做仪表盘/看板前，先把想要的布局当线框图用文字写进 prompt（哪块放哪、几列几行），减少 CC 反复试探布局的来回。本质是把“设计意图”前置成结构化输入。
• 自主研究闭环：给足目标（“接入这个数据源”）后，CC 能自己查文档 → 识别缺口（要 key）→ 回头找人补 → 继续。人只在它真正卡住、需要外部授权时介入。

关联

• MCP 是 Claude Code 接外部能力的标准通道；与 hooks（确定性扩展）互补——hooks 管“事件触发的确定动作”，MCP 管“接入外部感官与工具”。
• “给 Claude 可运行的验证手段”在这里具体化为视觉验证（截图对比），见 官方最佳实践。
• 出处：课程增量lesson 4/9/10。