← 返回首页
首页 / 实操教程 / 怎么用 AI 做网页与 APP 界面设计?

怎么用 AI 做网页与 APP 界面设计?

让 AI 直接生成界面,出来的东西「像那么回事但不能用」:按钮位置违反习惯、表单字段缺失、移动端点击区域太小。界面设计的规矩是硬的,AI 不知道你的业务逻辑。

这件事该用哪些工具

K

Krea

生成视觉风格探索快,适合定配色和质感方向

C

ChatGPT

写文案填充、梳理信息层级、生成可用的组件结构

C

Canva

非设计师做简单落地页和海报式页面最快

具体怎么做:四步

先画文字版线框,别先想视觉

把每个屏幕要放什么,用文字从上到下列出来:标题、说明、输入框 ×2、主按钮。结构对了视觉才有意义,顺序错了再美也没用。

信息层级只允许三层

页面标题、区块标题、正文。三层以上读者就找不到重点。让 AI 帮你排层级,比让它直接画界面有用。

用真实内容填,不要用 Lorem ipsum

占位文字会掩盖排版问题。真实文案长度差异大,用真实内容才能看出哪里会挤。

生成视觉稿后一定要检查三件事

点击区域是否够大(移动端至少 44×44px)、对比度是否够(正文至少 4.5:1)、空状态和错误状态有没有设计。

可以直接复制的提示词

把花括号里的内容换成你自己的情况,整段粘进对话框即可。提示词里的要求越具体,输出越能用。

从需求生成界面结构
我要做一个 {页面类型,例:SaaS 产品的定价页}。

业务背景:{一句话说清产品是做什么的}
目标用户:{谁会用这个页面}
这个页面要达成的唯一目标:{例:让访客选一个套餐并点试用}

请给我:
1. 信息层级:这个页面应该有哪些区块,按重要性排序,说明每个区块存在的理由
2. 每个区块的内容清单:标题文案、正文要点、按钮文案(用真实中文,不要占位文字)
3. 主按钮放在哪里,为什么
4. 哪些内容应该删掉(我可能会想放但我们不需要的)
5. 移动端要怎么调整顺序

不要给我视觉建议,只要结构和内容。
检查界面的可用性问题
这是我的界面设计方案:
{描述你的界面,或者贴出各区块的结构}

请从可用性角度检查,逐条指出问题:
1. 信息层级是否清晰,读者能不能三秒找到主操作
2. 点击区域是否够大(移动端 44×44px 标准)
3. 文案是否有歧义,按钮写的是「动作」还是「概念」
4. 空状态、加载状态、错误状态有没有考虑
5. 表单字段是否都是必要的,有没有可以删的
6. 无障碍问题:对比度、焦点顺序、是否有只靠颜色传达的信息

每条给出:问题 → 为什么是问题 → 具体怎么改。不要泛泛而谈。

最容易踩的三个坑

直接让 AI 生成视觉稿

它能画出好看的图,但对不齐栅格、间距不统一、组件重复定义。视觉稿必须落在设计工具里做,AI 只给方向。

用占位文字

Lorem ipsum 和「示例文本」长度都一样,看不出真实内容的挤压问题。上线才发现标题换行、按钮文字撑破。

忽略非正常状态

只设计了「有数据」的界面。空列表、加载中、请求失败、没有权限——这四种状态占了真实使用的一半。

常见问题

不会设计能做出能用的界面吗?

能做出能用的,做不出好看的。路径是:用现成的组件库(如 shadcn、Ant Design)保证可用性,AI 帮你想结构和文案,视觉部分靠组件库默认样式兜底。

AI 能直接生成可用的前端代码吗?

能生成,但多数需要人改。比较现实的用法是让它生成单个组件的代码,不要让它一次生成整个页面。

设计稿给开发,要注意什么?

标注清楚间距(用 4 或 8 的倍数)、字体大小、颜色值,以及各种状态。AI 生成的设计稿通常缺标注,这一块必须人工补。

其他实操教程

这套流程是实际跑通的,不是理论推演

工具迭代很快,界面和功能可能已经变了。如果你按这个流程做下来卡在某一步,欢迎告诉我们,会核实后补充。