很多人让 AI 做前端页面，第一句话就是：
帮我做一个好看的首页。
然后得到的结果通常很眼熟：大标题、渐变背景、几个卡片、一个按钮，看起来像模板网站。不是 AI 完全不会设计，而是你没有告诉它什么叫“好看”，也没有告诉它这个页面到底给谁用。
前端设计不是把颜色堆上去。一个真正能用的页面，至少要说清楚用户是谁、页面目标是什么、信息怎么排列、组件有哪些状态、移动端怎么适配。
这篇给你一套可以直接复制的 UI 提示词写法。
第一步：先说清楚页面给谁用
同样是首页，SaaS、教育产品、代充平台、开发者工具、个人作品集，气质完全不一样。
如果不说明用户，AI 就会默认做一个最常见的“科技感首页”。这也是很多页面看起来像同一个模板的原因。
用户画像提示词
我要设计一个网页，产品是：[产品名称和一句话介绍]。
目标用户是：[用户群体]。
用户打开页面时最关心：[核心问题]。
请先不要写代码，先帮我分析这个页面应该传达什么感觉，以及用户最需要看到哪 5 类信息。
这一步的价值是先定方向，不急着开工。
第二步：把页面目标说具体
“好看”不是目标。页面目标可能是注册、下单、阅读、查询订单、发起对话、查看 API 文档，也可能是让用户理解一个复杂服务。
目标不同，布局就不同。
页面目标提示词
这个页面的主要目标是：[例如让用户理解服务并点击注册]。
次要目标是：[例如查看教程、了解价格、联系客服]。
请基于这个目标，设计页面信息层级。
输出：
- 首屏应该出现哪些内容
- 第二屏应该承接什么
- 哪些信息应该放在最后
- CTA 按钮应该写什么
- 哪些内容不应该放在首屏
你会发现，只要目标清楚，页面就不会乱。
第三步：不要只说风格，要给参考约束
如果你只说“高级”“简洁”“科技感”，AI 很难判断边界。更好的方式是给风格约束。
视觉风格提示词
请设计一个偏成熟、克制、适合长期使用的工具型界面。
视觉要求：
- 不要大面积紫色渐变
- 不要堆太多装饰图形
- 页面以信息清晰和可扫描为主
- 卡片只用于独立信息块，不要卡片套卡片
- 按钮、输入框、表格要有明确状态
- 移动端文字不能挤在一起
这类约束比“做高级一点”有效得多。
第四步：让 AI 先给结构，再写代码
很多人一上来就让 AI 写完整页面，结果改起来很痛苦。
更好的流程是：先让 AI 给线框结构，再确认，再写组件。
页面结构提示词
请先不要写代码。请为这个页面设计一个线框结构。
页面主题：[页面主题]。
用户目标：[用户目标]。
请输出：
- 页面分区
- 每个分区的标题和核心文案
- 每个分区的主要组件
- 分区之间的逻辑关系
- 移动端布局变化
等结构满意了，再让它开始写代码。这样返工少很多。
第五步：把组件状态说清楚
专业前端和模板页面的差距，经常不在静态截图，而在状态。
按钮有没有 hover？输入框错误状态怎么显示？加载中怎么处理？空数据怎么展示？手机端菜单怎么收起？表单提交成功后发生什么？
组件状态提示词
请为页面中的关键组件补全交互状态。
组件包括：[按钮、表单、卡片、表格、导航、弹窗等]。
每个组件至少说明：
- 默认状态
- hover / focus 状态
- loading 状态
- error 状态
- empty 状态
- 移动端状态
这个提示词适合让 AI 把页面从“能看”提升到“能用”。
第六步：让 AI 做移动端检查
很多 AI 生成的页面，桌面端看还行，手机端一塌糊涂。常见问题是按钮太挤、标题太大、卡片太多、表格横向溢出。
移动端检查提示词
请检查这个页面在移动端可能出现的问题。
重点检查：
- 标题是否过长
- 按钮文字是否会换行难看
- 表格是否需要改成卡片或横向滚动
- 导航是否需要折叠
- 关键 CTA 是否仍然容易点击
- 是否有文字遮挡或元素重叠
如果你用 Codex 或其他代码工具生成页面，这一步一定要加。
第七步：让 AI 做设计复盘
页面写完后，不要急着上线。让 AI 扮演挑剔的产品经理和设计师检查一遍。
设计复盘提示词
请你扮演一位严格的产品设计负责人，检查这个页面。
请从以下角度反馈：
- 用户第一眼能不能看懂这是做什么的
- 信息层级是否清楚
- CTA 是否自然
- 有没有模板感太重的地方
- 移动端是否可能出问题
- 哪些文案像 AI 写的，应该改得更像人话
这个提示词很适合最后一轮打磨。
一个完整前端设计提示词模板
你可以直接复制下面这段：
我要设计一个网页，主题是：[主题]。
目标用户是：[用户]。
页面目标是：[目标]。
业务背景是：[背景]。
请按专业产品设计流程帮我完成。
第一步先输出页面信息架构，不要写代码。
第二步输出首屏、内容区、功能区、CTA、FAQ 的结构。
第三步给出视觉风格建议，要求克制、清晰、适合真实产品，不要模板感。
第四步列出关键组件和状态。
第五步检查移动端适配问题。
等我确认结构后，再开始写代码。
用哪个工具更合适
如果你只是想和 AI 讨论页面结构、文案和设计方向，可以用 Glouth Chat，多模型对比很适合做设计发散和文案打磨。
如果你的页面要接入国外大模型 API，比如做 AI 客服、AI 写作工具、AI 面试助手，就需要看 Glouth Link。前端只是入口，真正的模型调用、额度和日志管理要在后端处理。
如果你需要稳定开通 ChatGPT Plus、Claude Pro 等订阅，可以看 Glouth Pay。具体服务说明以页面实时显示为准。
最后提醒：AI 不怕你要求多，怕你要求模糊
让 AI 做前端，最忌讳一句“好看一点”。
你要告诉它：用户是谁，目标是什么，页面有哪些内容，不能出现什么风格，组件要有哪些状态，移动端怎么处理。
设计不是装饰，而是让用户更快理解、更顺手操作。你的提示词越像一份专业需求文档，AI 给出的页面越接近真实产品。
想直接上手?
这篇讲的活,打开 Glouth Chat 就能干:GPT-5.5 / Claude 等模型中文直接用,不用翻墙、不用海外卡。想给自己的 ChatGPT 账号开 Plus 的看国内充值指南;要把 AI 接进自己的工具,走 Link API。