以前做前端还原的时候，JSX 写得不慢，但真正堵住的地方是一些小问题，比如两个按钮长得差不多算不算同一个组件，卡片到窄屏是缩小、换行还是换另一套布局。截图说不清楚这些问题，标注和评论又散得到处都是。代码写到一半，再回群里翻记录问设计师，节奏一下就断了。

现在比较常见的做法，是直接让 IDE 里的 Agent 去读取设计上下文。MCP（Model Context Protocol）负责连接外部工具和模型，设计文件不用搬出原来的工具，代码也还在项目仓库里。下面以 IDE 连接 Pixso MCP 为例（换成其他同类工具流程也类似），不讲大而全的“设计转代码”，就拿一个登录卡片来拆，说清楚具体操作。

一、先把任务切成一个能验收的区块

别一上来就把整个页面丢给 Agent。页面太大，弹窗、错误态、权限、响应式规则都搅在一起，它很容易把视觉上的分组当成业务组件来拆。像登录卡片、设置面板、商品信息区这种边界清楚的模块，拿来起步最合适。任务小，出了问题也容易定位。

可以这样描述任务：

读取当前设计选区，先输出组件树、颜色/字号/间距和无法确定的交互。

确认后再生成 React + TypeScript 组件，样式沿用项目现有方案。

不要新增依赖，不修改路由；图片使用占位路径，并列出待替换资产。

把“分析”和“写文件”拆成两步，就是为了留个缓冲。Agent 先把它读到的内容复述一遍，这时候很容易看出问题：选区是不是选错了、状态是不是漏了、它想的方案跟项目规范有没有冲突。确认没问题之后再生成 LoginCard.tsx 和样式文件，后面就算要回退，也不会动到其他目录。

二、在客户端中接入设计上下文

具体到 IDE 里，每个客户端提供 MCP 配置入口的叫法不太一样，配置格式和授权流程也有差别，别直接复制网上别人贴的 JSON 配置。大概的步骤是下面这样：

1. 打开 IDE 的 MCP 配置页，新增一个外部服务。
2. 按 Pixso 开发者文档提供的方式填写服务端信息。
3. 完成登录或授权，确认客户端显示服务可用。
4. 回到设计工具选中目标图层，再在 IDE 中发起最小任务。

因为配置跟客户端版本绑定得紧，直接抄容易过期，最好还是去看设计工具的官方文档。界面显示“已连接”之后也别急着写代码，先确认一下选中的是不是目标图层。有时候连接没问题，但模型拿到的是另一个页面或者更大的父级选区，输出自然就跑偏了。

第一次请求只让它描述选区就够了：有哪些层级，哪些元素重复出现，读到了哪些颜色和尺寸，还有什么拿不准的。如果回复明显不对，就回头检查选区、权限和连接状态。别急着让它继续生成，不然错误上下文会被写进仓库，后面再改更麻烦。

三、让生成结果符合现有工程

Agent 看懂设计图只是第一步，真要落地，还得让 Agent 搞清楚咱们工程的具体情况。它必须知道这个仓库用的什么框架、文件放哪、样式怎么组织、组件怎么命名。项目里如果已经有 Button、Modal 这些基础组件，就把路径告诉它，不然它很可能重新造一套。

第二轮提示词可以这样写：

基于刚才的分析实现组件。

约束：复用 src/components 中已有基础组件；类型定义完整；

不改动业务接口；为键盘操作保留焦点状态；完成后说明每个文件的修改原因。

代码生成后，先跑一遍项目自带的类型检查和 lint。页面能打开只是说明没报错，跟“合格”还差得远。DOM 层级合不合理，重复内容是不是还在复制粘贴，颜色和间距有没有用项目里的变量，这些都得再看一遍。然后把文案换成长一点的，窗口拉窄，看看按钮会不会被挤出去。图片和图标也要确认真实来源，别把临时占位的带到生产环境。

四、常见问题、边界与回退

Agent 读不到选区的时候，先把范围缩到单个图层试试，再检查授权和服务状态，最后重新发一条只读请求。一层层来，比同时折腾网络、代码和提示词要靠谱得多。请求范围太大也容易让回答含糊不清，特别是画板里同时放了桌面端、移动端和多个历史版本的时候。

生成出来的布局如果跟设计差很多，多数时候不是模型写 CSS 的问题，而是设计稿没说明响应式规则，或者现有组件的命名对不上。不确定的地方就显式列出来，让设计和开发一起定。至于断点、错误态、加载态这些，最好还是回设计文件里补上。

这里得提个醒：设计稿里看不出业务权限、接口字段、埋点和安全策略。Agent 可以帮忙整理结构、生成样式、补重复代码，但前面那些信息还得从需求和工程上下文里拿。涉及到密钥、生产配置和用户数据的时候，要限制工具访问范围，并且保留人工评审。

最后：提交前再顺着页面走一遍

提交代码评审前，我建议自己先顺着页面走一遍。重点看看 DOM 结构是不是合理映射了图层关系，颜色、字号、间距这些细节对不对。键盘操作、禁用态、报错和加载中的状态也要试一下。最后回工程里过一遍类型、依赖、组件复用情况，确认没问题了再提 PR。按这个顺序来，不容易只顾着看 UI 截图而忽略代码本身的质量。

这套流程跑下来，主要就是省掉了反复查参数、复制粘贴样式和来回解释结构的时间。碰到复杂页面，还是得老老实实拆成小区块，记得保留 Agent 的分析结果和文件变更记录，方便追溯。个人项目先试一个组件就行；如果是团队用，可以把用顺手的提示词、变量命名规则和验收清单沉淀到现有规范里，不用急着搞一套全新的流程。