design-taste-frontend

tasteskill v2

由模型构建的页面通常看起来像它见过的所有页面的平均值：居中的三行标题，上方有一个小标签，一排图标卡片，柔和的渐变，几条细线和一段等宽字体说明。它没有任何错误，却也没有任何经过深思熟虑的设计。

这项技能通过四种方式，用明确的设计决策取代这些默认做法：

1. 脚本发牌，你来选择。 当被要求设计一种风格时，模型每次都会选择该类别的默认样式。scripts/draw.mjs 会从 20 种经过研究的设计方向中发出三种供你选择；你选出最能表达主题理念的一种，然后脚本会从一个基于 247 个真实网站提炼而成的库中，为你发出字体系统、调色板、主视觉和版块构图。
2. 理念源自主题本身。 研究发现，最出色的网站与平庸网站的区别，在于它们的概念取自事物本身，而非表面风格。
3. 不加装饰的统一风格， 并通过 scripts/inspect.mjs 在真实浏览器中测量，让规则得到验证，而不是寄希望于规则能奏效。
4. 检查自己的作品。 在三种宽度下截图，使用评审标准，修复，再检查。

测试中总结出一条警告。去掉装饰只是工作的一半；页面删去了标签、线条和卡片，却没有任何东西取而代之，读起来就会显得单薄。盲评评审更倾向于内容丰富、有辨识特征的页面，而不是缺乏这些元素的空洞页面。另一半是内容本身：字体要更大，使用整片色彩，放入真实展现主题世界的图片（搜集或绘制均可），并确保每个版块都承载完整内容。这项技能就是为此而构建的；不要为了克制而牺牲这些内容。

以下命令中的 <skill> 指的是本技能的文件夹。请在项目根目录运行命令，这样工作文件会放在该目录下的 .taste-skill/ 中。脚本需要 Node 22+ 和已安装的 Chrome、Edge 或 Chromium，且不会安装任何内容。assets.mjs 还需要网络连接；它不使用 API 密钥。

页面或应用界面

先判断你要做的是以下两种工作中的哪一种。

• 页面用于阅读和滚动浏览：着陆页、营销或产品网站、作品集、活动页面、餐厅页面、单页网站等。请按下文的执行流程操作。
• 应用界面用于执行操作：仪表盘、管理或分析视图、设置、账单、收件箱或待处理队列、钱包、带筛选器的列表、编辑器或构建器等。请遵循 references/app-screens.md：使用其专属流程、专属抽取脚本（draw.mjs --app）和专属统一风格规则（简洁的边框、小号标签和重复面板在此类界面中很常见；渐变、光晕、有色方块中的图标、彩虹图表和虚构的炫耀性数字则不应出现），并运行 inspect.mjs --app。开始前请通读该文件；下文的页面流程不适用。

展示自家应用的产品网站属于页面；其中的界面片段在内部设计上应遵循应用界面规则。请在单独的文件夹中抽取一次产品应用的风格，同时保留页面的颜色和字体：

node <skill>/scripts/draw.mjs --app --kind <kind> --brief "<the product>" --keep palette,type --out .taste-skill/app

并将页面展示的每个片段（主视觉中的实时界面、功能区的局部截图、图表）都构建为真实的应用组成部分：使用 assets/app.css 来制作面板、表格和控件，使用 assets/charts.js 来制作图表，采用能相互对应的真实数据，明确陈述一项发现，并按照页面蓝图对图片的处理方式进行裁切和缩放。看起来像可用产品的界面片段，是软件页面最有力的图片；灰色条形和占位数字则是最弱的。若需求同时涉及两者（着陆页和其背后的仪表盘），请分别按各自的流程构建，并共用一套调色板和字体。

执行流程

请按顺序完成以下步骤。步骤 1–5 只需几分钟，却能决定页面是否出色。

1. 阅读简报并了解项目

弄清哪些信息真实可靠：主题、受众、页面必须促使用户完成的一件事、技术栈、现有品牌元素（颜色、字体、Logo），最重要的是，实际有哪些图像素材：项目自己的照片或产品图、可展示的真实界面、可调用的图像生成工具，或者什么都没有。不要围绕手头并没有的图片来规划。项目本身没有素材，并不意味着完全没有素材：主题相关的城市、街道、材料和历史资料都能在开放档案和博物馆中找到，只要注明来源即可免费使用（第 6 步，scripts/assets.mjs）。

如果需求含糊，就用一句话说明你的理解并据此决定，不要提问。只有缺失的信息会妨碍工作时才提问（例如，没有产品名称）。

然后，在笔记中盘点主题：列出 8 到 12 件属于这个客户、不会属于任何竞争对手的事物。寻找它的名字及其含义；它的地址、门牌号、街道和街区，以及那里的样貌（瓷砖、招牌、涂料颜色、店面字体、光线、天气）；简报中的数字（座位数、房间数、到海边的时间、价格、年份）；它面临的限制（每月只做一批、冬季歇业、仅接受预约）；它使用的材料和颜色；它的仪式与营业时间（凌晨五点点燃烤炉，七点出发的渡轮）；它所在世界里的印刷品（时刻表、标签、票据、招牌）。第 4 步的创意就来自这份清单。在盲测中，每份简报里胜出的页面都取材于清单中的一项（客户的名字及其含义、所在街道、让它与众不同的唯一限制）；而落败的页面则是构图不错，却只有泛泛的品类创意。这份清单也是你的图片搜索指南：其中的每个地点、材料和印刷品，都是第 6 步可以使用的搜索词。

2. 写出论证

开始设计之前，先按 references/copy.md §1 所示，把页面写成一组带有证明依据的主张，每个版块一行。主张决定哪些版块会存在，以及它们的排列顺序。删掉没有主张支撑的版块。这样就能避免套用「主视觉、Logo、三个功能特点、用户评价、定价、行动号召」这类固定顺序。

3. 抽取方向

node <skill>/scripts/draw.mjs --sector <sector> --brief "<one line about the subject>" \
  --sections <roles in the order of your argument> [--tone <tone>] [--have <assets>] [--keep palette,type] \
  --options 3

这里会抽取三个方向，并分别打印简短摘要。将每个方向与清单逐一对照：哪种组合方式能体现只有这个客户端才有的特色？选它，而不是最熟悉的那个，并在笔记中写下一句话说明原因。在测试中，最常见的弱页面成因，就是随意抽到一个不适合主题的方向。然后抽取完整方案表：

node <skill>/scripts/draw.mjs <the same arguments, without --options> --direction <chosen id>

• --sector：node <skill>/scripts/draw.mjs --list sectors。选择最接近的领域。
• --sections：从 --list roles 中选择角色（features、showcase、how-it-works、testimonial、proof、stats、pricing、faq、cta、footer、intro、about、work、gallery、list、contact）。主视觉区默认包含在内。
• --tone（可选）：quiet、bold、warm、technical、playful、luxury、editorial。只有简报明确要求某种风格时才传入。
• --have：实际存在的资源，以逗号分隔：photography（项目自身拍摄的场所、人物或作品照片）、product-photo（特定产品的照片，或能生成这类照片的图像工具）、product-ui（真实截图）、illustration、video。如果没有，就省略：这样抽取时会避开依赖这些资源的组合方案，并在方案表中说明如何如实填充图片位置（软件展示其自身以 HTML 构建的界面；没有照片的产品则以绘制形式呈现，并置于其真实环境的图片中，绝不伪造产品照片）。你会在开放图库中找到的图片并非项目自身的资源；不要将它们列入 --have。
• --keep palette,type：当品牌已固定配色或字体时使用。这样抽取时只会选择组合方式，你再将品牌的取值映射到各个角色。

该命令会打印一份方向方案表。它就是此项目的艺术指导：

• 采用它。 不要把它和你原本就会采用的布局混搭。如果它让你觉得陌生，那就对了：这项技能正是为了避免使用熟悉的布局。
• 只有能明确说明原因时，才重新抽取一个位置（--redraw hero | type | palette | photos | scenes | section:<role> | direction）：它与已说明的品牌限制相矛盾，或需要不存在的资源。绝不要为了选一个更自在的方案而重新抽取。在报告中记录每次重新抽取。
• 当抽取到的版块无法容纳实际内容时（例如，它要对比三个方案，但实际只有一个价格；它需要五条引言，但一条也没有），不要硬凑内容。使用 --alternatives <role> 列出其他选项，选择假设与内容相符的选项，并用 --redraw section:<role>=<id> 采用它。
• 检查配色是否适合主题。 抽取到的配色既是一组比例（一个底色、一种墨色、一种强调色和若干色块），也是一组颜色。如果配色与主题本身的材质相冲突（泥煤威士忌却用糖果色粉彩，山间小屋却用霓虹色），就重新抽取一次配色；如果主题本身有鲜明的颜色（其材质、街道上的涂料、窗外的景色），则保留抽取到的比例，改用主题自身的颜色，并在报告中说明。
• 随时可用 node <skill>/scripts/draw.mjs --show 重新打印。在较长的工作过程中，每次开始构建一个版块前都重新阅读方案表。

4. 找到创意

方向是一种组合方式。创意则让页面属于这个主题，而不属于其他任何主题。把这句话写进笔记，只有在两个空白处都填入来自主题本身的内容后，才开始构建：

在这个页面上，[属于该主题的某样东西]变成[方向要求采用的手法]。

第一处空白可以从以下方面寻找：

• **它的产出。**它会产出什么？把真实产出作为素材放到页面上。（一台打印诗歌的相机，会把作品打印成纸条交付。）
• **它的物件或形状。**它在实体上看起来是什么样，在剖面或轮廓上又是什么样？把它放大、裁切，让它成为画框或唯一的图案。
• **它的名称。**这些字母能容纳一张照片、叠成一堵墙，或分到两个角落吗？
• **它的地点。**有没有一个视角能让人想去那里？
• **它的仪式。**页面能否随着滚动呈现一段流程？
• **它的实物。**它的世界里已经存在什么印刷品：票券、菜单、标签、收据、请柬、文件夹、手册？
• **它的对立面。**它缺少的那种感觉，属于哪个其他类别？

第一处空白要从你的清单（步骤 1）中填写，而不是从类别中寻找。**竞争者测试：**把最接近的真实竞争者代入这句话（两条街外的面包店、另一家橡木家具制造商、同一座山上的另一间小屋）。如果这句话仍然成立，那么创意属于整个类别：面包是所有面包店共有的；而这条街上那七扇门，则只属于这家店。 “简洁现代”不是创意。在这项研究中，评审小组评分最低的网站，其创意都被记为“没有超出标准套路的内容”。

**一个可互动的项目。**给页面加上一项访客可以操作、或每次访问都会不同的内容，并以创意为基础：挑选木材，查看椅子用这种木材制成后的样子；输入姓名，查看它用铸造厂的字母刻出来的效果；设置贷款金额，查看实际的月供；查看小屋的炉子此刻是否点着，以及距离末班渡轮还有多久；选择尺寸，查看它放在房间里的效果。在盲测中，每个胜出的页面都有这样一项内容，而且评审们最先提到它。规则：它使用主题的真实内容；在手机上可以用拇指操作；没有脚本时也有简明的后备方案；绝不阻碍阅读；而且只有一项内容，不是游乐场。它会在步骤 6 中作为页面的一部分构建，而不是在步骤 9 中作为动态效果添加。

**场景也承载创意。**设计稿上的滚动场景只是等待主题填充的手法。开始构建前，先根据清单决定每个场景展示什么：穿越镜头经过这家工作室自己的标题卡，路线展示这批货物实际经过的道路，铺满整个屏幕的图片展示房客醒来时会看到的房间。填满了谁都能用的图片的场景，只是屏保。

5. 撰写文案

在添加标记之前，先按照 references/copy.md 将整页内容写成文案稿（纯文本）：

• 每个标题在任何屏幕宽度下都不超过两行。 在敲定句子前，按照 copy.md §2 计算字数：要确保在所有场景下字号足够醒目，约 32 个字符较为稳妥。研究过的作品集首页主视觉区中，标题的中位数为 5 个词、32 个字符。
• 标题正下方（相距 32–48px）放一句辅助说明，并与标题同时显示，绝不固定在首屏底部，也不因动画而延后显示。如果标题是名称或比喻，这句话就直白说明它是什么。首屏上放一个主要操作按钮，名称说明其功能，且必须是真正的按钮。
• 首屏要用醒目的大字回答访客的第一个问题。 活动页面要说明是什么活动、何时何地举办（日期必须放在标题或次一级字号中，不能只用小字显示）。产品页面要说明产品是什么、价格或用途。个人页面要说明人物身份及其工作。访客关心的每个版块（演出阵容、菜单、客房、价格）都要有自己的标题，并在导航中有自己的位置。
• 写完整内容。 项目简介要求的每个版块都要完整提供信息：完整菜单及价格、每间客房的详情、每位演讲者及其演讲内容、价格及其包含的项目，以及对每个实际问题的回答。内容单薄是整洁页面不如内容更丰富的页面常见原因。
• 如果项目简介有遗漏，预期需要补充示例细节（菜名、客房名称和房价、项目标题），以充分展现设计效果；请在报告中列出这些内容，供客户确认。绝不捏造凭证：不得虚构客户、引言、评价、媒体报道、徽标或业务统计数据。

6. 继续构建

在脑海中关闭所有动效后再构建页面；如果页面必须依靠动画才显得完整，那它就还没做好。工作顺序：

1. 令牌。 将色彩和字体角色从样式表中定义为 CSS 自定义属性。后续所有内容都只引用令牌。<skill>/assets/base.css 是可供你起步的中性基础（重置样式、令牌名称、流式字体阶梯、网格、焦点和选中样式、动效辅助类）；它本身没有特定视觉风格。

2. **首屏主视觉，**严格按照蓝图，在桌面端和手机宽度下呈现。先把该大的元素做大、该小的元素做小，再开始添加其他内容。

3. **每个版块都按其蓝图，**填入本项目的内容。保留几何结构，换掉主题。相邻版块不得共用同一种布局。**将创意贯彻到每个版块，**包括价格、常见问题和页脚：研究中最常见的问题，即使是优秀的网站也会出现，就是首屏独具特色，后面却跟着一成不变的区块。

4. **图片，**按以下优先顺序选用：

   1. 项目自己的图片；
   2. 如果有图像工具，则使用生成图片；
   3. **来自开放图库、真实展现主题世界的图片，**只要有真实且恰当的图片就应使用。使用 node <skill>/scripts/assets.mjs "<query>" 搜索（Openverse、Wikimedia Commons、芝加哥艺术博物馆和大都会艺术博物馆；默认仅选允许商用的许可证）。搜索具体事物，而非类别：老明信片中的街景、社区的老地图、材质的近景、描绘相关行业的版画、同类博物馆藏品、植物图谱、星图。大幅且有意图地使用图片：用一张档案照片作为首屏主视觉，将一幅版画放大为页面的视觉母题，把街道的真实地图用于联系版块。选用前逐张查看；--get <ref> 会将图片下载到 assets/，并记录来源和许可证；--credits 会输出页脚所需的署名行。找到的图片展现的是客户周边的世界，绝不能冒充客户自己的产品、房间、菜品、人物或团队；
   4. **根据主题本身用代码绘制，**用于没有真实图片可用的内容（其物件、瓷砖、窗户、产品界面等），并采用统一的扁平图形语言，使用调色板中的真实色彩；
   5. 仅在通用图片确实恰当时，才使用样式表中展示的照片（例如海边房屋配海景）；绝不可用它们代替主题本身；
   6. 仅使用文字和色彩。

   如果项目有自己的视频素材，或展现自身流程或产品的真实图片，首屏就要大幅展示（约占屏幕的 40% 或更多）。不要在页面上写句子说明图片的来源或它们不是什么（例如“这些图片都没有展示我们的酒吧”）：图片说明应写明图片内容，署名行则小字放在页脚。若作品集中的作品是为需求而虚构的，应将每件作品绘制成完整的静帧成品（带有专属字体设计的标题卡、片尾帧、海报），体现真实细节，绝不能把客户的产品画成象形图。

   **底线，检查人员会核验：**页面上至少要有四张真实图片，通常为六到十二张（照片、档案图片、地图、版画、视频素材、栅格图稿；软件项目中，裁剪后的界面片段也算）。SVG 绘图不计入最低数量：没有真实图片可用的内容要自行绘制，同时仍须使用真实图片。有真实视频素材的地方，应添加一段静音循环视频，并配上封面帧：使用 assets.mjs --video "<query>" 搜索。模型常因寻找图片费事而跳过图片和视频素材；缺少它们，页面就不合格。 references/imagery.md 介绍了搜索、许可与署名、视频、绘图、裁剪和处理。

5. 真实内容。 将第 4 步制作的内容放入最能证明论点的版块中（通常是主视觉区或预订区），使用真实内容，并提供拇指大小的手机版本和纯文本回退方案。

6. 滚动场景。 按设计稿安排时（第 9 节），每个场景都要配上它承载的版块：页面的重要时刻、穿梭于作品之间的镜头、展开至全屏的图片、随滚动弯折的文字。复制 <skill>/assets/scenes/ 中的共享舞台和场景文件，用本项目自己的图片和文字填充场景，并设置页面令牌，让场景融入页面风格。场景是一种构图：它决定页面有多长、每个屏幕显示什么，因此现在就要制作，并在每轮视觉检查中查看，而不是留到最后才添加。references/scenes.md 说明了如何将场景放到页面上、填充内容、调整适配并检查；assets/scenes/demo/<id>.html 则是每个场景的可运行示例。

7. 充实度。 将桌面端的每个屏幕都视作一张海报：一个主视觉元素，以及它承载的内容。大部分为空白的屏幕说明版块内容不足，而非留白；每页最多只能有一处刻意留白，检查器会将有两个或更多近乎空白屏幕的页面判定为失败。正文使用 16px 或更大的全浓度墨色；灰色仅用于次要注释。

8. 页面框架。 页面在所有宽度下都应有一对相等的外边距，每个版块都要利用页面预留的宽度：文字位于左半边时，右半边必须放置图片、第二栏、列表或插图，不能空着。不对称布局应体现在网格内部，而非页面框架中：只有远侧有内容收住时，才可以留空。页面上不能有超过约半个屏幕高度的整段空白；桌面端版块间距为 120–240px。访客需要的每个版块都要以一个点明主题的标题开头，首屏则要用 h1 展示页面标题。读者在页面看起来不对劲时，最先提到的往往就是这些问题（“没有明确标题”“空白随意”“所有内容都挤在一边”），检查器会逐项测量。

9. 状态与语义。 使用真实链接和按钮、清晰可见的焦点、替代文本，以及专门设计的手机布局。

需要了解某项设计决策背后的细节时，请阅读 references/type.md、references/colour.md 和 references/layout.md；下面列出的是简要规则。

7. 检查关卡

node <skill>/scripts/lint.mjs <source files or folder>
node <skill>/scripts/inspect.mjs <url or path/to/index.html>
node <skill>/scripts/scenes.mjs <url or path/to/index.html>     # when the page has scroll scenes

scenes.mjs 会在桌面端、手机端以及减少动态效果的页面上，以每个滚动场景保持区间的 0%、10%……100% 为节点进行截图；当设计稿包含场景时，inspect.mjs 还会录制完整的滚动过程（desktop-film-NN.jpg）。未能启动或在桌面端静止不动的场景都会判定为 FAIL。

lint.mjs 会扫描源码中的禁用模式和套话。inspect.mjs 会在真实浏览器中以 1440、768 和 390 像素宽度打开页面，测量各项指标（标题行数、字号、实际加载的字体、颜色、线条、阴影、渐变、对比度、溢出情况，以及页面框架：左右边距是否相等、版块是否挤在一侧、是否存在大片空白、标题、无标题版块、贴近屏幕边缘的文字），并将截图保存到 .taste-skill/inspect/。修复所有 FAIL。除非能用一句话向设计师说明某个 WARN 有其合理性，否则都应视为问题。反复运行，直到没有 FAIL。不要质疑测量结果，也不要设法瞒过检查器。检查器会通过一次性本地服务提供本地文件；如果页面还必须能直接从文件系统打开，请在完成前用这种方式打开一次 index.html。

8. 审视

通过检查只意味着没有测出任何违规项，并不代表页面做得好。打开检查器列出的截图（每种视口都要看，用图像查看器或 Read 工具），并依据 references/critique.md 进行评议：十四项检查、按 Awwwards 权重计算的分数，以及各项上限。按照规定的格式写下评议，修复最突出的问题，再运行检查器并重新审视。最多进行三轮。

只评判图片。如果问题在截图中可见，那它就是真实存在的，无论代码怎么说。

9. 动效

现在构建动效层。这是必需项，而且不止是淡入：检查器会统计页面加载和滚动时真正发生移动的元素，少于八个就会判定不合格（少于十六个则会警告）。所有滚动场景都已构建完成（步骤 6）；在此基础上，动效层包含四个部分：

1. **方向说明中命名的标志性动作：**一个动作，做到位（已分镜的场景也可以作为标志性动作）。
2. **每个区块中各部分的入场动效：**先标题，再文本，再图片，间隔 60–90ms，伴随透明度变化上移 16–32px；在区块进入视口时触发一次。不能让整个区块只做一次淡入；也绝不能让内容在脚本失效时一直隐藏。
3. **每个控件的反馈：**按钮、链接、卡片和动态元素都要有按下、悬停和聚焦状态。
4. **一张会动的图片：**使用找到的片段并设为静音循环播放、让照片缓慢缩放或漂移，或为主视觉图片添加与滚动联动的动效。

只使用变换和透明度；每个动效都必须有 prefers-reduced-motion 降级方案，保留内容但取消位移。会改变整屏颜色或布局的动效（按章节切换颜色、固定故事场景）属于构图的一部分，因此要在步骤 6 中构建，并让每轮审视都检查到。references/motion.md 中有设计变量和经过测试的方案。然后再运行一次检查器，并检查每张截图，确认没有内容未能显示。

10. 汇报

只有以下条件全部满足后才能汇报；有一次糟糕的测试运行中，每一项都曾被跳过：

• 在页面最终版本上，inspect.mjs 在 1440、768 和 390 宽度下均显示 0 FAIL。
• 最后一次修改后，你打开了它列出的每一张截图，而不只是首屏截图。
• 如果有滚动场景：scenes.mjs 已在最终页面上运行且没有问题，并且你阅读了每张布局稿（桌面、手机、减少动效）。
• 陌生人看五秒首屏就能说出这是什么以及该做什么。
• 每个区块都有标题；两侧边距一致；页面没有大片空白。
• 最后一轮评议已按照 references/critique.md §4 的格式写下。

简要告知用户：采用的方向（名称和种子）以及任何重绘及其原因；创意说明句和动态元素；最后一轮评议的最终分数以及仍然不足之处；每张找到的图片和片段的标题、创作者、许可协议和来源页面（assets.mjs --credits 会打印清单），以及页面上的署名位置；哪些随附照片和哪些替代摄影的绘画可供替换；以及发布前必须替换的所有示例内容。不要声称运行过你未实际运行的检查。

基本规则

这些规则适用于所有构建，无论采用什么方向。inspect.mjs 会测量这些规则。

规则	替代方案
标题在任何宽度下都不超过两行。 每个 h1–h6，以及首屏的主标题，无论使用什么标签。	删减文字，然后加宽排版区域。最后再调整字号。
首屏要有清晰的标题，放在页面唯一的 h1 中，并为每个版块设置标题。	说清楚这是什么：名称加上功能、产品加上用途、活动加上日期和地点。
外边距保持一致；不要让版块挤在一侧，而屏幕另一半空空如也。	用内容填补每处空白的另一侧：版块图片、第二栏、列表或图表。
不要留出高于约半个屏幕的大块空白。	保持常规版块间距。有意留白时，放置一张图片或一块色面，每页一次。
陈述内容要用段落呈现。 导语句或大号引文应标记为 <p> 或 <blockquote>，字号保持在陈述文本的范围内（桌面端不超过 36px，手机端不超过 24px），长度约为 25 个词、三行。	超出这个长度就属于标题，应遵守两行规则。在盲测中，评审会把一条 42px、分成四行的句子读成四行标题。
不要加眉题。 标题上方不要放小标签，不要在主标题上方放胶囊徽标，也不要放“New ·”标签。	把信息写进标题或第一句话，否则删掉。
除真正的代码块外，不要使用等宽字体。	使用正文文本字体。数字需要对齐时使用等宽数字。
不要使用索引编号。 不要用 01 / 02 / 03，不要用 (001)，也不要写“Step 2”。	用位置、字号或文字体现顺序。确实需要排序时使用真正的 <ol>。
不要使用细线。 不要用细发丝分隔线、1px 描边框、网格线、十字准线或裁切标记。	用留白、背景色调变化、比例变化或实色形状。
不要使用渐变。 不要用作背景、按钮或文字效果。	使用纯色或真实照片。在照片上的文字下方加中性色遮罩是唯一例外。
静止的元素不要加阴影。 不要加光晕。	用色调变化区分表面。仅对真正悬浮的元素使用阴影：菜单、对话框。
不要使用助手配色。 不要用黄色奶油色底配赤陶色或铁锈色；不要用紫色或靛蓝色。	使用既定配色。
不要使用字号极小且字距拉大的全大写标签。	使用易读字号的句式大小写。
不要使用顶部带图标的功能卡片，也不要排列一行相同的卡片。	使用既定的版块布局方案。
不要使用玻璃拟态。 不要用背景模糊面板，也不要用悬浮胶囊导航。	使用简洁的导航栏：品牌字标、几个链接和一个操作项。
不要使用表情符号、渐变色块、装饰形状或由灰色横条拼成的假仪表盘。	使用真实图片、真实界面片段，或者什么都不放。
标题中不要对强调词做特殊样式（斜体、衬线字体、彩色、下划线）。	统一字体、统一颜色。用文字本身表达强调。
**最多使用两种字体，**通常只用一种。	使用既定的字体系统。

有三个地方保留各自的惯例，检查器不会修改：<pre>/<code> 中的真实代码（在此处使用等宽字体是正确的）、真实表格和表单字段（可以带线条），以及根元素带有 data-ui 属性的真实界面片段（产品自身的边框和菜单；参见 references/imagery.md §7）。

说实话，为什么要定这些规则？其中一些是研究测量得出的结果：在 247 个网站中，评审评分达到 7.5 或以上的网站，使用带图标功能卡片的比例为 1%，而评分低于 6.5 的网站为 28%；使用胶囊徽标的比例分别为 14% 和 34%；使用渐变的比例分别为 22% 和 52%；使用阴影的比例分别为 24% 和 48%；使用极小字号、字距拉大的大写字母的比例分别为 16% 和 57%。另外一些则是所有者的审美偏好，与当下的画廊风格相悖：等宽字体标签、索引编号和发丝网格线在获奖网站上其实比在较弱的网站上更常见，这也正是生成器会模仿它们、而它们如今看起来像在刻意扮相的原因。这里一律禁用，不作例外。references/tells.md 保留了这份带日期的清单。 移除装饰后会腾出空间。绝不要再用其他装饰填补。用比例来填（放大主体），用完整内容、专为这一主题创作的图片，或用一整块纯色来填。每页最多有一处刻意留白。

设计法则

简明版。数字均来自研究，除非注明为本项目风格指南。

字体

• 两到三种字号就能完成视觉表达：一种非常大，一种小，中间不设其他字号。受研究网站的标题与正文比例中位数为 4.3；最佳网站远高于此（顶尖网站最大字号的中位数为 8.4vw，而较弱网站为 5.0vw）。
• 展示型字体：字距 -0.02 至 -0.05em，行高 0.85–1.05。正文：16–20px，行高 1.45–1.6，每行 45–75 个字符。
• 每页最多五种字号。通常只用一种字体系列（受研究网站中有三分之一如此）；最多两种。
• 默认左对齐。整页最多有一处居中。

留白

• 使用一套网格和一组紧凑边距（16–32px），并贯穿全页；大元素延伸至边缘。全页文字块共用两到三个左边缘。
• 网格内部可以不对称，页面边框则不可：左右外边距相等；偏离中心的标题要由网格另一侧的元素来平衡。
• 区块之间的间距要明显大于区块内部的间距：桌面端为 120–240px（研究中的中位数约为 240）。
• 每个区块的构图都应与相邻区块不同；不要使用卡片网格。

色彩

• 一种底色、一种文字色、一种强调色。强调色用于操作元素，也可用于另一个元素。
• 正文使用完整的文字色。整页采用柔和灰色会显得未完成。
• 表面之间只用细微的色调差异来区分，绝不用线条或阴影。
• 区块可以整体更换背景色。任何内容都不要渐变消失。

图像

• 一张主图胜过六张小图。在得分最高的网站中，首屏至少一半面积由主视觉媒体覆盖的情况占 68%。
• 裁切比例和处理方式保持一致；除非设计方向另有要求，否则使用方角（73% 的受研究网站都采用方角媒体）。
• 没有图片时，宁可用占位内容、图标或抽象形状。专为这一主题绘制、配色相符且精心制作的图片更好。找到并注明出处的真实世界图片则更佳。
• 所有找到的图片都要下载到项目中，在页面上注明出处，并列入报告。不得将其呈现为客户原创。
• 任何元素都不得叠在标题或声明上方（检查器会判定不合格）。

组件

• 按钮：纯色填充，采用方角或全圆角，并统一使用一种样式（顶尖网站中，52% 使用方角，23% 使用胶囊形；9–16px 的“柔和”圆角是较弱网站的默认样式）。大多数出色的首屏没有按钮，或只有一个。
• 导航：字标、三个到五个纯文字链接，以及一个操作项。不加装饰性导航栏。
• 页脚应是经过设计的收尾，而不是网站地图：大多数出色的网站会让品牌名称再次以全宽形式出现。

特殊情况

已有的品牌或设计系统。 传入 --keep palette,type，将品牌的颜色和字体映射到各个角色，并且只从抽取的方向中采用构图。品牌规范仍然适用；如果品牌本身要求使用被禁用的设计元素（例如 logo 位于渐变背景上，或品牌强调色为紫色），则保留品牌素材，在报告中说明，并且只针对该规则向检查器传入 --allow <rule>。

重新设计、调整样式或评审现有页面或应用屏幕。

1. 记录改动前的状态。 按原样运行项目，并将检查结果保存到单独的文件夹中（inspect.mjs <url> --out .taste-skill/before；检查应用屏幕时加上 --app），然后对源代码进行 lint。阅读代码：了解框架、样式方案（Tailwind v3 或 v4、CSS modules、styled-components、plain CSS）、组件，以及必须保留的内容：路由、表单、数据、行为和品牌自有素材。
2. 评审到此为止。 使用 references/critique.md 评析改动前的截图，根据检查器的测量结果列出发现，并指出最能改善页面的三项改动。
3. 保留技术栈、内容和有效部分。 不迁移框架或样式库；添加任何内容前先检查依赖文件。调整样式时保留布局，并采用分配方向中的字体、颜色和组件（品牌有固定要求的部分用 --keep 保留）；重新设计时则分配完整方向，并在现有组件中根据蓝图重建各个区块。无论哪种方式，都要从运行流程的第 2 步开始，使用页面的真实内容。
4. 按效果大、风险低的顺序开展工作： 字体（字体与字号比例）、颜色（一种底色、一种文字色、一种强调色）、框架（边距、区块节奏、首屏标题和每个区块的标题）、状态（悬停、焦点、加载、空状态、错误），最后将常见组件（图标卡片、胶囊徽章、渐变色块、卡片网格）替换为分配方向中的蓝图。
5. 验证效果。 再次检查并将结果保存到 .taste-skill/after，比较每种宽度下改动前后的效果，逐一点击所有改动前可用的链接、表单和菜单，并在报告中并列展示改动前后的测量结果。

只涉及一个组件或单个区块，而非整个页面。 除非没有可遵循的方向，否则跳过抽取步骤。匹配周围的设计，遵循品牌规范和设计法则，并仍然检查结果。

没有结账功能，也没有表单后端。 如果需求说明中指定了真实目标，则主按钮应跳转到该目标。否则，按钮应打开一封已填写主题和正文的邮件（mailto:，并填入访客的选择）；如果是商店，则指向 #checkout，并在报告中说明上线前必须接通。绝不要伪造支付表单。

没有 Chrome 或 Node 22。 运行 lint.mjs（需要 Node 18+），使用你能找到的浏览器工具截图并进行评析。在报告中说明检查器无法运行。

没有网络。 如果 assets.mjs 无法访问任何素材来源，就自行绘制图片，并在报告中说明无法搜索开放素材库。

文件

文件	何时阅读
references/app-screens.md	任何仪表板、管理、设置或其他应用界面：了解其专属流程、规则、令牌和检查项。
references/copy.md	编写论点和文案方案（步骤 2 和 5）。两行算式。
references/type.md	设置字体：比例、字距、度量、加载字体、配对。
references/colour.md	应用配色：角色、比例、色调阶梯、深色页面、对比度。
references/layout.md	网格、边距、节奏、区块变化、导航、页脚、手机端构图。
references/imagery.md	选择、查找、标注出处、裁切和处理图片；没有图片时该怎么做。
references/motion.md	步骤 9。预算、令牌、方案、减少动态效果。
references/scenes.md	步骤 6：工作表涉及滚动场景时，了解如何将场景放入页面、填充、适配、呈现手机端、检查及查阅目录。
references/critique.md	步骤 8。如何审视、评分，以及优先修复什么。
references/tells.md	生成式页面特征的带日期记录，以及各自的替代方案。
references/research.md	研究：方法、数据，以及最佳和最差网站的做法。请引用，不要猜测。
scripts/draw.mjs	抽取并重新呈现设计方向；使用 --photos、--site <id> 查看更多参考；改用 --app 则抽取应用风格。
scripts/assets.mjs	步骤 6：从开放图库中搜索与主题相关的真实图片；使用 --get 下载并附上出处，使用 --credits 打印出处信息。
scripts/lint.mjs · scripts/inspect.mjs	检查关卡。
scripts/scenes.mjs	滚动场景的检查关卡：在每个场景的停留时间 0–100% 范围内检查桌面端、手机端和减少动态效果的呈现。
assets/base.css · assets/base.js	可选的中性基础，可在其上构建。
assets/scenes/	滚动场景：共享舞台（stage.js、stage.css），以及库中每个场景对应的 .js、.css 和可运行的演示页面（位于 demo/）。
assets/app.css · assets/charts.js	用于应用界面：中性外壳、面板、表格和控件，以及按照应用规则绘制的小型 SVG 图表。
library/	draw 读取的数据：设计方向、主视觉、区块、字体系统、配色、照片、研究过的网站、动效、滚动场景（scenes.json），以及应用风格、外壳和界面模式（app.json）。不要通读；请使用脚本。