把设计稿图层链接发给 Codex、Cursor、VSCode 等这类 AI 工具，得到的回答却是“无法读取文件”，或者它只根据截图描述页面。遇到这种情况，继续改提示词通常没用。先确认AI到底有没有连接到设计文件、拿到哪个图层，以及当前账号能做什么操作。
Remote MCP通过远程服务连接设计文件
，完成授权后，这些 AI 工具可凭图层链接读取设计，不需要设计软件一直开着。
本地MCP围绕当前文件和选区工作
，使用时客户端与本地服务要保持运行，目标文件也要处于活动页签。
IDE插件则把画布放到开发环境里
，方便一边看设计、一边生成或修改代码；它仍需要正确的MCP连接。
所以这三种方式的排查起点不同：远程连接先查授权和链接；本地连接先看服务、文件和选区；IDE里能看到画布，也要确认Agent实际连上了对应服务。
画布显示正常，不代表AI已经取得了设计数据。
AI 需要知道你要它读取哪一页、哪个容器或哪组卡片。普通分享链接可能只把人带到文件，无法准确定位目标。
以 Pixso MCP 为例
，目标图层链接应包含item-id。先在画布中选中对象，再复制该图层的链接。
第一次可以选一个范围不大的容器，例如后台页面的一组数据卡片。让AI“读取这个图层的结构，列出子节点、所用组件和关键变量，先不要修改”。如果返回的内容与画布不符，先核对链接指向，而不要立刻要求它生成整页代码。
链接还可能是旧的，文件复制、页面重组或图层替换后，重新从当前设计文件复制一次，比反复使用聊天记录里的旧链接可靠。
同一个账号可能能查看设计稿，却不能编辑。读取结构至少需要目标文件的查看权限；让AI修改画布，还需要相应的编辑权限。连接的是个人账号，文件却在另一个团队空间，也容易出现“授权成功但读不到内容”。
检查时把问题拆开：当前账号能否在设计工具里打开文件？能否手动编辑目标图层？AI客户端授权的是否是同一账号？如果前两步就失败，应先处理文件权限。不要通过扩大整个团队的访问范围来解决一个图层的读取问题。
“读取这个图层链接，列出页面分区、使用的组件、颜色和文字样式，以及关键变量。请说明无法读取的部分，暂时不要修改。”
这条指令有两个作用，一是确认AI读到的确实是目标图层；二是让它把缺失信息说出来。若结果只是一段笼统的视觉评价，没有图层、组件或样式信息，就要怀疑它并未拿到结构化设计数据。
确认读取正常，再做局部修改。例如指定某一组卡片，把间距统一为24px，保留文案与组件关系；修改后要求截图检查对齐和层级。范围清楚，才能判断修改是否成功。
AI 能读取设计稿，也不意味着生成的 React 或 Vue 代码就可以直接合入项目。设计文件提供布局、样式、组件和素材，代码仓库还有自己的组件封装、CSS变量、路由和响应式规则。生成前应说清技术栈，指出哪些现有组件必须复用、哪些区域需要桌面端和移动端适配。
完成后分别检查浏览器页面和设计画布，文字换行、图片比例、组件状态与移动端布局，可能比静态截图更容易暴露问题。需要修改时，给AI具体区域和现象，例如“窄屏下第二张卡片溢出容器”，比“做得更像设计稿”有效。
如果完全读不到文件，先看授权、账号和文件权限；能读文件却找错页面，检查图层链接及item-id；本地任务突然失效，确认客户端、本地服务和活动页签；能读结构但修改失败，核对编辑权限与指定范围；生成代码偏差明显，再检查组件、变量、素材和项目约束是否提供完整。
MCP 把 AI 接到真实设计文件，任务描述决定它读取、修改还是生成代码。先用一个图层完成“读取—核对—局部修改—截图检查”，这条小链路走通后，再扩大到整页交付。遇到问题，也更容易找到是哪一步出了错。
