怎样把前端页面设计需求交给 AI Agent？
用目标用户、页面区域、视觉方向和可检查的交互描述前端任务，并通过变更记录和本地预览复核结果。
由 路墨 Lumoswitch 产品团队维护
先打开包含前端代码的项目目录，再说清页面、用户和验收条件；分步实现后对照补丁与实际页面检查。
怎样把设计想法变成可执行任务？
1. 打开包含页面代码和样式的项目文件夹，指出具体页面或组件。 2. 描述用户要完成的动作、信息优先级、视觉感觉和窄屏行为；给出你喜欢的现有页面或配色作为参考，而不是只说“做得高级”。 3. 说明范围和限制。示例任务： “改进 `src/app/pricing` 的价格页。让第一次访问的用户先看到方案差异和主要限制；保持现有品牌颜色，不新增 UI 库；手机上卡片改为单列，按钮需清楚可见。先检查已有组件和样式，再实现并告诉我如何本地查看。”
怎样让 Agent 分阶段完成页面？
1. 对多区域页面选择“规划”模式，并为完成标准写上可观察条件，例如“移动宽度下无横向溢出”“每个价格卡显示方案名、价格和主要限制”。 2. 看计划是否覆盖布局、文字和交互；缺少任何一项先补充再开始。 3. 工作进行中可继续提供明确反馈，比如“保留顶部导航，只调整方案区的层级”。当前任务模式会在本轮保持固定；修改后可从下一轮继续。
怎么复核前端设计结果？
1. 在工作区查看文件变更记录，确认只改了相关页面、组件和样式。 2. 按 Agent 提供的说明启动项目预览；在桌面和窄屏宽度下检查文字换行、对比度、点击区域和溢出。 3. 运行仓库实际提供的检查命令，逐一看失败输出。工作区能展示已捕获的变更和验证记录，但不会替你证明浏览器中每种设备尺寸都显示正确。
页面看起来还是不对，怎样继续？
1. 指出具体区域和可见问题，例如“窄屏的主按钮被第二张卡遮住”，不要只说“不够好看”。 2. 提供目标宽度或预期排列，并请 Agent 只改相关组件。 3. 若图片或字体没有显示，检查项目中的资源路径和浏览器错误；若样式变化不明显，先确认预览读取了当前工作区。再看一遍文件补丁和本地页面，模型生成不能替代视觉检查。