AI生成UI设计稿，最有效的起点是“谁要完成什么任务”，而不是一串风格形容词。先写清页面、内容和操作关系，生成后只改不符合任务的区域，最后按设计评审、原型演示或代码开发选择输出方式。这三个步骤既适合第一次尝试，也能减少反复重生成。
需要用中文描述形成页面初稿，可以从墨刀AI生成原型图开始。本文以课程App的列表、详情和报名确认为线索，说明每一步要输入什么、检查什么，以及什么结果才适合交给下一位同事。
先分清：UI图片、可编辑设计与运行页面
| 你需要的成果 | 重点检查 | 容易踩的坑 |
|---|---|---|
| 视觉方向或汇报图片 | 信息层级、配色和内容是否表达清楚 | 把图片当成可编辑图层 |
| 设计稿或交互原型 | 对象能否修改、状态与页面关系能否维护 | 只看到预览就认为已具备完整原型 |
| 前端页面代码 | 能否运行、结构与状态是否符合项目要求 | 把能导出代码等同于业务系统已经完成 |
墨刀AI可面向手机App、网页和平板界面生成初稿。输入时写明目标设备、使用场景和主要操作，再按当前入口选择原型或应用；生成后分别检查对应尺寸，不能把手机画面直接放大当成网页。生成之前就决定这次是评审页面结构，还是准备接入工程，后面的修改要求才不会互相矛盾。
第一步：把模糊想法写成可生成的页面说明
输入至少包含用户、任务、页面、必需内容和限制五项。课程App不是“做一个教育风界面”这么简单：用户在列表里找课程，在详情里判断时间是否合适，再进入报名确认。没有这些关系，AI容易补出漂亮但无关的首页栏目。
为上班族设计一个课程App，包含课程列表、课程详情、报名确认三页。列表支持搜索与分类；详情显示课程安排、老师、地点和取消规则；报名确认显示已选场次及费用。页面使用清晰的中文，主要操作突出，先不加入社交和积分商城。
已有草图或参考页面时，可以把它作为输入资料，并补充“参考布局，不沿用原文案”“保留导航层级，调整内容密度”等要求。上传图片并不会自动带来正确的业务逻辑，图片外没有显示的规则仍要写出来。
第一步完成后应拿到页面清单和能讨论的初稿。先核对三页是否齐全，按钮是否指向正确下一步，再看视觉细节。如果报名需要填写多类信息，可进一步参考分步表单的步骤拆分与返回修改方法，决定是否需要多步，而不是默认把全部字段挤在一屏。
第二步：用局部要求修正设计，而不是每次全部重做
先区分问题属于结构、内容还是样式。“不好看”会让修改方向发散；“详情页把课程时间和地点放到报名按钮上方，保留其他区域”则有明确对象和完成条件。每轮集中处理一类问题，再检查关联页面。
- 结构：“课程卡片保留名称、时间、地点和价格，去掉不影响选择的标签。”
- 状态：“增加名额已满的显示方式，按钮说明原因，并保留返回列表的入口。”
- 内容：“课程名称允许两行，老师介绍不要挤压报名按钮。”
- 样式：“保持整体布局，将主按钮统一为品牌色，辅助操作使用次级样式。”
在支持点选修改的界面中，可以先选中要改的区域再提出要求；涉及多个页面的共同问题，使用对话明确统一规则。下图展示了点选页面区域后提出修改的操作方式，关键不是指令长度，而是修改范围足够明确。
如果AI同时生成了功能说明，拿它对照当前页面检查：字段是否真的存在、按钮行为是否一致、异常状态有没有漏。说明文档不是自动正确的需求规格，页面改了也应检查文档是否跟上。
第三步：按下一步工作选择交付方式
要开评审会，先提供能走通任务的原型；设计师需要继续整理图层与组件时，检查导出至墨刀后的编辑结果；研发准备接入工程时，查看或下载代码并说明尚未接入的数据与接口。不要用同一个“导出成功”代替这三种验收。
实际输出后做一个小验证：打开课程详情，修改课程名称，走完报名确认，再检查长标题和名额已满的显示。如果转入设计文件后对象无法继续按预期编辑，应先整理关键页面；如果选择代码，则把字段校验、状态和接口约定一并交给研发。
三步完成后，这份UI稿至少要解决什么
- 用户能看懂每页的主要任务，次要信息不会压过主要操作。
- 页面之间的进入、返回与确认关系明确。
- 长标题、空列表、名额已满和提交失败有对应处理。
- 同类按钮、文字层级和间距一致，修改后没有只改一页。
- 接手者知道文件位置、当前版本，以及哪些数据仍待接入。
常见问题
新手需要先学完整套提示词吗？
不需要。先用用户、任务、页面、内容、限制五项写清一个小流程。能判断结果是否帮助用户完成任务，比堆砌专业术语更重要。
生成结果很精致，为什么还要继续编辑？
默认页面通常看不出长内容、权限和失败状态。把这些实际使用条件加入后，才能判断布局和操作是否经得起使用。
可以把生成的UI直接当成正式产品上线吗？
应先完成对应交付的检查。视觉稿需要确认内容和交互，代码需要接入真实数据、运行与测试。先完成一个范围清楚的流程，再逐步扩展，比一次生成整套产品更容易控制修改成本。
