用 AI 做出好网页：设计理念、协作流程、工具和案例

2026-11-10

约 4.8 小时

七份调研报告原文

做网页之前，我用 ChatGPT Deep Research 跑了七份调研：设计理念、协作流程、Skill 和规则、工具、质量闭环、惊艳手法、真实案例。这里是原文全文，另外配了动效演示和网站截图。

设计理念：好页面从哪来：设计原则、AI 平庸化机制，以及怎样把品味讲给 coding agent#

一页结论

截至 2026 年 11 月，关于 AI 前端设计已经出现一个相当一致的结论：模型很擅长把页面做到“成立”，很少会主动把页面做到“有观点”。Anthropic 在 2026 年 3 月公开的前端设计实验里直接描述，未经额外约束时，Claude 会倾向安全、可预测、技术上完整、视觉上平淡的布局；他们后来专门给生成器增加“设计质量”和“原创性”评分，并明确惩罚模板布局、库默认值、白卡片配紫色渐变等模式。这个材料来自 Anthropic 自己的实验过程，属于官方工程实测。[1][2]

Vercel 的独立实验得到相近结果。2026 年 8 月，他们用相同模型、相同 prompt、相同数据和 viewport，分别让 agent 在有和没有 design.md 的情况下生成页面。没有设计约束时，结果回到了“generic SaaS dashboard”；加入设计判断、排版规则、内容优先级、禁用模式和固定 CSS primitives 后，页面结构也发生了变化。其自动检查中的已知失败项从 91 个下降到 39 个，Vercel 同时明确提醒只有六个测试页面，这个数字无法证明整体设计质量。这个来源是 Vercel 官方、带方法和局限说明的小样本实测，发布日期 2026 年 8 月 31 日。[3]

所以，对你现在的工作方式，我会把升级方向概括成一句话：

继续锁 token、组件和实现规则，把更多精力从“规定样式”转到“规定判断”。

你已经在做的结构先行、首屏确认、真实 token、现成组件、DESIGN.md，方向基本吻合 2025 至 2026 年 Anthropic、Vercel 和 Figma 的实践。接下来的缺口主要有四个。第一，AI 需要知道什么信息必须赢得注意力。第二，它需要知道这一页允许有哪些视觉偏见，同时拒绝哪些默认答案。第三，参考网站要被拆成可以执行的属性，不能只留下 URL。第四，需要有一个只属于这页的 signature move，也就是记忆点动作或视觉决定。Vercel 2026 年的 product-design 经验尤其强调，代码能告诉 agent “最后用了什么”，很难告诉它“为什么这样决定”；决定背后的判断必须显式写出来。该来源为 Vercel 官方实践文章，2026 年 6 月 25 日。[4]

“品味”也没有神秘到无法表达。Figma 首席设计官 Loredana Crisan 在 2026 年 6 月把 taste 描述为一种长期积累的 point of view，以及把这种观点贯彻到取舍和细节中的能力。她在招聘中观察的一个核心能力是 discernment，即能说清楚“哪里不工作，以及为什么”。Figma 的说法属于资深从业者观点，不属于受控实验，但它和 Anthropic 的“把美感拆成可评分 criteria”、Vercel 的“把反复出现的判断写成 rules”互相印证。[5][1][3]

因此，最有用的设计语言通常不长得像“高级、简洁、有设计感”。更有效的语言会直接改变构图分布，例如 “Swiss International Style，严格列网格，大字号无衬线，高对比，一种强调色”；会改变信息密度，例如 “editorial，正文占主导，标题具有杂志比例，允许跨栏和 pull quote”；会改变空间关系，例如 “asymmetric grid，主视觉占 7 栏，文本占 4 栏，保留 1 栏负空间”；会改变表面处理，例如 “paper grain, halftone, hard edges, no glass”；会改变时间关系，例如 “one orchestrated page-load reveal, no scattered hover animation”。Anthropic 2026 年的官方 prompt 指南也明确推荐用具体的 typography、theme、motion、background 指令，并明确列出需要回避的 Inter、Roboto、Arial、紫色渐变、可预测布局等默认模式。[6]

最后一个重要结论来自 2025 年 11 月发表的网站审美实验。研究者让 108 名参与者评价 12 个商业和服务网站，结果显示 novelty 和 typicality 都能预测审美吸引力，且该样本中 novelty 的关系更强；商业网站相对更受典型性影响，服务网站相对更受新颖性影响。这给 Raymond Loewy 的 MAYA 原则，也就是 “Most Advanced, Yet Acceptable”，提供了网页场景里的直接实证支持。它意味着一个令人眼前一亮的页面通常仍然保留熟悉的信息结构、阅读逻辑和操作线索，只在少数高价值位置偏离常规。该来源为同行评审研究，2025 年 11 月 14 日在线发表。[7][8]

对独立开发者来说，这带来一个很实际的判断标准：好的 AI 页面不需要在每个地方表现“设计”，它需要在正确的地方出现不可互换的决定。

设计原则

下面的排序是我的综合判断，依据是基础 UX 研究、近年的 AI 前端实验，以及 2025 至 2026 年获奖网站所展示出的共同模式。这个排序适用于个人网站、工具界面、活动页和宣传型页面。电商结账、政府服务、医疗工具等强任务型页面会把熟悉性和可访问性进一步往前提。NN/G 对视觉设计长期研究的核心变量包括 scale、visual hierarchy、balance、contrast 和 Gestalt；其 2020 年文章在 2026 年 9 月再次复核，说明这些原则在近年没有被新工具淘汰。[9]

1视觉层级（visual hierarchy）与任务优先级

作用

决定用户第一眼、第二眼、第三眼分别看到什么。NN/G 对层级的定义就是按重要程度引导视线，并指出 scale、contrast、spacing、placement 都服务于这个目的。[10][9]

提示词

复制

首屏只有一个一级结论。标题承担 70% 的视觉重量，辅助说明退到第三层。首屏不要出现三组同权重卖点。模糊截图后仍应只剩一个明确焦点。

案例

Dropbox Brand 获 CSSDA 2025 Website of the Year 和 Best UX；评奖结果于 2026 年 2 月 12 日公布。它值得学的核心不是某个组件，而是大尺度品牌内容、导航和案例之间明确的主次。CSSDA 属于专业评奖社区。[11]

Jarcos：横跨整屏的超大字标 JARCOS 压着一张渐变图，第一眼只有它。

Amelia Wattenberger：名字最大、一句介绍其次、正文最后，三层一眼分清。

Diana Lu：名字「Diana.Lu」和一个巨大的彩色 D 形图案占满首屏，菜单缩在右上角。

Jorge Riera Flores：黑底居中的大标题压在一张黑白人像上，只有一个按钮。

Antoine Wodniack：红底上一行占满宽度的 CREATIVE DEVELOPER，其余信息都是小字。

David Heckhoff：大号名字配一张 3D 插画，导航退成一行小字。

Addy Osmani：黑底上名字最大、简介其次、书单在最下面。

Dropbox Brand

Jarcos

Amelia Wattenberger

Diana Lu

Jorge Riera Flores

Antoine Wodniack

David Heckhoff

Addy Osmani

2内容优先与信噪比（signal-to-noise ratio）

作用

决定页面有没有“解释性小字越补越多”的问题。NN/G 将任何用户必须处理的文字、视觉元素和动画都视为潜在 signal 或 noise，并建议先做内容优先级，再做视觉层级。该文章发表于 2018 年 9 月 9 日，属于较旧但稳定的 UX 理论。[12]

提示词

复制

任何辅助文案如果只是在解释标题已经表达的意思就删除。每个 section 只允许一个主张、一个证据、一个动作。

案例

Linear 2026 design refresh 的原则之一是 “Don’t compete for attention you haven’t earned”，他们主动降低导航区域视觉重量，让工作区成为焦点。Linear 官方设计复盘，2026 年 3 月 12 日。[13]

Danny Postma：首页只有一行身份介绍、四个链接和一个订阅框。

Emil Kowalski：没有配图和装饰，几段介绍加项目、文章列表就是全部。

Brian Lovin：头像、一句介绍、几篇文章标题，没有任何装饰。

Andrej Karpathy：头像加一条时间线，每段经历只写一两句。

Linus Lee：一整页只有自我介绍的文字和文中链接。

Eugene Yan：一句介绍、一个订阅框、一列文章，没有配图。

Chip Huyen：一张照片加几段文字，链接都放在句子里。

Linear

Danny Postma

Emil Kowalski

Brian Lovin

Andrej Karpathy

Linus Lee

Eugene Yan

Chip Huyen

3排版层级（typographic hierarchy）与可读性

作用

字体在这里首先承担信息结构，其次才承担风格。NN/G 的案例分析显示，一致的 type styles、行距和有限的层级数量，会直接改善扫描和阅读。文章发表于 2023 年 3 月 5 日。[14]

提示词

复制

中文标题可以很大，但正文保持安静。只设 display / section / body / meta 四级，meta 不承担新的核心信息。标题和正文的差异主要靠尺度与字重，不靠五种颜色。

案例

Permissionless 获 2026 年 4 月 29 日 Site of the Day，评审把它描述为 type-driven、restrained palette、editorial experience。专业评奖案例。[15]

Maggie Appleton：大号衬线标题、小号说明、分区标题，靠字号和字重分出层级。

Niccolò Miranda：复古报纸版式，巨型标题字和小号正文对比极大。

Amanda Pinsker：衬线字排版，项目名加粗、说明用常规字重，分区标题用斜体。

Jason Velazquez：版头像报纸刊头：大号衬线标题、小号副题、引文分几级。

Robin Sloan：粗体大标题、小号正文、订阅框，三级分明。

Simon Willison's Weblog：报纸式多栏，日期、标题、正文字号逐级变小。

王登科-DK博客：中文衬线大标题配小号正文和日期。

Maggie Appleton

Niccolò Miranda

Amanda Pinsker

Jason Velazquez

Robin Sloan

Simon Willison's Weblog

王登科-DK博客

4网格与对齐（grid and alignment）

作用

给自由度设边界。NN/G 对优秀网站的分析指出，底层 grid 能维持不同屏幕和内容块之间的稳定对齐；Material Design 也长期把 grid、space、scale、type 当作形成 hierarchy 的基础。[14][16]

提示词

复制

桌面使用 12-column grid。正文主轴固定在 2 个 vertical anchors 上。允许 1 个元素越界制造张力，其余全部回到网格。

案例

The Creative Website Manual 获 2025 年 11 月 28 日 CSSDA Website of the Day，标签包括 grid、scroll、typographic，本身也把 grids & layouts 作为创意网页的基础章节。[17]

Luke Volkert：超大名字横跨整行，下面每一行按同一组栏线排开。

MoeWah：做成纸质档案卷宗，编号、日期、目录都卡在同一套栏线上。

Brad Woods Digital Garden：作品格子整齐排成五列，图和标题卡在同一组格线里。

Nate Butler：文章、项目做成大小不一的块，但都对齐同一套行列。

Simon Collison：头像、配图和短文沿同一组栏线排开。

Marco Cornacchia：Bento 卡片大小不一，边缘全部对齐。

歸藏的 AI 资讯：左侧导航加右侧三列等宽卡片，行列对齐。

The Creative Website Manual

Luke Volkert

MoeWah

Brad Woods Digital Garden

Nate Butler

Simon Collison

Marco Cornacchia

歸藏的 AI 资讯

5留白与分组（whitespace and proximity）

作用

留白既提供呼吸，也表达“哪些东西属于一起”。NN/G 2024 年 4 月 8 日的解释明确把 whitespace、spacing system 和 proximity 联系起来；其层级文章也指出，组间空间加大、组内空间缩小会增强结构理解。[18][10]

提示词

复制

不要给每块内容加 card 来表达分组。优先用 24/48/96 的空间层级区分关系，只有边界确实需要显式表达时才加容器。

案例

House of Honey 获 2026 年 6 月 21 日 CSSDA Website of the Day，项目自述为 editorial、fluid，标签包括 grid 和 typographic。[19]

Steph Ango：没有卡片和边框，最新、主题、文章三组只靠间距分开。

Thariq Shihipar：头像、简介、文章列表之间留大段空白，组内行距紧。

lijigang：文章按年份分组，组与组之间留空，组内行距紧。

Innei：首屏只有头像和一句话，四周大片留白。

Anthony Fu：几段介绍和链接只靠段落间距分组，没有卡片。

向阳乔木：米色底上，介绍、标签、笔记几块靠间距分开。

@levelsio：头像、一段话、订阅框之间留大段空白。

House of Honey

Steph Ango

Thariq Shihipar

lijigang

Innei

Anthony Fu

向阳乔木

@levelsio

6对比与焦点（contrast and emphasis）

作用

对比负责让重要内容浮出背景。视觉对比过多会抵消彼此，NN/G 明确提醒如果所有元素都强调，最终没有元素突出。WCAG 对普通文本仍要求至少 4.5:1，对大文本至少 3:1，属于 W3C 规范性指导。[10][20]

提示词

复制

整页只有一个 accent role。CTA、关键数字和当前状态可以使用它，装饰不使用 accent。一级标题与正文形成显著尺度反差。

案例

SSTR Friction Reduction 于 2026 年 7 月 10 日获 CSSDA Website of the Day，项目用 editorial minimalism 处理高度工程化主题，说明“技术题材”也可以靠尺度和对比形成气质。[21]

Rauno Freiberg：黑字白底的页面里只有一个黄色大圆。

Corentin Bernadou：黑底上一个巨型橙色 FW，其余是小号灰字。

Tim Van Damme：黑白照片上只有手绘的红色涂鸦。

Jack McDade：深绿底上，高饱和的人像和亮黄大标题是唯一焦点。

Brittany Chiang：深蓝底，只有链接和技术标签用一种青色。

唐新渊：整屏饱和的蓝色里一幅高对比人物插画。

Nate Parrott：紫色页头上的大白字，下面是白底内容。

SSTR Friction Reduction

Rauno Freiberg

Corentin Bernadou

Tim Van Damme

Jack McDade

Brittany Chiang

唐新渊

Nate Parrott

7一致性（consistency）与有限规则集

作用

一致性让用户停止重新学习，也让视觉语言成立。NN/G 对优秀页面的分析将 consistent type styles、spacing、icons 和 grid 同时列为“polish”的来源。[14]

提示词

复制

radius 只允许 0 / 8 / pill 三种语义。shadow 只允许一种 elevation。按钮只保留 primary / secondary / text。任何新样式必须说明为何现有规则不能表达。

案例

Creative Reference Library 获 2026 年 10 月 19 日 CSSDA Website of the Day，其 grid、typographic、WebGL 的表现很丰富，但核心版式规则持续一致。[22]

Marc Lou：每个项目都是同一种卡片：名字、一句话、一条收入曲线。

Lil'Log：每篇文章同一种卡片、同一套间距，一路往下排。

Tw93：每篇文章同一种白卡片，标题、日期、摘要的位置一样。

swyx：文章卡片同一种配图位置、标题字号和底部链接。

Josh Farrant：同一种带斜线阴影的浅紫色方框重复使用。

一泽 Eze：项目都用同一种浅色圆角卡片和截图位置。

Guangzheng Li：每篇推荐文章都是标题、摘要、日期三行格式。

Marc Lou

Lil'Log

Tw93

swyx

Josh Farrant

一泽 Eze

Guangzheng Li

8克制与一个强记忆点（restraint + signature move）

作用

页面有设计感常来自“少数偏离”，不是持续制造刺激。Figma 2026 年关于产品差异化的文章强调，AI 已把 polished starting point 变便宜，差异来自继续塑造到能体现 point of view；Bubble 2026 的设计趋势观察也建议 AI 页面选择 one signature move。前者为官方产品设计观点，后者为设计团队趋势观察。[23][24]

提示词

复制

全页只设计一个 signature move：滚动时主视觉从平面地图变成路线轨迹。其余按钮、表单、正文保持常规交互。

案例

The Ride 获 2026 年 9 月 28 日 CSSDA Website of the Day，用第一人称摩托车旅程作为整站核心互动。它没有让每个组件都“创新”，记忆点集中在导航和叙事机制。[25]

Larry Xue：白底上散着一群黑色像素鱼，其余几乎没有装饰。

Dejavu Moe：整页深色、几乎不动，中间只有一句话和一点亮光。

Alana Goyal：整个站做成一个 macOS 备忘录，内容照常写。

Ryo Lu：首页是一个仿 macOS 的桌面，这一个点子撑起全站。

Rafael Conde：白底大名字，一个人从黑色曲线后探出头，是全页唯一的玩笑。

Maxime Heckel：深蓝页头里一个粒子组成的无穷符号，下面是普通的文字介绍。

The Ride

Larry Xue

Dejavu Moe

Alana Goyal

Ryo Lu

Rafael Conde

Maxime Heckel

这八条里，前四条的优先级尤其高。一个页面的颜色、圆角、阴影做得很精细，只要信息层级和大构图仍然是居中 hero 加三张同尺寸 feature cards，用户依然会先读到“模板”。Anthropic 2026 年的实验也观察到，Claude 默认在 craft 和 functionality 上相对容易过关，design quality 与 originality 才是更大的短板。[1]

对中文页面还要多注意一个问题：中文不像英文那样依赖词间空格形成天然节奏，所以区块间距、行高、标题尺度和列宽承担更重的分组职责。W3C 的文本间距说明也明确建议作者考虑当地语言和书写系统的可读性指导。这里没有足够证据支持一个适合所有中文网站的固定“最佳行长”数字，因此我不建议把某个字符数写成通用规范。[26][27]

AI 做得平庸的特征和成因

“AI slop”目前已经从社区吐槽进入模型厂商自己的语言。Anthropic 2026 年的 prompt 文档直接使用这个词，并把 Inter、Roboto、Arial、白底紫色渐变、可预测布局、缺乏场景特征的 cookie-cutter design 列为需要主动回避的模式。Anthropic 官方研究还把 “purple gradients over white cards” 当成原创性评分中的反例。[6][1]

2026 年 6 月 24 日，《纽约客》采访多位设计师时记录了另一套已经形成识别度的 Claude Design 默认风格，包括奶油底色、锈橙强调色、大号 serif、tracking 较大的小标题、ticker 栏、圆角 dashboard 元素和 glow。报道也指出，模板化现象以前就存在，AI 把同一套视觉模式扩散得更快。这是媒体采访与设计师观察，适合用来描述文化现象，不能被视作生成模型内部机制的实验结论。[28]

常见“AI 味”

为什么它容易出现

真正的问题

紫蓝渐变、发光 blob、浅色背景

Anthropic 自己把 purple gradient 视为模型常见默认；多个 2026 社区检查器也把 indigo/violet gradient 列为典型生成痕迹。官方证据和社区观察方向一致。[6][29]

渐变本身没有问题。问题在于它与内容、品牌、题材没有因果关系，任何 SaaS 都能替换进去。

Inter、Roboto、system font 全站到底

Anthropic 官方指南明确把这几类字体列入过度使用项，并提醒模型即使换掉 Inter 也可能继续收敛到 Space Grotesk 等新的高频选择。[6]

字体承担了“安全默认”，很少承担内容性格。中文项目中同样会发生，表现为整个页面只有一个中性黑体和字号梯度。

居中超大标题，副标题，两个 CTA，下面三栏卡片

Vercel 的无约束实验直接生成 generic SaaS dashboard；设计社区的确定性检测也把 hero + three equal cards 列为 AI 页面高频模式。前者是官方小样本实测，后者是社区工具。[30][29]

页面结构来自“网页平均值”，没有来自信息关系。

每个东西都放进 card

Vercel 发现 agent 会反复自行发明 layout 与样式，因此后来把 primitives 和 stylesheet 固定下来。NN/G 也提醒 container 是强分组信号，whitespace 足够时多加 container 会增加视觉复杂度。[3][31]

card 变成默认标点，页面失去宏观构图。

到处圆角、柔和阴影、glass、glow

《纽约客》的设计师访谈和 AI slop 社区检测均记录了 rounded rectangles、glow shadows 等模式。[28][29]

所有元素拥有相近 surface treatment，层级被磨平。

emoji 当 feature icon

2026 社区 slop 检测把 emoji icons 单独列为生成页面识别项，《纽约客》采访也把 emoji 视作 LLM 软件的工具痕迹之一。[29][28]

它往往是模型找不到专属视觉语言时的低成本占位符。

大量说明性小字、badge、microcopy

Vercel 的设计原则强调先确定读者工作和证据结构，Linear 则主动让没有“earned attention”的界面元素后退。[3][13]

AI 倾向通过“补解释”修复不确定性，结果是信息层级继续扁平。

每个 section 都不同，但整体仍无个性

Anthropic 把 design quality 定义为 color、type、layout、imagery 形成 coherent whole；仅有局部 craft 不能替代整体 identity。[1]

“细节丰富”与“设计方向清晰”是两回事。

成因

第一层是概率收敛。 Anthropic 的官方 prompt 甚至直接提醒模型会趋向 “generic, on-distribution outputs”。从生成机制看，模糊请求给模型留下的设计空间过大，它就更容易选训练和后训练过程中成功概率较高的组合。这里可以合理推断训练分布是因素之一，但公开材料并没有证明“紫蓝渐变由训练集中的某一类网站占比直接导致”，因此这种更强的因果说法目前证据不足。[6]

第二层是 prompt 缺少设计变量。 Vercel 2025 年 12 月的官方 prompting 指南明确要求描述使用者、使用时机、任务、设备、layout expectations、color system、style preferences 等，并写道缺少 context 时模型会自行猜测。这个结论来自 Vercel 自己对 v0 的使用经验和测试，具有产品相关性，不能自动推广到所有模型，但与 Anthropic 的观察一致。[32]

第三层是代码库只能提供“结果”，没有提供“判断史”。 Vercel 2026 年 6 月指出，agent 能看见某个组件最终长什么样，却看不见它为何取代另一个方案，很多设计判断存在于 review、Slack 和人的经验里。于是有 token 和 shadcn/ui 仍然不够，agent 会在结构和组合层面回到高概率答案。[4]

第四层是组件库把局部正确变得太容易。 Vercel 2025 年的 AI design system 文章认为，shadcn/ui 的开放、composable、token-based 结构有利于模型生成可靠组件。这个优点也意味着“可用的卡片、按钮、dialog”很廉价。页面层面的 art direction 不会自动从组件正确性中产生。《纽约客》的受访工程师也把共享开源 UI 库比作工业制造留下的接缝，属于观察性比喻。[33][28]

第五层是模型很难同时当作者和苛刻评委。 Anthropic 2026 年的实验发现，把 generator 与 evaluator 分开，并把 evaluator 校准得更怀疑生成结果，能形成更有效的迭代反馈。其设计 rubric 把 design quality、originality、craft、functionality 分开，其中 originality 专门检查 template layout、library defaults 和 AI patterns。[1]

Anthropic、Vercel 与设计社区给出的对策其实高度趋同。Anthropic 主张明确描述 aesthetic、type、color、motion、background，并显式禁掉默认模式；Vercel 把设计判断、禁用模式、tokens、classes 和 eval 分层编码；Figma 强调先扩大方向探索，再比较方向，再把结果继续塑造到有 point of view；设计师社区则反复使用 moodboard、sketch、reference material 和反例帮助模型离开默认分布。[6][3][23][28]

品味怎么传达

Figma 在 2026 年 6 月对 taste 的一个很有用的拆法是：point of view + discernment + care + repeated intentional choices。这是一种设计领导者观点。更接近实验层面的证据来自 2026 年的 TASTE 数据集，十名专业设计师按 typography、visual hierarchy、color harmony、layout、brief fidelity 等多个维度评价 AI 生成的平面设计。研究发现，现成自动审美评估器与五人设计师多数意见的 macro agreement 都没有超过 0.55。这说明 taste 至少在当前模型里很难压缩成一个单分数，拆维度会更合理。论文发布于 2026 年 5 月。[5][34]

对 coding agent 来说，最有用的品味描述可以拆成五层：价值判断、视觉语法、参照物、拒绝项、允许的例外。其中“价值判断”说明为什么，例如“这页要像研究笔记，可信度优先于活泼”；“视觉语法”说明怎样，例如“严格 12 栏、左对齐、大标题、低饱和底色”；“参照物”给具体实例；“拒绝项”切断模型最容易回去的默认路径；“允许的例外”规定哪里可以跳出系统。

回答什么

写出来的样子

价值判断

为什么

「这页要像研究笔记，可信度优先于活泼」

视觉语法

怎样

「严格 12 栏、左对齐、大标题、低饱和底色」

参照物

给具体实例

「参考 A 的首屏比例，不参考配色」（下文「传达方式」表）

拒绝项

切断模型最容易回去的默认路径

「Reject: centered SaaS hero, three equal cards…」（下文 design intent）

允许的例外

哪里可以跳出系统

「允许标题跨 10 栏形成一次尺度冲击」（下文 design intent）

传达方式

最擅长传什么

主要局限

对你的用法

Moodboard 情绪板

能快速传递 texture、色彩温度、摄影方式、材质、密度和时代感。Figma 对 moodboard 的定义就是把 image、type、color、swatch 等 reference 聚在一起确定 design direction；其 2026 工作流还建议把参考图拆成 texture、color、lighting、composition。官方设计资源。[35][36]

它很容易告诉 AI “长什么感觉”，很难告诉 AI “页面信息怎么排”。你遇到“生图气质很好，代码落地对不上”，通常就发生在这一层断裂。

moodboard 后面强制加一页“translation”：图像中的颗粒感 -> CSS noise texture；大留白 -> section py-28；杂志感 -> 7/5 asymmetric grid；冷静 -> 只有 1 accent。

参考网站

最适合传 hierarchy、composition、density、navigation、motion timing。

给 URL 很容易导致模型抓错层次，例如只抄颜色和圆角，忽略真正值得参考的构图。

每个参考只写 1 至 2 个借鉴点：参考 A 的首屏比例，不参考配色；参考 B 的 section rhythm，不参考字体；参考 C 的滚动叙事，只用于中段。

风格关键词

能迅速改变模型先验。Swiss、editorial、brutalism 等会一次影响 typography、spacing、grid 和 decoration。Anthropic 官方也建议明确 aesthetic family。[6]

词本身有歧义，模型可能把“editorial”简化成 serif，把“Swiss”简化成 Helvetica 风格。

关键词后接可观察属性：Swiss: strict grid, left aligned, oversized sans type, asymmetric composition, one accent, no card chrome.

反例清单（anti-pattern list）

对抗模型惯性非常有效。Vercel 发现给 recurring generated patterns 命名后，agent 更容易识别和避免；Anthropic 也直接给出 avoid list。[3][6]

只有禁止，没有正方向，会让模型从一个固定模板跳到另一个固定模板。《纽约客》引用 Anthropic 的说明也提到，单说“不要 cream”可能只是把输出推向另一个固定 palette。[28]

每个禁项配替代规则：禁止三张等宽 cards -> 改成 1 个 dominant feature + 2 个 supporting facts；禁止 glow -> 用 scale/spacing 建层级。

评价标准（rubric）

最适合把隐性 taste 变成可以反复执行的判断。Anthropic 的四类 criterion 就是具体例子。[1]

rubric 太多会让 agent 追求“全部合格”，输出再次平均化。

只保留 4 个：hierarchy / identity / restraint / craft，其中前两项权重最高。

你的 DESIGN.md 可以从“设计规范文件”升级成“设计判断文件”。Vercel 2026 年的经验很值得借鉴：他们后来发现只描述 brand language 仍会被不同模型解释成非常不同的页面，于是额外加入 stylesheet 和 evaluation loop。换到你的场景，可以把确定性的东西继续放 token 和组件里，把 DESIGN.md 留给 agent 真正需要判断的内容，例如“什么应该突出”“什么永远不要突出”“哪些结构属于项目特征”“什么时候可以打破 grid”。[3]

一个比“做得高级一点”有效很多的 design intent，可以写成这样：

中文

English

复制

方向：中文独立研究刊物，克制、理性、略有实验感。

层级：每屏最多一个主导元素；正文是主体，界面外壳（UI chrome）后退。

定义

两个区域同时占据主要 viewport，常形成内容与视觉的对照

提示词效果

会让 hero 从单列中心结构变成双重焦点，适合“文本 + 产品/人物/作品”。Material Design 也长期把 split screen 作为明确 layout 模式。[39]

代表网站

可参考近年的 editorial portfolio 类网站，例如 Permissionless。[15]

Dense information layout

定义

允许较高数据密度，通过层级和弱化 chrome 控制复杂度

提示词效果

会阻止 agent 为“显得干净”把每一项放成巨大卡片。

代表网站

Linear 2026 refresh 明确讨论如何在高信息密度下让次要 UI 后退。[13]

Linear

类别：字体

Oversized display type

定义

标题成为视觉对象，不只承担阅读

提示词效果

会让尺度成为主要构图手段，常能替代 hero 插画和无意义 decoration。

代表网站

Permissionless, 2026-04-29，评审称其 bold、type-driven。[15]

Display serif + restrained sans body

定义

serif 负责情绪和品牌，sans 负责正文功能

提示词效果

比单说“高级”稳定，模型会产生更明确的标题与正文角色差异。

代表网站

2026 年 Claude Design 的高频 serif 已经说明它是强风格信号，同时也提醒你不要无场景复用。[28]

Monospace as metadata

定义

等宽字体只用于编号、时间、参数、caption

提示词效果

会产生“技术档案 / 研究记录”的次级语言，同时避免全站 terminal cosplay。

代表网站

Creative Reference Library, 2026-10-19，适合观察 type-driven reference-system 处理。[22]

Creative Reference Library

Kinetic typography

定义

字体本身参与时间和运动

提示词效果

会把 motion 集中到 headline，减少给每个 card 做 hover 的冲动。Bubble 2026 将其列为成熟趋势，同时提醒过用和 reduced-motion 风险。[24]

代表网站

1367 Studio, 2026-09，CSSDA 描述为 expressive typography + fluid motion。[40]

1367 Studio

类别：色彩

Monochrome + one accent

定义

大多数界面使用中性色，只给一个角色高彩度

提示词效果

会大幅减少 rainbow SaaS 和“每个 section 一种色”的倾向，也容易建立焦点。NN/G 的 Aesop 分析解释了 monochromatic palette 如何帮助 hierarchy。[14]

代表网站

SSTR Friction Reduction, 2026-07-10，editorial minimalism。[21]

SSTR Friction Reduction

High contrast primary palette

定义

少数强纯色、清晰边界，常和 brutalist/Bauhaus 语言组合

提示词效果

会把模型从柔和紫蓝渐变拉向平面色块和硬层级。

代表网站

Judas, 2026-01-24，modern brutalism。[37]

Judas

Muted editorial palette

定义

低饱和底色，颜色主要建立氛围，强调依靠 type 和 scale

提示词效果

会降低按钮和 card 的视觉噪声，适合长中文内容和文化类项目。

代表网站

House of Honey, 2026-06-21。[19]

House of Honey

类别：质感

Paper grain / print texture

定义

模拟纸张颗粒、油墨、扫描材料感

提示词效果

会显著减少“纯数字 SaaS”表面，尤其适合海报、活动页、文化内容。

代表网站

The Creative Website Manual 的视觉材料使用明显黑白颗粒和印刷感。[41][17]

The Creative Website Manual

定义

一组元素按明确时间序列进入

提示词效果

会把 page load 变成一个编排好的 moment。Anthropic 2026 官方 prompt 明确认为一次有组织的 load reveal 比零散 micro-interactions 更有效。[6]

代表网站

适合首屏 headline、visual、CTA，工具界面中应弱化。

Fluid motion

定义

连续、平滑、视觉元素之间有形态或位置承接

提示词效果

会减少简单 opacity hover，增加 transition continuity。

代表网站

Judas 的官方奖项介绍直接使用 fluid animations。[37]

Judas

Parallax

定义

不同视觉层以不同速度移动，产生深度

提示词效果

会明显改变页面空间感，同时容易成为噱头。

代表网站

1367 Studio, 2026 年 CSSDA 标签包括 parallax、scroll、animated。[40]

1367 Studio

这些词最好按“一个主风格 + 一个布局词 + 一个字体策略 + 一个色彩策略 + 一个表面策略 + 一个 motion 策略”组合。把 Swiss、brutalism、glassmorphism、Y2K、editorial、Bauhaus 全塞进一个 prompt，模型只能平均化它们。Figma 2026 年关于产品方向的文章也建议先广泛探索多个方案，再明确选择方向，比较方案比在单个方案里不断叠加修改更容易看见 trade-off。[23]

槽位（每样只选一个）

词汇表里的可选词

主风格

Swiss / International Style、Editorial、Brutalism / Neo-brutalism、Bento grid

布局词

Asymmetric grid、Full bleed、Split screen、Dense information layout

字体策略

Oversized display type、Display serif + restrained sans body、Monospace as metadata、Kinetic typography

色彩策略

Monochrome + one accent、High contrast primary palette、Muted editorial palette

表面策略

Paper grain / print texture、Halftone / risograph、Tactile realism

motion 策略

Scrollytelling、Staggered reveal、Fluid motion、Parallax

惊艳与克制

设计里“令人眼前一亮”最接近可以验证的解释，是新颖性存在，同时用户仍能迅速理解它。2025 年的网站实验首次直接在网站场景中验证 MAYA：novelty 和 typicality 都与 aesthetic appeal 相关，novelty 在其模型中更强；商业网站的 typicality 作用更明显，服务网站的 novelty 作用更明显。这个结果很适合解释为什么作品集、活动页、品牌站可以比支付页、管理后台承担更多形式实验。[7][8]

“熟悉”也不等于“无聊”。2025 年关于数字空间图像的研究把 familiarity 和 processing fluency 分开，结果显示 familiarity 更强地预测 perceived naturalness，快速、流畅的认知处理则更直接关联 aesthetic pleasure。该实验不是网页 UI 实验，不能直接把效应大小搬到网页，但它提供了一个有价值的解释：用户可以看到不寻常的形式，只要信息关系仍然容易解析。论文发表于 2025 年。[42]

所以一个实际可用的“惊艳公式”可以写成：

熟悉的任务模型 + 清楚的内容层级 + 一个违反预期的高价值决定 + 足够细的完成度。

“一个违反预期的高价值决定”可以是一种异常强的标题尺度，一个不对称 grid，一种把产品状态可视化成独特图形的方式，一条贯穿整个长页的叙事轴，或者一段和内容本身有关的滚动交互。它最好能回答“为什么这个项目应该这样做”。The Ride 的摩托车第一人称叙事就和内容主题绑定，因此比把相同 WebGL 互动塞进财务 dashboard 更成立。[25]

记忆点（memory cue）需要稀缺。 2026 年关于 multimedia 和 memory 的一项研究发现，motion、sound、interaction 都能影响 attention 和 memory，不过这是多媒体图像设计研究，不能直接证明“网页加动画就更好”。更保守的结论是，具有意义的互动可以帮助形成记忆，过量互动会增加认知负担。Anthropic 的前端 prompt 建议恰好采取类似策略，优先一个高影响 moment，减少散落的 micro-interactions。[43][6]

叙事（storytelling）也不等于长滚动动画。 2025 年一项 UX design practice 研究指出，storytelling 在 UX 实践里有多种用途，概念本身非常宽。对页面来说，更实用的理解是让信息有先后关系，例如“问题 → 证据 → 转折 → 产品能力 → 行动”，让每一屏改变用户对下一屏的预期。该论文于 2025 年 10 月 15 日在线发表，属于研究型来源。[44]

细节打磨的作用是让“刻意”可见。 Figma 的 taste 文章把 taste 具体落在 misalignment、transition timing、empty state、不同屏幕等经常没人注意的细节；Linear 2026 的 refresh 也说明大量工作只是微调 token、header、对比和位置，用户甚至可能说不出哪里改变了。前者是设计领导观点，后者是实际产品复盘。[5][13]

追求惊艳会伤害页面的情况也相当明确。强任务页面的用户更需要 predictable placement；MAYA 研究中商业网站的 typicality 效应更强。动画如果干扰任务会降低 signal-to-noise，NN/G 明确把 gratuitous animation 视为 noise；scrollytelling 和 kinetic typography 还要处理 reduced-motion 和性能问题；视觉对比如果处处存在，也会失去层级。[7][12][24][10]

因此可以把网页分成三种风险档来理解。工具、后台、表单页面的惊艳主要放在 typography、信息组织和少量状态反馈；个人网站、品牌页可以把构图和 motion 推得更远；活动页、作品型 microsite 可以让“体验机制”本身成为内容。这个分法是基于上述研究和案例做的实践推论，并非已有标准分类。

给你的十条可以直接照做的建议

建议

解决什么问题

怎么做

什么时候不适用

把 DESIGN.md 从 token 说明升级成 judgment spec

你已经锁了颜色和组件，页面仍然像模板

加四块：Hierarchy、Composition、Identity、Reject。每块只写会影响取舍的规则。Vercel 2026 的实践说明，仅靠 visual language 仍会被模型不同解释，judgment + primitives + checks 更稳定。[3]

很小的一次性 demo，没有复用需求时无需写得完整。

每页先写一句“谁必须赢得注意力”

页面上每个块都在争抢视线

在 prompt 最前面写：Dominant element: XXX. Everything else must visually recede. 然后做 blur/squint test。NN/G 把这种测试用于检查 hierarchy。[10]

高密度监控台可能同时存在几个一级状态，此时应做区域级层级。

参考网站永远拆属性，不只给 URL

给参考后 agent 抄错东西，最后整版返工

用 Borrow / Do not borrow：Borrow: hero proportion, left rail, section rhythm. Do not borrow: palette, copy, icons. Vercel 认为 context 缺失时 agent 会自行猜。[32]

需要做非常严格的视觉还原时，应直接给截图和明确尺寸。

给每个项目写一份 anti-default list

紫蓝渐变、三卡、圆角、glow 反复回来

初始可直接写：No centered SaaS hero. No equal three-card row. No decorative gradient. No emoji icons. No card unless content needs a boundary. Anthropic 和 Vercel 都证明“给默认失败模式命名”是有效杠杆。[6][3]

如果品牌本身恰好使用其中一种语言，就保留它，同时说明其品牌理由。

每页只允许一个 signature move

AI 会把“有设计感”理解成到处加东西

在设计前写一句：The memorable thing on this page is ____. 其他元素全部服务它。Bubble 2026 也建议 AI 页面选择 one signature move。[24]

实验型作品集可以有多个，但最好按章节分别建立规则。

把“解释性小字”设成有成本的资源

你现在的小字越补越多

规定 meta text cannot introduce a new selling point。任何新增说明先尝试通过标题、顺序、label、图形或 proximity 解决。高 signal-to-noise 的原则支持先删冗余内容。[12]

法律、隐私、风险、数据口径等必须精确说明的场景不能删。

让 AI 同时产出三个“大构图”，别产出三个配色

多轮改颜色仍然感觉不对

要求 Direction A: strict editorial grid; B: image-led full bleed; C: asymmetric product narrative，固定 token 不动。Figma 2026 建议把多个方向并置比较，trade-off 会更明显。[23]

已有成熟产品 design system，布局类型也已确定时无需做大范围探索。

先评价 hierarchy 和 identity，再看 polish

你容易在圆角、颜色、间距上花多轮，最后才发现整版平庸

首屏 review 只问四句：第一眼看哪？第二眼看哪？这页像谁？删掉 logo 后还能认出项目吗？ Anthropic 的实测也把 design quality 和 originality 权重放在 craft 前面。[1]

生产前最后一轮当然要回到 accessibility、spacing、states 和性能。

把 moodboard 翻译成 CSS 和 layout 属性

生图气质落到代码对不上

每张参考至少提取 composition / texture / palette / lighting / type / motion 六项，然后写技术映射。例如 grain → overlay noise; gallery spacing → py-28; print rules → 1px border; warm photography → image treatment only。Figma 2026 moodboard 指南也建议拆解 texture、color、lighting、composition。[35]

对纯后台工具，moodboard 的价值较小，信息架构参考更重要。

给 agent 一个“审美评委”，而且让它专门挑错

同一个 agent 往往会维护自己刚做的方案

生成完后让第二个上下文只按 hierarchy / originality / coherence / restraint / accessibility 找失败项，不允许直接重写。Anthropic 2026 的 harness 实验发现 generator 与 skeptical evaluator 分离是很强的改进杠杆。[1]

非关键页面或非常小的组件会增加不必要成本。

如果只从这十条里挑三条，我建议优先做：把参考拆属性、给页面一个 signature move、把 anti-default 写进 DESIGN.md。这三项分别处理你现在最贵的三类返工：参考没对齐、页面没有记忆点、模型持续回到默认样式。这个优先级是基于你描述的工作方式与上述材料做的针对性判断。

来源列表

以下日期均为资料原始发布日期或页面明确标注日期。较旧的 UX 基础理论我保留下来，是因为它们解释的是视觉知觉与信息结构，变化速度远低于 AI 工具；涉及模型行为和 agent 工作方式的证据则尽量使用 2025 年下半年以后材料。

Anthropic, “Harness design for long-running application development”, 2026-03-24。官方工程研究，有实际前端生成、rubric、generator/evaluator 分离实验，直接讨论 safe predictable layout、AI slop、purple gradient、originality 与 craft。是本文判断 AI 平庸机制最重要的来源之一。[1][2]

Anthropic, Claude Prompting Best Practices, Frontend design, 2026 年文档，抓取版本为 2026 年秋。官方文档，明确使用 “AI slop”，列出 Inter、Roboto、Arial、purple gradients、predictable layouts 等默认模式，并提供 aesthetic system prompt。模型版本会变化，这部分可能较快过时。[6]

Vercel, “How our agents build on-brand pages with design.md”, 2026-08-31。官方 Design Engineer 实测，包含相同模型和 prompt 的对照、已知失败项统计、stylesheet 与 eval loop 的方法和局限。[3]

Vercel, “Teaching agents product design at Vercel”, 2026-06-25。官方实践文章，核心价值是解释代码无法携带“为什么做出这个设计决定”的上下文。[4]

Vercel, “How to prompt v0”, 2025-12-15。官方产品指导，强调 audience、context of use、constraints、taste、layout expectations 等需要显式提供。相关建议与 v0 强相关，迁移到其他模型时应视作经验而非普遍定律。[32]

Vercel, “AI-powered prototyping with design systems”, 2025-08-22。官方文章，解释 tokens、components、patterns、structure 如何作为模型上下文，以及 shadcn/ui 为什么适合 AI 生成。[33]

Figma, Loredana Crisan, “You never stop cultivating taste”, 2026-06-08。设计领导者观点，讨论 point of view、discernment、care、trade-offs 和细节，是本文“品味可表达”的主要职业实践来源。[5]

Figma, “What it takes to build great products now”, 2026-09-24。官方产品设计观点，讨论 AI 时代的 direction、comparison、differentiation 和 design system。[23]

Figma, “The art of art direction”, 2025-04-23。Brand Studio 从业者访谈，讨论 art direction 如何平衡品牌 personality、个人 taste、collaborator style 和 brief constraints。时间略早于你优先要求的 2025 下半年，因此只用作 art direction 补充。[45]

Figma, “How to make a mood board”, 2026 年当前资源页。官方教程，定义 moodboard 并讨论把视觉参考拆成 texture、color、lighting、composition。[35]

Zhu et al., “TASTE: A Designer-Annotated Multi-Dimensional Preference Dataset for AI-Generated Graphic Design”, 2026-05-20。研究论文，十位专业设计师、多维审美标注，说明单一自动审美分数与设计师判断仍有明显距离。[34]

Silvennoinen, Kotkajuuri & Kujala, “The Effect of Novelty and Typicality on Aesthetic Appeal of Websites”, 2025-11-14。同行评审网站审美研究，108 名参与者，直接检验 MAYA 在网站中的 novelty 与 typicality。[7][8]

Nielsen Norman Group, “5 Principles of Visual Design in UX”, 2020-03-01，2026-09-01 再审。UX 专业机构的稳定基础理论，涵盖 scale、hierarchy、balance、contrast、Gestalt。材料较旧，但主题属于低时效性的视觉原则。[9]

Nielsen Norman Group, “The Anatomy of a Good Design”, 2023-03-05。UX 专业机构案例分析，重点讨论 grid、type system、spacing、icon consistency、asymmetric balance。[14]

Nielsen Norman Group, “Signal-to-Noise Ratio”, 2018-09-09。经典 UX 文章，用于解释为什么辅助文案、装饰、动画和 UI chrome 会成为 noise。年代较早，只用于稳定理论。[12]

W3C WAI, WCAG Contrast / Text Spacing guidance, 当前页面在 2025 至 2026 年仍维护。规范与解释性官方材料，用于 contrast 和本地书写系统可读性，不用于定义“审美”。[20][27]

The New Yorker, Kyle Chayka, “The A.I.-Design Aesthetic That’s Taking Over the Internet”, 2026-06-24。媒体采访与文化观察，记录设计师如何识别 Claude Design 的默认审美，以及开源 UI 库和快速复制如何放大趋同。适合描述行业现象，不适合单独证明模型内部因果机制。[28]

CSS Design Awards, 2025 Website of the Year Winners, 2026-02-12。专业评奖社区，用于选择 2025 年优秀站点案例，Dropbox Brand 获 Website of the Year。奖项能说明行业评价，不能等同于用户研究。[11]

CSS Design Awards, The Creative Website Manual, 2025-11-28；Permissionless, 2026-04-29；House of Honey, 2026-06-21；SSTR Friction Reduction, 2026-07-10；Creative Reference Library, 2026-10-19；The Ride, 2026-09-28；Judas, 2026-01-24。均为专业评奖案例，用来展示 grid、typography、editorial、brutalism、storytelling 等原则的当代实现。[17][15][19][21][22][25][37]

Linear, “A calmer interface for a product in motion”, 2026-03-12。官方设计复盘，讨论信息密度、视觉注意力、token 调整和 coding agents 在实际 redesign 中的辅助角色。[13]

Bubble, “Web Design Trends 2026”, 2026 年。设计团队趋势观察，提出 bento、anti-grid brutalism、scrollytelling、kinetic typography、tactile realism 及其风险，并把 AI sameness 视为 2026 设计趋势的重要背景。它属于从业者趋势分析，证据等级低于实验研究，本文主要用来补充术语和实际风险。[24]

协作方法论：和 coding agent 协作做页面：从 brief 到验收的一套完整工作流#

全景结论与流程总图

截至 2026 年 11 月，Vercel、Anthropic、Figma、Linear 以及 Designer Fund 对 AI 原生设计团队的公开材料，已经出现了一条相当一致的主线：AI 最适合压缩执行时间、扩大方案搜索空间、把已有设计系统落实到界面，并承担反复实现与验证；人最值得投入的地方集中在问题定义、方向选择、视觉判断和最终质量门槛。Linear 把设计描述成持续搜索正确问题和正确形式的过程，Anthropic 内部把 AI 用于一次生成大量 UI 探索，Figma 明确鼓励先发散出多个方向，再进入局部 refinement，Vercel 则把 prompt 的核心归纳为 product surface、context of use、constraints & taste。它们共同指向一个实用结论：先扩大搜索空间，再逐层收敛；一旦方向确定，反馈粒度要越来越小。这是本文后面所有方法的主轴。来源性质分别为团队一手观点、内部工作流实录和官方产品实践；Linear 文章发布于 2025 年 12 月 19 日，Vercel 指南发布于 2025 年 12 月 15 日，Designer Fund 的 2026 AI in Design Report 为 2026 年调研，Figma 相关工作流文档为 2026 年现行资料。[46][47][48][49]

对独立开发者而言，这意味着你目前已经做对了几件关键事情：先定结构、首屏先确认、配色使用既有主题、组件优先复用、围绕真实 design token 做布局、把规范写入 DESIGN.md。真正值得补上的环节，主要在前半程的“视觉方向搜索”和后半程的“可验证验收”。如果直接从结构进入一版完整页面，agent 很容易沿着训练数据中高频的 SaaS 模板继续补全，于是出现你遇到的“能用、完整、合理，却没有明确设计立场”。OpenAI 2026 年前端设计指南也特别提醒，缺乏视觉方向和 reference 时，模型会落入通用模式，并建议在生成前明确 design system、视觉 reference、内容叙事与限制条件。来源性质为官方模型使用指南，发布于 2026 年 3 月 20 日。[50][51]

最重要的几个“人工闸门”是：问题定义完成后、发散方案选方向时、首屏视觉定稿时、整页验收时。这些位置的决定会改变后续所有工作，所以人的判断价值最高。相比之下，卡片 padding、某块内容顺序、按钮宽度、响应式断点等局部执行很适合交给 agent。OpenAI 的 Codex 实践建议使用 Best of N 并行探索复杂任务，Figma 也明确建议在早期让 agent 输出“distinct”或“completely different”的多个方案；到了 refinement 阶段，Figma Make 官方建议一次 follow up 只描述一个变化，同时明确什么保持不变。来源分别为 OpenAI 官方实践、Figma 官方 AI 工作流和 Figma Make 官方指南，资料发布于 2025 至 2026 年。[52][49][53]

分阶段工作法

需求和 brief

目标是确定页面解决什么问题，并把“做一个页面”翻译成可验证的设计任务。Linear 的 Karri Saarinen 在 2025 年 12 月 19 日的团队文章中把设计工作分成 problem、conceptual solution、execution 三个层次，并强调如果问题本身没有达成一致，后面的解决方案很容易变成多个不同问题的折中。来源性质为 Linear 创始人兼设计负责人的一手方法论。[46]

人做什么。人负责回答六件 AI 无法替你承担责任的问题：谁来看，为什么来看，看完以后希望他做什么，什么内容最重要，哪些约束不可突破，什么样的结果你明确不接受。例如个人项目展示页的目标可以写成：“让第一次看到我的潜在合作方在 60 秒内理解我做什么、我做成过什么，并产生点开项目或联系我的意愿。”这比“做一个有设计感的个人网站”提供了更清晰的设计目标。Vercel 在 2025 年 12 月 15 日的 v0 prompt 指南中要求明确用户、使用场景、要做出的决定或结果，正是这个原因。来源性质为官方团队基于大量用户和内部测试整理的 prompt 框架。[47][54]

AI 做什么。可以让 agent 检查 brief 缺口、整理真实内容、指出信息冲突、提出需要重点验证的问题。此时不要让它开始写 JSX。你甚至可以要求它先返回“我对目标、受众、内容优先级和限制的理解”，再由你纠偏。Anthropic 的 Claude Code 产品设计团队公开建议用项目级 memory 文件提前告诉 Claude 用户身份、工作方式和项目约束，并在代码前把上下文设置好；该团队分享发布于 2025 年，来源属于真实内部使用案例。[55][56]

产物是一页 brief，加一份真实内容包，例如项目名称、截图、数据、文案、CTA、外链。尽量避免用 Lorem ipsum，因为真实中文文本长度会直接改变排版判断。

常见坑是把视觉形容词当需求。例如“高级、简洁、科技感、克制”几乎没有排除任何方案。OpenAI 的 2026 前端指南建议把模糊风格词转成具体约束，例如 H1 数量、section 数量、字体数量、accent color 数量和 CTA 层级。来源性质为 OpenAI 官方模型指南，2026 年 3 月 20 日发布。[50]

找参考和定方向

目标不是寻找一个“抄的对象”，而是把抽象审美转换成 agent 能观察和执行的结构参数。OpenAI 的 2026 前端指南明确指出，视觉 reference 能帮助模型推断 layout rhythm、typography scale、spacing system 和 imagery treatment；Figma 的 2026 agent 工作流则建议把已有设计、文件、URL、设计系统实例作为上下文。两者都是官方实践资料。[50][57]

人做什么。选 3 至 6 个 reference，每个 reference 只承担一两个角色。例如 A 学首屏构图，B 学项目卡比例，C 学正文排版，D 学动效节奏。然后明确写出“借什么”和“不借什么”。这样能避免 agent 把几个网站的颜色、圆角、渐变和卡片形状平均混在一起。

例如：

参考 A：只参考首屏中标题与图片的比例，以及大面积留白。参考 B：只参考项目列表的纵向节奏和图片裁切方式。不参考 A 的蓝紫渐变，不参考 B 的圆角卡片。页面仍使用项目现有 neutral token 与 accent token。

AI 做什么。先让 agent 对 reference 做“设计拆解”，暂时不要编码。要求返回视觉层级、栅格、比例、字体阶梯、间距序列、颜色角色、图片处理、边界处理和 motion pattern。随后让它提出 3 至 5 个结构上真正不同的方向。Figma 官方建议在 divergence 阶段直接要求 multiple generations，并明确 variance 是 layout、information architecture 还是 style；其示例中甚至使用“Generate 3 distinct design directions”。来源性质为官方 AI workflow，2026 年现行文档。[49]

此阶段是最值得使用并排多方案的节点。可以让 agent 输出：

方向 A：Editorial。大标题、小信息密度、项目截图像杂志版面。

方向 B：Toolmaker。密度更高，界面截图和数据占主导，接近产品 changelog。

方向 C：Archive。把项目做成索引和编号系统，整体更像作品档案。

这三种变化必须触及 composition 和 hierarchy。如果只是“蓝色版、绿色版、深色版”，搜索空间实际上没有扩大。

产物是一页方向板。这里最好只确认视觉语法，不急着确认每个 section。

常见坑是让 AI 生一张漂亮网页图，然后要求 agent“照着做”。图像模型会生成视觉上成立、CSS 中却不存在的连续空间关系，例如不规则光照、不可重复的渐变纹理、难以解释的文字尺度和近似但不精确的对齐。图可以用于 mood，但要先把 mood 翻译成可编码属性，再进入实现。OpenAI 2026 指南也把 mood board 定位为 visual guardrail，同时强调 design system 与 CSS variables；这意味着图片最好作为方向上下文，而非精确规格。来源性质为官方实践文档。[50]

结构和线框

目标是先把信息排序、比例和页面节奏解决掉，让视觉装饰还没有机会掩盖结构问题。Figma Make 在 2026 年的官方使用建议中明确提出，大型构建先确定 structure，因为越到后面结构越难改，再加入行为，最后才处理内容细节与 polish。来源性质为官方产品工作流，发布于 2026 年。[53]

人做什么。决定信息主次。对中文页面尤其要先检查标题长度、每行汉字数量、项目描述实际长度、按钮文案和标签数量。中文没有英文单词间空格，视觉块往往比 agent 用英文 placeholder 时更“实”，因此真实文案应该尽早进入线框。

AI 做什么。让它做两个层次的结构探索。第一轮只改 section 顺序和内容分组，例如“项目先于自我介绍”与“人物叙事先于项目”。第二轮再确定首屏内部布局，例如左右分栏、全宽标题、标题压图、索引式排版。此时无需讨论 shadow、gradient、hover。

产物可以直接是低样式 React 页面。你现在习惯在真实 token 骨架上定布局，这条路线很好，因为它保留了真实浏览器宽度、真实中文换行和实际组件行为，同时暂时不让 agent自由发明视觉系统。Linear 2025 年的文章并不反对 design in code，但提醒工具自身会施加约束，过早进入执行层会缩窄 conceptual exploration；因此“真实骨架 + 暂缓视觉决策”是一个很适合独立开发者的折衷。来源性质为 Linear 一手设计观点，2025 年 12 月 19 日。[46]

常见坑是 agent 在低保真阶段自动加入大量 badge、说明文字、eyebrow、helper text。它们通常是在补偿层级不清。处理方法是规定：任何辅助文本都必须回答“删掉后用户会不会误解或无法行动”。如果答案是否，就删。你遇到“小字越来越多”的问题，往往应该回到信息层级处理，而不是继续润色这些文字。

视觉定稿

目标是形成一个可以复制到整页的视觉语法。这里建议继续沿用你现有的“先首屏截图”方式，但要把确认内容扩展为明确规则：字号梯度、容器宽度、主要间距、图片比例、边界方式、圆角、背景层次、accent 使用比例以及 motion 原则。

人做什么。首屏高保真建议让 AI 同时做 3 个方案，然后人只选一个。如果三个都不好，继续做方向探索。如果其中一个方向正确，只修那个方向。OpenAI 的 Best of N 实践显示并行候选适合复杂任务探索；Figma 的工作流也鼓励 divergence 后再进入 refinement。来源分别为 OpenAI 官方工程实践和 Figma 官方 AI 工作流，2025 至 2026 年。[52][49]

AI 做什么。 AI 可以把已经选中的视觉规律扩展到首屏剩余元素，但此时应加“冻结规则”。例如：“不要新增颜色，不改变 type scale，不引入新的圆角，不增加新的 container width。”这可以降低 agent 每轮重新设计的倾向。

产物是一张 approved screenshot 加一小段视觉规则。例如：

视觉规则 v1 容器最大宽度 1200px 正文阅读宽度 640px Display 64/68，H2 36/42，Body 16/28，Meta 13/20 主要纵向节奏只使用 24 / 48 / 80 / 128 项目图以 16:10 和 4:3 为主页面只有一个 accent role 卡片默认无阴影圆角仅 8 和 16 正文辅助文字最多两级

复制

常见坑是只确认“感觉差不多”，没有把感觉转成规则。这样 agent 做第二屏时会重新采样风格，最终每块都像来自不同页面。

实现

目标是把视觉决策映射到真实代码与 design system，同时限制 agent 的自由度。Vercel 2025 年的 design system 文章建议先让 AI 获得 token、component、block 三层上下文；其做法是先把 colors、radius、spacing、font 等 token 放入 shadcn/ui theme，再让模型基于 component 和 block 组合界面。来源性质为 Vercel 官方设计系统实践，2025 年发布。[58]

人做什么。冻结 token 和允许使用的组件。React + Tailwind + shadcn/ui 项目可以明确：“按钮只用 Button，Modal 只用 Dialog，tabs 只用 Tabs；禁止创建近似版本。”人也负责判断何时需要新组件。agent 很容易为了当前页面快速造一个局部组件，之后视觉逐渐分叉。

AI 做什么。 AI 非常适合 section by section 实现。Anthropic 的 Claude Code 产品设计团队公开表示，设计师已经直接用 Claude Code 调 typography、color、spacing 甚至 state management；Claude Code 官方最佳实践也建议“写代码，截图结果，与视觉目标比较，再继续迭代”。来源性质分别为 Anthropic 内部真实使用报告与官方工程指南，均为 2025 年公开材料。[55][59]

如果已有 Figma，Vercel 建议把 landing page section、navbar、sidebar、form 等拆成独立 frame 再交给 v0，而不是一次吞整个巨大画板；Figma MCP 与 Codex 的官方工作流同样支持从 canvas 到 code，再把运行中的页面捕获回 Figma继续比较。来源性质为 Vercel 与 OpenAI 官方实现指南，分别发布于 2025 和 2026 年。[60][61]

常见坑是让 agent “把整页按这个 screenshot 做完”。最容易出现的结果是首屏还算接近，后面开始自动使用习惯性 card grid、icon + heading + description 和 CTA block。解决办法是给每个 section 一个明确的视觉角色，并要求复用已批准规则。

细节打磨

目标从“设计页面”切换到“消除偏差”。Figma Make 的 2026 官方建议把初始 prompt 当 brief，后续 prompt 当 delta，只说明 what changes、how it changes、what stays the same，并尽量避免把无关的多个变化塞进一次 follow up。来源性质为官方产品指南。[53]

此时人的反馈应该变成局部指令。例如：

只修改 Hero 右侧项目预览，不动 Hero 左侧文字和全局 token。当前问题：截图占比太小，视觉中心仍然在文字。修改：右侧预览宽度从当前约 42% 提到 52%。顶部与 H1 第一行对齐。图片保持现有圆角与背景。不增加任何说明文字。

复制

这种写法比“图片再大一点，更有冲击力”可靠，因为它同时提供目标、对象、方向和不可改变项。Lovable 2025 年的 prompting handbook 也建议指出具体区域，并明确仅修改目标部分，防止整文件或相邻功能被连带改动；该材料属于官方博客整理的用户与社区实践，发布于 2025 年 1 月 16 日，因此具体产品行为可能已经变化，但“限定改动范围”的协作原则仍与 2026 年 Figma 的 delta 模式一致。[62][53]

验收

目标是判断页面已经达到预先定义的质量，而不是在没有终点的聊天里继续“再精致一点”。

建议把验收拆成六个维度：内容、视觉层级、reference fidelity、design system、一致性、响应式与行为。让 agent 自检一遍，再由你人工看截图。Figma 2026 的 AI 设计指南明确强调，人仍应作为最终 quality gate，并检查 architecture、edge cases、brand personality 和 handoff cleanliness。来源性质为 Figma 官方设计资源，2026 年现行资料。[63]

判断是否推倒重来的规则可以非常简单：如果问题集中在 1 至 3 个局部元素，继续局部改；如果你连续三轮都在修改同一类东西，例如“更有层次”“更像参考”“更大胆一点”，说明方向没有被清楚定义，回到视觉方向阶段；如果需要同时改 hero 构图、section 顺序、type scale 和 image treatment，直接回到结构或方向阶段通常成本更低。这一判断与 Figma 强调先稳定 structure 再 polish，以及 Linear 把 conceptual design 与 execution 区分开的思路一致。[53][46]

Brief 怎么写，哪些内容该给

Vercel 的 v0 团队把高质量 prompt 压缩成三大类：product surface、context of use、constraints & taste。Figma 2026 的设计工作流又补上 goal、design tension、reference、design system context。合并来看，一个适合 coding agent 的页面 brief 至少应包含：受众、使用场景、页面目标、真实内容、核心行为、内容优先级、视觉气质、reference、已有 token 和组件、技术限制、明确反例、完成标准。来源性质为 Vercel 和 Figma 官方实践，2025 至 2026 年。[54][49]

推荐模板如下：

# 项目页面名称：一句话说明： # 目标这个页面最重要的结果：用户看完以后应该做什么： # 受众谁会看：他们对我/产品已经知道什么：典型设备与浏览场景： # 真实内容主标题：副标题：项目/功能：数据： CTA：必须出现的图片和素材： # 信息优先级第一眼：第二层：第三层： # 视觉方向希望感受到：希望避免：视觉关键词最多 3 个： # Reference Reference A：只参考：不要参考： Reference B：只参考：不要参考： # Design system 现有 token 文件：允许组件：禁止创建的替代组件： # 技术限制 React + Tailwind + shadcn/ui 响应式要求：性能要求：无障碍要求： # 反例不要： 1. 2. 3. # 完成标准桌面首屏：移动端：内容：视觉：交互：

复制

这里有三个值得直接学习的公开 prompt 案例。

Vercel v0，2025 年 12 月 15 日，官方团队测试。它的核心模板可以压缩成：“Build [surface]… Used by [who]… to [outcome]. Constraints: platform, visual tone, layout.” [54] 这个模板有效的原因在于它同时限定“要生成什么”和“为什么这样设计”。例如销售 dashboard 在会议室大屏上使用，与值班主管在手机上走动查看，即使数据完全相同，密度、点击目标和信息优先级都会不同。Vercel 的公开测试也显示，补上 context 和 constraints 后生成的界面在功能和 responsive 行为上更完整。来源性质为官方实测，2025 年 12 月 15 日。[54]

Figma Agent，2026 年，官方 workflow。官方示例要求为预算应用的 weekly insights 生成三个明显不同方向，并把“两周留存”和“用户感受不到进展”作为目标与 tension。[49] 它有效的地方在于没有先指定“做三张卡片、一个折线图、绿色按钮”，所以模型仍有空间探索信息架构；与此同时，目标和 tension 又排除了大量无关方案。这类 prompt 特别适合视觉探索阶段。来源性质为 Figma 官方教程，页面未标独立发布日期，2026 年 11 月仍为现行文档。[49]

OpenAI GPT 5.4 前端指南，2026 年 3 月 20 日，官方模型指南。它建议同时提供 design principles、visual references、content narrative 与 design system，并给出类似“一页只有一个 H1、不超过六个 section、两种字体、一个 accent、首屏一个主 CTA”的约束方式。[50] 这类约束有效，因为它定义的是“设计空间边界”，没有提前替 agent 决定具体构图。对于你这种已经有 token 和组件库的项目，尤其合适。

哪些信息给太多会限制产出？主要有两类。第一类是在发散阶段提前规定实现答案，例如“Hero 左边标题右边 mockup，下面三列卡片，再 testimonials”；这等于要求 AI 重画你脑中的模板。第二类是大量模糊形容词叠加，例如“高级、未来、现代、极简、温暖、专业、科技、人性化”，这些词之间没有优先级，模型最终往往取平均。Figma 2026 的 prompt 指南也提醒，不要试图在第一句里描述所有视觉细节，先生成草稿再根据看到的东西修正。来源性质为 Figma 官方 design prompt 指南，2026 年现行资料。[64]

更好的做法是把约束分层：业务约束固定，design system 固定，风格方向给 2 到 3 个强特征，具体构图在发散阶段开放。

从设计到代码的几条路线

先 Figma 或画布定稿，再实现。这条路线最适合视觉要求高、需要与他人评审、版式比较非标准、品牌资产较多的 marketing page 或活动页。Figma Make 2025 年推出时就把它定位为从已有设计进入可交互 prototype 的路径，2026 年 Figma 与 Codex 的 MCP 工作流进一步支持 Figma 到 code，再从运行页面回到 Figma 的 round trip。来源性质为 Figma 和 OpenAI 官方工作流，2025 至 2026 年。[65][61]

常见失败是把整张复杂 Figma frame 一次交给模型，结果尺寸、嵌套、组件映射出现偏差。Vercel 的官方建议是按 navbar、form、landing section 等独立 frame 交接。[60]

对你而言，这条路线适合宣传长图、活动页、视觉品牌页。普通工具 UI 没必要每次都完整走 Figma。

直接在代码里设计，design in code。这条路线最适合工具 UI、已有 design system 的产品页面、交互和真实数据对布局影响很大的页面。Anthropic 的产品设计团队已经让设计师直接用 Claude Code 修改 production frontend；Designer Fund 2026 的 Anthropic 案例也显示，内部 prototype tool 会直接加载 Anthropic 完整 design system 生成可运行方案。来源性质为 Anthropic 内部使用报告与第三方深度访谈，2025 至 2026 年。[55][66]

它的核心风险是过早承诺某个方案。Linear 的 Karri Saarinen 在 2025 年明确提出，code 作为 medium 会自然把注意力带向可实现细节，并可能压缩开放式探索。因此如果直接 design in code，必须人工补一个“多方向搜索”步骤。[46][66]

最适合你的方式是：“代码里做低保真 + 多分支 hero 探索 + 选一个 + 再继续完整实现”，这样不需要额外设计工具，也保留发散。

先 AI 生图定气质，再写代码。适合品牌 mood、活动页、视觉世界观、插画风格和摄影方向。它不适合用来充当精确 layout spec。OpenAI 2026 前端指南把 mood board 和 screenshot 当作 visual guardrails，同时要求模型建立实际 CSS design system，这已经暗示两者承担不同职能。来源性质为官方指南，2026 年 3 月 20 日。[50]

如果走这条路线，增加一个强制步骤：

不要开始编码。先把这张视觉参考翻译为： 1. 构图规则 2. 文字与图片面积比例 3. 字号梯度 4. 颜色角色 5. 间距规律 6. 边界/圆角/阴影 7. 图片处理 8. 动效倾向 9. 哪些特征在 CSS 中无法忠实实现等我确认后再实现。

复制

你过去“生图很好看，代码对不上”的问题通常就出在缺失这层翻译。

先 v0 / Lovable 一类生成，再迁入项目。适合快速探索一整个可运行方向、一次性 marketing prototype，或先验证信息结构和交互。OpenAI 在 DevDay 2025 的真实内部案例中记录了一种很典型的混合流程：先用截图和 v0 做初始 Next.js 前端，再交给 Codex 接真实后端和继续实现；该文章属于 OpenAI 内部真实项目复盘，发布于 2025 年。[67]

最大的风险是生成环境与真实项目的 token、组件、路由和状态模型不一致，迁移时等于重写。Vercel 2025 的 design system 指南因此特别强调把真实 token 与 shadcn components 放进生成上下文，让 prototype 从开始就和 production 对齐。[58]

如果你的 React 项目已有稳定骨架，建议把 v0 主要用在“探索候选方向”，随后把选中的视觉规律带回原 repo，让 Codex 或 Claude Code基于真实组件实现。这样比把生成项目整包迁进去更干净。

从公开从业者材料看，目前并没有一条被公认的统一路线。Designer Fund 2026 调研发现，一些设计师在独立 prototype 环境中生成后交给工程师，一些直接对 production frontend 修改；同时 34% 的受访者认为协作边界变得更混乱。Anthropic 产品设计负责人 Joel Lewenstein 还指出，设计师在 Figma Make、工程师在其他 coding agent 中分别工作，会造成两个孤立版本。来源性质为 2026 年跨公司调研与访谈。[68] 由此更可靠的原则是：选择哪条路线取决于当前最难验证的东西。如果最难的是视觉方向，用 canvas；如果最难的是交互，用代码；如果最难的是气质，用 mood image；如果最难的是快速获得一个完整可运行候选，可以先生成 prototype。

路线

当前最难验证的是

最适合

主要风险 → 补救

先 Figma 或画布定稿，再实现

视觉方向

视觉要求高、要评审、版式非标准的 marketing page、活动页

整张复杂 frame 一次交给模型会出偏差 → 按 navbar、form 等独立 frame 交接

直接在代码里设计

交互

工具 UI、已有 design system 的产品页

过早承诺某个方案 → 人工补一个「多方向搜索」步骤

先 AI 生图定气质，再写代码

气质

品牌 mood、活动页、插画和摄影方向

不能当精确 layout spec → 先把图翻译成 9 项规则，确认后再实现

先 v0 / Lovable 生成，再迁入项目

快速拿到完整可运行候选

一次性 marketing prototype、先验证信息结构和交互

token、组件、路由、状态模型不一致，迁移等于重写 → v0 只用来探索方向

把设计规范变成 agent 能遵守的上下文

一个有效的 agent design context 最好拆成四层。

告诉 agent 什么

写在哪

1 machine readable tokens

color、spacing、radius、type role 的具体值

真实 token 文件（可用 DTCG 2025.10 格式），不只写自然语言

2 component inventory

已经有什么组件、何时用

DESIGN.md 写每种 variant 的用途（例：Button 的 primary / secondary / ghost）

3 composition rules

零件平时怎样组合

DESIGN.md 的 Layout patterns

4 agent instructions

流程与纪律

AGENTS.md / CLAUDE.md，不重复完整 token

第一层是machine readable tokens。颜色、spacing、radius、type role 等应该尽量存在真实 token 文件里，不要只写自然语言。DTCG，即 Design Tokens Community Group，在 2025 年 10 月 28 日发布了首个 stable specification 2025.10，提供 vendor neutral 的 token 格式、alias、theming、modern color spaces 等能力。它是 W3C Community Group 的 Final Report，已经被定义为可实施的稳定版本，但它没有进入 W3C Standards Track，所以不能称作正式 W3C Recommendation。来源性质为 DTCG 与 W3C Community Group 官方规范，发布于 2025 年 10 月 28 日。[69][70][71]

一个最小概念例子可以是：

{ "color": { "background": { "$type": "color", "$value": "#ffffff" }, "text": { "primary": { "$type": "color", "$value": "#111111" } } }, "space": { "section": { "$type": "dimension", "$value": { "value": 80, "unit": "px" } } } }

复制

第二层是 component inventory。告诉 agent 已经有什么，以及何时用。Vercel 在 AI powered design systems 的实践中把上下文分为 tokens、components、blocks，认为只有颜色 token 还不够，模型还需要理解组件行为与组合方式。来源性质为 Vercel 官方设计系统实践，2025 年。[58]

例如 DESIGN.md 不要只写：

按钮统一使用 shadcn。

复制

更有效的是：

Button primary: 页面唯一主行动 secondary: 次行动 ghost: toolbar 与低权重操作一个 viewport 内尽量只出现一个 primary action。禁止为单页创建新的 button visual variant。

复制

第三层是 composition rules，这是最容易遗漏的。Figma 2026 年发布的 design system agent 指南专门区分 components 和 examples：组件只告诉 AI 零件长什么样，完整 example 才告诉 AI “这些零件平时怎样组合”。例如 shipping address form 中，哪些字段并排、optional field 放哪里，需要完整 pattern 才能表达。来源性质为 Figma 官方 agent design system 指南，发布于 2026 年 10 月左右。[72]

因此你的 DESIGN.md 最值得增加的是：

## Layout patterns Marketing hero 允许：大标题 + 单个 visual 标题宽度 6 到 9 个中文字每行时优先控制 max-width CTA 最多 2 个避免：三个 feature card 紧跟 hero eyebrow + H1 + subtitle + helper text 四层说明同时出现 Project showcase 截图是主视觉，文字只承担标题、角色、结果项目描述默认不超过 80 个中文字

复制

第四层是 agent instructions。AGENTS.md 或 CLAUDE.md 存流程与纪律，不要重复完整 design token。OpenAI 的 Codex 文档说明 AGENTS.md 会从 repo root 到当前目录分层加载，并允许更深目录覆盖上层规则；Anthropic 的 CLAUDE.md 文档建议记录项目命令、代码约定和架构模式，并强调具体规则比“保持代码整洁”一类笼统规则更有效。来源性质为 OpenAI 与 Anthropic 官方文档，OpenAI 指南发布于 2026 年，Anthropic 文档为现行官方文档。[73][74]

一个适合你项目的 AGENTS.md 片段可以是：

中文

English

## UI 工作流程新增 UI 之前： 1. 读 DESIGN.md。 2. 查看 src/styles/tokens.css。 3. 搜索现有的 shadcn 组件和项目里的区块。 4. 不要自创颜色、阴影、圆角或按钮变体。 5. 做视觉探索时，先出几个备选方案，再改正式文件。 6. 方向确认后，只改要求改的区域。 7. 视觉改动之后，渲染桌面和手机截图。 8. 和确认过的截图对比，报告剩下的差异。 ## 内容除非明确要求修改，否则一字不改地使用提供的中文文案。不要为了填空白添加解释性说明或辅助小字。

复制

建议让 DESIGN.md 负责“设计系统是什么”，token 文件负责“具体值是什么”，组件目录负责“现有实现是什么”，AGENTS.md / CLAUDE.md 负责“agent 应怎样工作”。这样一个设计规则只需要有一个 source of truth。

如何反馈，以及如何真正使用参考网站

最有效的反馈格式可以固定成六段：

范围：只改哪里。当前问题：我看到什么。目标：改完应该产生什么视觉结果。具体变化：可以量化的部分。保持不变：哪些东西不要动。验证：改完用什么截图或状态检查。

复制

例如：

范围：只改 Project 01 这一屏。当前问题：截图、标题、描述的视觉权重太接近，像一个普通内容卡片。目标：先看到作品，再看到项目名称，最后才读说明。具体变化：截图宽度占 section 约 65%。标题移动到截图左下方的独立文字区域。说明限制在 2 行以内。移除标签下方的辅助说明。保持不变：页面背景、accent、全局字号 token、下一 section 不动。验证：输出 1440×1000 截图，我会和 reference B 比较。

复制

“给数值还是给感受”可以按阶段区分。方向探索阶段给感受、语义和 reference，例如“更像独立出版物，减少 SaaS dashboard 感”；进入定稿后给数值和对象，例如“section top padding 从 80 调成 112”。这与 Figma 的 divergent exploration 和后期 delta editing 两套官方建议一致。[49][53]

“一轮给几条”没有可靠研究支持一个固定数字。公开实践能支持的更稳妥规则是：一轮只处理一个共同目标下的变化。 Figma Make 2026 明确建议避免把多个无关变化合并进同一 follow up，Lovable 2025 资料也建议 section by section、step by step。前者属于官方最新工作流，后者较旧，仅作补充经验。[53][62]

参考网站建议按下面这张拆解表来读。这里的维度来自 OpenAI 对 screenshot 中 layout rhythm、typography scale、spacing 和 imagery treatment 的建议，再补上设计实现时常用的 composition 分析。[50]

页面骨架。最大 container 多宽，正文是否有独立窄列，section 是全宽还是居中，有没有左右交替。

比例。 hero 中文字与图的面积比例，截图占 viewport 多高，项目卡的 image to text 比。

字号阶梯。 display、section title、body、meta 之间大概相差多少，不必只记录 px，更重要的是倍率关系。

间距系统。看主要 spacing 是否围绕少数几个单位重复，例如 16、24、48、96，而不是逐个元素记录随机距离。

颜色角色。 background、surface、text、muted、border、accent 分别承担什么，不要只复制 hex。

图像语言。 full bleed、带浏览器 chrome、裁切、悬浮、透视、蒙版，还是单纯矩形截图。

边界语言。分割主要依靠 border、background change、whitespace、shadow 还是 typography。

动效节奏。什么东西动，进入速度，是否 stagger，hover 是位置变化还是 opacity，滚动是否驱动视觉。

内容密度。一屏平均有几个信息单元，辅助文案占多少。

重复规律。第二个和第三个 project 是否继续同一规则，还是有经过控制的变化。

防止 agent 只学到表面，可以在 reference prompt 中强制它回答三个问题：

对每个 reference： 1. 哪些视觉特征只是装饰？ 2. 哪些结构规律真正决定了页面气质？ 3. 如果去掉颜色和图片，这个页面仍然有什么可识别的设计特征？

复制

最后这一问特别有效。若 agent 只能回答“黑白配色、圆角、渐变”，说明它还停留在 surface styling。若能回答“超大标题占半屏、正文窄列、项目图保持 70% 视觉面积、section 之间用空白分隔”，才真正提取到了 transferable rules。Figma 2026 关于 examples 的指南也体现了同样逻辑：单独给 components 不足以表达系统，完整组合 pattern 才能告诉 agent 实际设计规律。[72]

完整示范：做一个个人项目展示页

假设页面用于展示一个独立开发者过去一年的三个项目，访客主要来自社交媒体和朋友转发，希望 60 秒内理解“这个人会做什么、做过什么、是否值得联系”。

第一步，给 agent 做 brief，不写代码。

先不要修改代码。我要做一个个人项目展示页。目标：让第一次访问的人在 60 秒内理解： 1. 我是独立开发者 2. 我擅长把 AI 工具做成真实产品 3. 我过去一年完成过三个可运行项目 4. 如果他有类似项目，可以联系我受众：产品经理、创业者、开发者。大多数通过桌面浏览，也有一部分来自手机社交媒体。真实内容：姓名：林舟一句话：独立开发者，做 AI 工具和小型产品。项目： A. ClipNote，网页内容整理工具，4,800 用户 B. LaunchKit，发布页生成器，开源 C. Trace，个人工作记录工具 CTA：查看项目联系我限制： React + Tailwind + shadcn/ui。必须使用现有 tokens.css。不得新增颜色。不得创建新的 Button variant。中文为主。不要自动增加解释性副标题和 helper text。请先输出： 1. 你理解的页面任务 2. 信息优先级 3. 仍然缺失但会影响设计的资料 4. 暂时不要提出具体视觉样式

复制

这一阶段借用了 Vercel 的 product surface + context + constraints 框架，同时把真实内容放进去，防止模型使用英文占位内容做错误布局判断。[47]

第二步，提供参考并让 agent 拆解。

现在分析这 4 个 reference。 A：只看 hero 的标题与图片面积比例。 B：只看 project showcase 的纵向节奏。 C：只看 typography hierarchy。 D：只看 motion。不要编码，也不要组合成设计。对每个 reference 输出：构图内容密度字号阶梯主要 spacing 图片比例边界方式动效最值得借的 2 个结构特征不应该复制的表面特征最后总结：如果全部去掉颜色与图片，这四个 reference 还有哪些共同规律？

复制

这种拆解方式利用视觉 reference，却延迟具体实现，有助于降低“看到一个网站就复制它的颜色和圆角”的倾向。OpenAI 2026 指南明确建议用 screenshot 或 mood board 建立 visual guardrails。[50]

第三步，做方向发散。

基于 brief 和刚才的 reference 分析，提出 4 个明显不同的页面方向。差异必须体现在：信息架构 hero composition 项目展示方式页面节奏不要通过换颜色制造差异。所有方向使用同一套现有 token。每个方向只输出：一句设计概念首屏结构项目 section 结构页面节奏最可能的优点最可能的风险不要写代码。

复制

这里适合一次多方案并排比较。Figma 官方建议明确要求多个 distinct directions，并指定希望变化的是 layout、information architecture 还是 style。[49]

假设你选择“Editorial Archive”。

第四步，只做结构。

采用 Editorial Archive 方向。现在只实现低保真结构。使用真实中文内容。不要添加装饰。不要新增颜色、阴影、渐变、插图。需要： Hero 三个项目简短 About Contact 先实现 desktop。 Hero 和第一个项目必须在 1440×1000 截图中体现清晰的视觉层级。完成后给我截图，并说明：每个 section 的视觉主角是什么。

复制

这一步遵循 Figma Make 先 structure 后 polish 的方法。[53]

第五步，单独做三个 Hero 候选。

结构已经确认。只探索 Hero。其他 section 不要修改。做 3 个明显不同的 Hero 版本，分别放在独立 route： /explore/a /explore/b /explore/c 都使用相同内容、相同 token、相同字体。 A：文字主导 B：项目截图主导 C：文字与截图形成非对称编辑式构图不要新增文案。不要新增 badge。不要用渐变。不要使用卡片网格。为三个版本分别生成 1440×1000 截图。

复制

这正是 Best of N 最有价值的地方。OpenAI 2025 的内部 Codex 案例记录了设计人员使用并行生成快速比较不同设计，再从 preview screenshot 中挑选结果。[67][52]

假设选 C。

第六步，把选中的 Hero 变成设计规则。

采用 Hero C。先不要继续做全页。从 Hero C 提取并写入 DESIGN.md： container type scale content widths spacing scale image treatment border rules radius accent usage motion principle rules for helper text 只记录已经在 Hero C 中实际出现的规律。不要发明未来规则。

复制

这样后面第二屏不会再凭空重新采样风格。

第七步，扩展到全页。

根据 DESIGN.md 完成剩余页面。每个 project section 必须复用同一视觉语法，但允许通过图片位置变化产生节奏。规则：截图始终比描述文字视觉权重高。项目描述最多 80 个中文字。每个项目最多一个辅助 meta 行。不要增加 feature card。不要增加 testimonial。不要增加 FAQ。不要增加新的 CTA section。实现 desktop 和 mobile。每完成一个 section 就检查 DESIGN.md。

复制

这一步把 token、composition rules 与明确反例一起提供，符合 Vercel 关于 design system context 的实践。[58]

第八步，局部视觉反馈。

只改 Project 02。当前问题： Project 02 的图片面积和 Project 01 几乎完全相同，页面节奏太机械。目标：保持同一设计语言，同时让第二个项目更轻。修改：图片宽度减少约 15%。文字区域上移，与截图顶部错开。保留当前字号、颜色、圆角和 section 高度。不要增加任何内容。其他 section 完全不动。改完输出同一 viewport 截图。

复制

这种 delta feedback 与 Figma Make 2026 的官方建议一致。[53]

第九步，让 agent 做视觉 QA。

不要修改代码。对当前页面做一次 design QA。检查： 1. 是否出现 DESIGN.md 没有定义的颜色 2. 是否出现新的 radius / shadow 3. 是否有重复但不一致的组件 4. 是否有可以删除的 helper text 5. 每一屏的第一视觉焦点是什么 6. 三个 project 是否过于机械重复 7. 中文标题是否出现难看的孤字换行 8. 375px / 768px / 1440px 是否有布局异常 9. CTA 层级是否一致 10. 是否存在仅用于填空的 UI 只输出问题清单和对应 DOM/component。先不要修。

复制

先让 agent 报告，再由你决定修什么，可以避免“自动 QA”顺手重新设计。Figma 2026 的指南同样把人工 review 保留为最终质量闸门。[63]

第十步，人工验收。

你的人工验收只问五件事：

第一眼能不能在数秒内知道“这个人做什么”。

如果把所有说明小字删掉，主要叙事还能不能成立。

把页面转成灰度后，层级是否依然清楚。

把 reference 与成品并排时，对齐的是 composition 和 rhythm，还是仅仅颜色相似。

三个项目在同一视觉系统中是否仍然各有节奏。

如果失败集中在局部，继续 delta；如果前三个问题同时失败，回到方向探索。这就是整套流程里最重要的“及时推倒”机制。

来源列表

Vercel，How to prompt v0，2025 年 12 月 15 日。官方团队指南，给出 product surface、context of use、constraints & taste 三项 prompt 框架，并包含对比测试和完整 prompt 示例。[47][54]

Vercel，AI powered prototyping with design systems，2025 年。官方设计系统实践，说明 token、component、block 如何为 AI 提供品牌与 production context。[58]

Vercel，Working with Figma and custom design systems in v0，2025 年。官方 Figma 到 v0 实现指南，建议把复杂页面拆成较小 frame。[60]

OpenAI，Designing delightful frontends with GPT 5.4，2026 年 3 月 20 日。官方前端设计指南，涵盖 design principles、visual references、content narrative、design system 和生成页面的常见模式。[51][50]

OpenAI，Building frontend UIs with Codex and Figma，2026 年。官方工作流，展示 code 到 Figma、Figma 回 code 的 round trip。[61]

OpenAI，How OpenAI Uses Codex to Accelerate Engineering，2026 年。官方内部实践，介绍 AGENTS.md 与 Best of N。[52]

OpenAI，How Codex ran OpenAI DevDay 2025，2025 年。内部项目实录，包含 v0、截图、Codex 和并行设计探索的实际组合方式。[67]

Anthropic，How Anthropic teams use Claude Code，2025 年。内部真实工作流，包含 Product Design 团队直接修改 frontend、截图进入 Claude Code 和 custom memory 的做法。[55][56]

Anthropic，Claude Code Best Practices，2025 年。官方工程指南，其中明确提出“写代码、截图、比较视觉目标、迭代”的 UI 工作流。[59]

Anthropic，Claude Design，2026 年。官方产品与工作流说明，展示多方向探索、inline comments、design system、fine grained adjustment 与 Claude Code handoff。[75]

Figma，Introducing Figma Make，2025 年。官方发布文章，介绍从设计到 interactive prototype、point and prompt 与 canvas 到 code 的工作方式。[65]

Figma，7 Tips for Using Figma Make Credits More Efficiently，2026 年。官方使用指南，提出 initial prompt 作为 brief，follow up 作为 delta，先 structure 再 behavior 和 polish，并避免一次修改多个无关问题。[53]

Figma，AI workflows collection: Explore more directions, faster，2026 年现行文档。官方工作流，明确建议多个 divergent generations，并指定 layout、information architecture 或 style 的变化维度。[49]

Figma，How to Put Your Design System to Work With the Figma Agent，2026 年 10 月左右。官方设计系统实践，区分 guidelines、library examples、task context 与 skills，并强调完整 examples 对组合规则的重要性。[72]

Figma，AI Design Prompts，2026 年现行资料。官方设计 prompt 指南，讨论 generic AI output、过度描述视觉细节和 design system review。[64]

Linear，Design is more than code，2025 年 12 月 19 日。 Karri Saarinen 的一手设计方法论，区分 problem、conceptual solution 与 execution，并讨论 design in code 提前引入约束的风险。[46]

Designer Fund 与 Foundation Capital，AI in Design Report 2026，2026 年。对 900 多名设计从业者和 20 多位负责人进行调查访谈，并包含 Anthropic、Linear、Stripe 等团队的工作流案例。它属于跨公司行业调研，适合观察真实使用模式，不应当作某一种流程的唯一标准。[76][48][66][68]

Design Tokens Community Group，Design Tokens Specification 2025.10，2025 年 10 月 28 日。官方 Community Group Final Report，首个 stable Design Tokens 版本；可用于生产，但没有进入 W3C Standards Track。[69][70][71]

OpenAI，Codex Prompting Guide，2026 年。官方文档，说明 AGENTS.md 的分层发现和注入规则。[73]

Anthropic，Claude Code memory / CLAUDE.md，现行官方文档，页面未标独立发布日期。建议把命令、代码规范、架构约定写成具体、结构化、可维护的项目记忆。[74]

Skill 和规则：AI 前端设计 Skill、规则与系统提示词调研#

截至 2026 年 11 月 10 日，公开生态里已经出现了一批专门针对“AI 做出来的页面能用，但像模板、缺少设计判断”的工具。它们大致分成五类：以审美方向和反模式约束为核心的纯指令 Skill，以设计词汇和分阶段修改为核心的 Skill，以资料库检索生成设计系统为核心的 Skill，以浏览器截图和确定性规则做验收的 Skill，以及常驻在 AGENTS.md / Cursor Rules 里的界面工程规则。Claude Code 和 Codex 在 2026 年都原生支持 SKILL.md 这一 Agent Skills 形态，Codex 也支持仓库级 AGENTS.md；OpenAI 官方文档明确把 skill 定义为含 SKILL.md、可选 scripts/、references/、assets/ 的目录，并兼容开放的 Agent Skills 标准。[77][78][79]

先给结论。你现在已经有“结构先行、design token、首屏确认、组件库、DESIGN.md”这些基础，继续堆一份更长的审美规范，收益会迅速下降。当前公开方案里，真正有增量的部分主要有四个：把泛化的“好看”改成可执行的反模式约束；强制在编码前做设计方向发散；把页面放进真实浏览器截图并检查；让 agent 先形成一个与具体主题绑定的视觉概念，再把这个概念贯穿布局、素材、排版和动效。 Anthropic 2026 年关于前端生成 harness 的研究也观察到，Claude 的默认页面在功能和基础 craft 上已经较强，短板集中在 design quality 和 originality；将这两个维度显式写入评价标准，并让独立 evaluator 反复审稿，会显著把生成从安全模板推向更有主张的设计。[80][81]