设计师Vibe Coding怎么做？从设计稿到可运行页面

设计师做 Vibe Coding，可以从一条完整的小流程开始：整理设计稿和组件规范，让 Codex 或 Cursor 实现一个页面，在浏览器里检查操作与不同屏幕，再根据具体问题逐轮修改。先做能选日期、能提交、能看见结果的会议室预约，不要第一轮就要求生成整个办公系统。设计师负责信息与体验决策，AI 推进实现，开发者接手数据、权限与生产部署。

还没有成熟页面时，可以先用Pixso 的 AI 界面设计能力建立可编辑设计稿，再整理布局、组件与状态。已有设计稿就沿用它，不必为了使用 AI 再生成一套。设计文件和代码项目有共同依据，后面的修改才不会每次都从头来过。

从一条预约流程开始，而不是一句“做个系统”

这里的目标是让一位同事能在页面上完成预约：选择日期，找到合适会议室，选择开始和结束时间，填写会议名称，提交后看到结果。第一次不做设备报修、费用核算、组织架构和经营看板。这些功能不是不重要，而是尚未决定预约体验之前，先把它们堆出来并不能帮助判断页面好不好用。

先把本轮成果写清楚：“一个在本地可运行、使用演示数据的预约页面，覆盖成功与冲突两条路径。”这句话比“高保真、现代、完整”更有用，因为它说明了要完成什么，也说明本轮不需要连接真实员工账号和会议室系统。

接着确定业务规则。比如本例只支持当天 09:00—18:00 的预约，时间以半小时为单位，结束时间必须晚于开始时间；已经占用的时段不能选择；提交时若发生冲突，保留会议名称并引导重选时间。它们是这次练习的条件，换成公司项目时，就替换为实际规则。

这一步做的是产品与设计判断，不能省略成“让 AI 自己补齐”。如果团队还在争论先选会议室还是先选时间，先用低成本页面比较两条路径；如果流程已经确定，就把它当作约束，避免 Agent 擅自换流程。

设计稿要交付行为，不只交付一张成功页

把预约页整理成四组可定位的对象：筛选区、会议室结果、时间选择、提交反馈。页面中重复使用的按钮、输入框和状态标签尽量沿用现有组件；文本样式、颜色与间距使用团队已有规范。图层名不必写成长句，但“预约时间”“会议名称”“提交预约”比几十个重复的 Frame 更容易定位。

同时补出最容易影响实现的状态：没有符合人数条件的会议室、未选择完整时段、提交中、时段冲突和预约成功。它们可以位于同一文件的相邻画板，或用组件变体表达。关键是让接手的人知道某次操作会改变什么，而不是只看到静态画面。

例如“无可用会议室”与“加载失败”不能共用一句“暂无数据”。前者应让用户调整日期或人数；后者应提供重试，保留筛选条件。AI 只拿到一张正常列表时，很难凭空知道你期待哪一种处理。

在 IDE 中查看 Pixso 画布与 Agent 对话，可以让设计对象和实现任务放在一起比较。先确认 Agent 读取的是哪一页、哪一个容器，再告诉它要保留哪些结构。看见画布只是获得设计上下文，实际页面仍要启动后到浏览器中检查。

图片资源也要一起准备。图标用项目已有资源，会议室照片使用可合法使用的素材；不要让 Agent 随手换一批网络图片。需要裁切比例和焦点位置时，在设计稿或任务里说清楚。这样生成后要修的是布局差异，而不是再去找素材、补授权和改错误图片。

最后留一个简短的设计说明：哪些宽度可以伸缩、哪些区域可以换行、会议名称过长时如何显示。设计稿给出视觉参照，说明补上图片不容易表达的行为，两者互相配合。

给Codex或Cursor的资料，要同时包含设计与项目

已有代码项目，就让 Agent 先阅读项目说明、启动命令、页面路由和可复用组件，再处理设计稿。不要一上来让它另建一个完整项目，否则容易得到一份独立 Demo，无法接回团队正在维护的产品。

对新练习，先确定一套能在自己电脑运行的环境，再开始做界面。你不必先学会全部前端知识，但至少要知道项目放在哪、如何启动、浏览器打开哪个地址，以及如何退回上一版。可以让 Agent 解释这些操作，同时保留项目 README 和变更记录。

连接 Pixso 时，把目标图层链接交给 Agent，而不是只发官网地址或整份文件的分享页。Pixso 的新版远程 MCP 通过授权访问设计对象，本地连接则有自己的客户端条件。具体连接方式可以查看远程 MCP 文档；配置完成后，先让 Agent 说明读到的页面与主要区域，再开始改动。

要区分两条实现路线：Agent 根据读取的设计信息，在现有项目中编写代码；或者调用 Pixso 的 design_to_code 获取 D2C+ 结果。后者需要企业版全功能或研发席位，目标文件位于企业空间，具体条件见D2C+ 快速开始。连接成功不等于已经拥有每项工具权限。

第一条指令可以这样写，方括号里的内容替换成自己的资料：

请先阅读这个项目的 README、现有页面和 UI 组件，再读取［Pixso预约页图层链接］。目标是在［页面路由］完成会议室预约演示。沿用现有框架、导航、按钮和输入框，不另建一套组件库，不修改账号和权限模块。

本轮先实现日期与人数筛选、会议室详情、起止时间选择和提交结果。使用独立演示数据，覆盖成功与时段冲突；冲突后保留会议名称。先列出要复用的组件及需要补充的信息，确认能定位设计后再修改。完成后启动页面，给出可打开的地址。

这不是要求 AI 一次做到所有事情，而是先约定任务对象和改动范围。缺少图层、组件或启动条件时，先补上缺口；不要用“尽量还原”掩盖不知道从哪里开始的问题。

第一轮先打通操作，再处理剩余细节

让 Agent 按用户路径推进，比按屏幕上看见的盒子逐个填满更容易发现遗漏。会议室预约的第一轮可以分成三段：筛选后结果会变化；选中会议室后能选择有效时段；提交后显示与选择一致的结果。

每做完一段就运行一次。筛选控件能点开，但改变人数后列表没有变化，说明它只有外观，没有完成任务；提交按钮弹出固定“成功”，却没有显示用户选中的时段，也不算流程闭环。此时先修行为，不急着统一所有圆角和阴影。

演示数据应集中管理，让状态容易切换。例如给两间会议室设置不同容量和占用时段，并预留一种“提交时冲突”的返回结果。不要把所有情况都绑定在最整齐、最顺利的一条数据上，否则一换名称或时段，布局和逻辑就可能一起出问题。

AI 生成新代码后，要求它说明哪些是页面逻辑、哪些是演示服务、哪些等待真实接口。这能帮助设计师理解成果，也让开发者知道后续替换哪里。页面里的“提交成功”不应让团队误以为真实会议室已被占用。

如果已有项目具备测试命令，让 Agent运行与改动有关的测试。没有测试基础时，也可以先保存一份明确的手动操作步骤：选什么、点什么、预期出现什么。测试并不一定要从复杂框架起步，但结果必须能够被别人重复检查。

第二轮修改，要把“不好看”变成具体动作

设计师的专业价值往往在这一轮最明显。第一版信息可能都在，却没有清晰层级；按钮能用，却抢走了页面里所有注意力。不要只说“再高级一点”，先指出是哪一种信息或行为让体验变差。

比如预约页的主要问题是日期、人数和设备条件同时挤在一行。可以要求：“日期保持完整显示，人数作为紧凑控件，设备条件允许换行；窄屏时提交区回到正常文档流，不覆盖时间选择和错误提示。”这条意见明确到布局关系，Agent 更容易只修改相关区域。

再比如会议室名称变长后，右侧的“可预约”标签被挤没。真正要解决的不是把字号不断缩小，而是决定名称是否允许两行、状态是否应独立占位，以及卡片高度是否可以随内容增加。设计师先作出取舍，代码调整才有方向。

• 先修任务路径。用户找不到下一步、错误后无法继续，比阴影偏重更紧急。
• 再修信息层级。主要信息、辅助信息和操作是否容易分辨，不靠每个区域都加边框解决。
• 然后修布局与状态。处理换行、溢出、禁用、加载和长内容。
• 最后统一视觉细节。字号、色值、圆角、图标线宽应回到已有规范，不逐页凭感觉调整。

每条修改都加一句保留条件。例如“只调整筛选区布局，保留当前筛选结果、选中状态和提交处理”。改完再走一次已经成功的操作，确认新样式没有破坏旧行为。

可运行页面，至少要经过三层检查

代码没有报错，不能证明页面好用。浏览器把真实字体、内容长度、布局和操作状态放在一起，往往会暴露设计稿和代码阅读都看不见的问题。OpenAI 的前端设计实践也强调用视觉参照和浏览器检查推动迭代；工具提供观察能力，是否符合业务仍要由团队判断。

本例可以先在约 1280 像素宽的桌面窗口与约 390 像素宽的手机窗口检查，再拖动窗口观察中间宽度。不要只测试两个固定尺寸：某个筛选控件可能恰好在中间宽度才溢出。检查时也换一组数据，包括很长的会议名称、没有设备信息的房间、没有可用时段的日期。

交互检查不要漏掉键盘：能否用 Tab 到达日期、时段和提交按钮，当前焦点是否可见，弹窗关闭后是否回到合理位置。错误不能只靠红色区分，文字要说明哪里有问题以及怎样继续。自动检查能帮忙找一部分问题，但不能代替真正完成一次预约。

给 AI 的检查要求也应具体：“打开预约页，选择已有占用时段，记录结果；换成可用时段提交，核对成功信息；缩窄窗口，检查底部按钮是否遮挡表单。”如果环境无法打开浏览器，就保留待检查项，由人补测，不能把模型的自述当成截图和操作结果。

交接的不是一张截图，而是一份能接着改的成果

当主流程可以演示，就准备交接。把设计文件链接、代码目录、启动方法、页面入口放在同一份说明中，并列出已完成与未完成的部分。对于预约页，尤其要讲清楚当前数据来自哪里，真实占用校验、员工身份、通知和重复提交保护由谁接入。

设计师也应保留本轮作出的决定：为何移动端筛选换行、为何冲突后保留名称、为何成功页显示具体时段。下一位同事知道决定的理由，才能在新需求出现时继续优化，而不是把结果当成不可解释的 AI 输出。

如果同一类检查反复出现，可以再把它们整理成给 Codex 和 Cursor 使用的设计 Skill，让后续页面沿用相同方法。Skill 适合沉淀检查顺序和规则，单次会议室的名字、演示数据和当前错误则留在本次任务里。

设计师 Vibe Coding 的起点，不是学会一长串工具名字，而是把一条用户路径说清楚、做出来、看着它运行，再把发现的问题改准。从一个预约页面开始，设计稿负责表达意图，AI 帮你推进实现，浏览器提供反馈。能在第二次需求变化时继续修改，才说明这条工作流真正接了起来。