如何用 AI 做好网站设计：从需求说明到界面验证
Neaptide · 2026年9月20日 · 13 分钟阅读
如何为 AI 准备设计说明、比较页面方案、选择图片并验证界面。包含可参考的提示词与虚构灯具工作室示例。
本文目录
“做一个漂亮、现代的网站”把太多决定留给了模型。谁会访问这个页面？用户需要了解什么？哪些信息能帮助他们做决定？如果这些问题没有答案，即使设计稿很吸引人，也很难判断它是否合适：好看并不代表能完成任务。
用 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 建议用外部脚本生成随机字符串，再把它作为视觉设计的起点。这可以作为实验，但不是必做步骤。来源：Lenny’s Newsletter。
Sakana AI 研究人员提出了 String Seed of Thought 方法：模型先生成字符串，再通过对字符串进行操作来形成答案。他们研究的是概率指令遵循能力与生成结果的多样性。论文介绍的方法不需要外部生成器，与 Chimala 的实用变体有所区别。
这些结果不能证明随机字符串会改善网站易用性或提升销售。对实际项目，更有用的问题是：这次实验有没有产生符合任务、值得继续发展的方案？如果没有，就先放下。仅仅因为新奇，不足以成为替换清晰导航的理由。
根据用途选择图片
一张修复后灯具的照片，可以展示工作室真实的维修能力。生成图像无法承担这个作用，因为它背后没有真实订单，也没有实际完成的维修。
要区分图片用途。案例集需要真实照片，并获得使用许可。原创示意图可以解释咨询流程。概念图可以用作封面或营造氛围，但应明确说明其来源。
生成之前，先决定图片的位置。如果旁边有标题，就把两者放在一起检查。如果图片会在窄屏上裁切，要确认关键细节仍然可见。文案、按钮和服务条件应保留为普通页面元素，便于独立修改和适配。
对于示例项目，可以这样提出任务：
制作一张“如何申请灯具初步评估”的示意图。分为三个步骤：拍摄物品全貌；近距离拍摄损坏部位；描述哪里不能正常工作。图注使用普通页面文字。不要把虚构维修作品当作工作室的真实案例。
把评价变成可以验证的修改
“看起来很廉价”并没有说明该改哪里。有效的反馈应该指出位置、问题，以及修改后期望出现的结果。
| 笼统感受 | 可执行的修改要求 |
|---|---|
| 页面内容太杂 | 找出重复信息，建议合并哪些部分，并说明保留了什么 |
| 按钮不显眼 | 检查用户读完条件后能否找到发送照片的操作，尝试将按钮放在附近 |
| 手机上不好用 | 检查窄屏表单的标签、换行、键盘、错误提示和提交过程 |
| 照片没有帮助 | 说明每张照片的作用，把模糊图注改成具体工作说明 |
可以让 AI 先做初步检查。提供用户任务、设计说明和当前画面，并要求它区分可见问题与必须在可操作网站上验证的假设。截图可以用于讨论构图，却无法证明表单能够成功提交。
保留简短的修改记录：观察到什么、修改了什么、如何确认。例如：“提交失败后故障描述消失 → 保留用户输入 → 再次模拟提交失败，确认描述仍在。”这种记录比不断上升的审美评分更有用。
在实际使用场景中检查界面
上线前，完整走一遍核心流程。对于工作室，这包括查找条件、准备照片、填写咨询、修正错误，以及收到清晰的确认。不要只检查顺利完成的路径：空字段和上传失败也需要明确反馈。
另行检查可读性和操作控件。WCAG 2.2 的 AA 级文字对比度准则要求：普通文字至少为 4.5:1，大号文字至少为 3:1，并设有明确例外。大号文字指至少 18 pt 的文字，或至少 14 pt 的粗体文字。应检查文字与背景的实际颜色，而不是凭图片的视觉印象判断。W3C 对准则 1.4.3 的说明。
对于指针操作目标，AA 级准则 2.5.8 要求最小为 24 × 24 CSS 像素，但有例外，例如较小目标之间保留足够间距，以及行内文字链接。这是该准则的下限，并非建议所有按钮都采用这个尺寸。W3C 对准则 2.5.8 的说明。
通过这两项检查不代表符合整个标准。还应使用键盘浏览页面，检查焦点是否可见、字段标签是否明确，以及放大文字后的表现。之后，让目标用户完成一个具体任务，不提供提示。记录他们在哪里停顿，以及哪些理解与你的预期不同。
什么时候可以停止打磨
在制作工作室的第一版网站前，就写好验收条件：用户能找到维修类型和收件条件，理解需要发送什么，完成咨询，出错后保留输入，并获得确认。所有公开承诺都应符合工作室的真实流程。
达到这些条件后，后续修改应有观察依据。用户把初步估价误认为最终价格，就需要改写说明；无法附加照片，就需要修复表单。只是想换一种色调，可以晚些再考虑。
先把一个流程做通。这会让下一次与 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 年 9 月 20 日核查。工作室需求说明、提示词、表格和示意图均为本文创作，介绍的是建议工作流程，而不是实验报告。