如何用 AI 做好网站设计：从需求说明到界面验证
Neaptide · 2026年9月20日 · 13 分钟阅读 · 更新于: 2026年10月3日
如何为 AI 准备设计说明、比较页面方案、选择图片并验证界面。包含可参考的提示词与虚构灯具工作室示例。
本文目录
“做一个漂亮、现代的网站”把太多决定留给了模型。模型不知道谁会来看这个页面，用户需要了解什么，哪些信息能帮他们做决定。缺了这些，设计稿再吸引人也很难判断合不合适：好看不等于能完成任务。
所以在出第一版设计稿之前，先准备页面内容，定好视觉规则，想清楚怎么验收。下面这套流程写给借助 AI 建站的小企业经营者、产品经理和设计师。
Anshu Chimala 的方法有哪些值得借鉴
在 How to turn your AI into a world-class designer 一文中，Anshu Chimala 建议先探索多个创意方向，再发展选中的方案，并通过迭代完善。他提到的做法包括：让另一名 AI 评审只看截图，不接触开发历史；围绕具体的设计意图生成图像。
这些是作者的实践建议，他的演示并不保证每个项目都能达到同样的质量。尤其要小心另一个模型打出的“9 分”之类评价。分数可以用来比较版本，却看不出用户能否顺利完成任务。
下面以一家虚构的灯具维修工作室为例。文中的需求说明、设计稿和场景都是教学示例，我们没有做用户测试，也没有测量业务效果。
先明确用户要做的决定
对工作室而言，“获得咨询”这个目标过于笼统。用户想知道的是这里能不能修自己的灯具，初步评估要发哪些资料，之后怎样把物品交给工作室。页面该放什么内容，就由这几个问题决定。
可以从一段简短的任务说明开始：
我们正在为一家灯具维修工作室设计网站。用户想知道自己的灯具能否修复。主要操作是发送照片和故障说明，以获得初步评估。在此之前，用户需要了解维修类型、咨询流程和收件条件。请列出需要准备的材料，并单独标明缺失的信息。不要编造价格、工期、客户评价或保证。这样的提示词能在动手画页面之前暴露资料缺口。如果收件条件尚不明确，就向工作室确认。用漂亮的页面包装一个虚构承诺，只会把问题推迟。
Design Council 的双钻模型遵循的也是这个顺序：先理解问题，再开发解决方案。它包括 Discover、Define、Develop 和 Deliver 四个阶段，即发现、定义、发展，以及通过测试完善并交付方案。生成设计稿只是其中的一部分。
写一份能指导决策的需求说明
有用的设计说明会把视觉选择和页面内容绑在一起。示例工作室适合安静、以物品为中心的呈现方式：放大细节照片，配上清楚的图注，并突出“发送照片”这一操作。这是我们为本示例做的选择，不是所有服务类企业都适用的风格。
| 说明项目 | 工作室的选择 | 检查方式 |
|---|---|---|
| 核心问题 | 我的灯具能修吗？ | 用户能轻松找到答案或下一步 |
| 内容 | 维修类型、案例、咨询流程 | 每个部分都提供真实信息 |
| 视觉重点 | 物品和细节的照片 | 图片有助于看清具体工作 |
| 文案 | 简洁说明，避免行业术语 | 用户知道需要发送哪些照片和资料 |
| 主要操作 | 发送照片，申请初步评估 | 按钮通向正确的表单或联系渠道 |
| 限制条件 | 初步估价不等于最终价格 | 在咨询操作附近说明区别 |
不要把需求说明写成一长串禁令。“不许使用卡片”并不能说明页面是否有用。展示服务列表时，卡片可能很合适。要看的是卡片里写了什么，用户能不能拿来比较。
用相同内容比较方案
在比较布局前，先准备同一组标题、服务说明和图片。如果一个版本使用准确的文案和细节照片，另一个版本只有占位内容，那么你同时改变了多个变量。
这家工作室可以尝试三种组织方式：
- 按故障类型组织。 用户先找到自己的问题，再了解收件条件。
- 按修复案例组织。 以真实项目为主体，解释每次做了哪些工作。
- 按维修流程组织。 从第一张照片开始，一步步说明直到取回物品的过程。
三种方案组织信息的逻辑不同，所以确实值得一比。页面密度、图片大小和字体风格，留到之后再谈。
请按照这三种思路，分别整理页面结构。使用相同的基础资料和主要操作。说明每种结构首先回答哪个问题，哪些信息放在后面。暂时不要添加装饰效果。指出哪些决定还缺少必要资料。下面三张原创设计稿围绕同一主题展开。第一张强调故障，第二张突出物品，第三张解释咨询流程。它们的配色和构图也不一样，所以只能看作创意方向的展示，算不上控制变量实验。如果只想检验结构，就让视觉风格和内容保持一致。
请一位没有参与设计的人找到收件条件，并说明下一步怎么做。如果对方做不到，就回头检查结构。他喜欢什么颜色，另外再聊。
随机字符串能帮助产生新想法吗
当方案过于相似时，可以尝试一种不常见的联想来源。Chimala 建议用外部脚本生成随机字符串，再把它作为视觉设计的起点。把它当作一次实验就好，不做也无妨。
Sakana AI 研究人员提出了 String Seed of Thought 方法：模型先自己生成一个随机字符串，再通过对它做运算得出答案。他们研究的是模型遵循概率指令的能力和生成结果的多样性。这种方法不需要外部生成器，这一点与 Chimala 的实用变体不同。
这些结果证明不了随机字符串能让网站更好用或带来更多销售。放到实际项目里，问一句就够了：这次实验有没有产生符合任务、值得继续发展的方案？如果没有，就先放下。光凭新奇，不足以替换掉清晰的导航。
根据用途选择图片
一张修好的灯具照片，能说明工作室真正会做什么。生成图像做不到这一点，因为它背后既没有真实订单，也没有实际完成的维修。
图片要按用途分开。案例集只放真实照片，而且要有使用许可。咨询流程可以用原创示意图来解释。概念图可以做封面或营造氛围，但要标明来源。
生成之前，先决定图片的位置。如果旁边有标题，就把两者放在一起看。如果图片在窄屏上会被裁切，要确认关键细节还在画面里。文案、按钮和服务条件保留为普通页面元素，这样改起来不必动图片。
对于示例项目，可以这样提出任务：
制作一张“如何申请灯具初步评估”的示意图。分为三个步骤：拍摄物品全貌；近距离拍摄损坏部位；描述哪里不能正常工作。图注使用普通页面文字。不要把虚构维修作品当作工作室的真实案例。
把评价变成可以验证的修改
“看起来很廉价”没有告诉任何人该改哪里。有用的反馈会说清位置、问题，以及改完之后应该是什么表现。
| 笼统感受 | 可执行的修改要求 |
|---|---|
| 页面内容太杂 | 找出重复信息，建议合并哪些部分，并说明保留了什么 |
| 按钮不显眼 | 检查用户读完条件后能否找到发送照片的操作，尝试将按钮放在附近 |
| 手机上不好用 | 检查窄屏表单的标签、换行、键盘、错误提示和提交过程 |
| 照片没有帮助 | 说明每张照片的作用，把模糊图注改成具体工作说明 |
可以让 AI 先做初步检查。提供用户任务、设计说明和当前画面，并要求它区分可见问题与必须在可操作网站上验证的假设。看截图足以讨论构图，但表单能不能提交成功，截图说明不了。
保留简短的修改记录：观察到什么、修改了什么、如何确认。例如：“提交失败后故障描述消失 → 保留用户输入 → 再次模拟提交失败，确认描述仍在。”这样一份记录，比一路上涨的审美评分有用得多。
在实际使用场景中检查界面
上线前，完整走一遍核心流程。对于工作室，这包括查找条件、准备照片、填写咨询、修正错误，以及收到清晰的确认。不要只检查顺利完成的路径：空字段和上传失败也需要明确反馈。
另外检查文字是否易读、控件是否容易点中。WCAG 2.2 的 AA 级文字对比度准则要求：普通文字至少为 4.5:1，大号文字至少为 3:1，并设有明确例外。大号文字指至少 18 pt 的文字，或至少 14 pt 的粗体文字。对比度要用文字和背景的实际颜色来算，凭肉眼判断不算数。
对于指针操作目标，AA 级准则 2.5.8 要求最小为 24 × 24 CSS 像素。例外也有，比如周围留有足够间距的较小目标，以及行内文字链接。这只是下限，准则并没有建议所有按钮都做成这个尺寸。
通过这两项检查不代表符合整个标准。还要用键盘把页面走一遍，看焦点是否可见、字段有没有标签、放大文字后页面表现如何。然后请一位目标用户完成一个具体任务，过程中不给提示。记下他们在哪里停顿，哪些地方的理解和你预想的不一样。
什么时候可以停止打磨
做第一版之前，先写下怎样才算完成。用户能找到维修类型和收件条件，明白需要发送什么，能完成咨询，出错后输入不会丢，并且收到确认。还有一条：每一项公开承诺都要与工作室的真实流程相符。
达到这些条件后，后续修改都要有观察依据。用户把初步估价当成最终价格，就改写说明。照片附加不上，就修表单。至于想再换一种色调，可以晚些再说。
先把一个流程做通。这样下一次和 AI 协作时就有具体的东西可谈：一个能指出来的问题，和一种检查它是否已经解决的办法。
来源
- Anshu Chimala — How to turn your AI into a world-class designer，Lenny’s Newsletter，2026 年 9 月 1 日。原文。仅使用公开可读部分，未查阅订阅专属后续内容。
- Design Council — The Double Diamond。流程介绍。用于区分问题研究、方案开发和验证。
- Kou Misaki、Takuya Akiba，Sakana AI — String Seed of Thought: Prompting LLMs for Distribution-Faithful and Diverse Generation。方法与实验。关于生成多样性和概率指令的信息来源。
- W3C — Understanding SC 1.4.3: Contrast (Minimum)。文字对比度。
- W3C — Understanding SC 2.5.8: Target Size (Minimum)。目标尺寸与例外情况。
来源于 2026 年 10 月 3 日核查。工作室需求说明、提示词、表格和示意图均为本文创作，介绍的是一套建议的工作流程，不应当作实验报告来读。