regards-art-direction

regards art direction

模型生成的页面通常看起来像它见过的所有页面的平均值：三行居中的标题，上方一个小标签，一排图标卡片，一抹柔和的渐变，几条细线和一段等宽字体说明。没有什么明显不对，但也没有任何东西是经过决定的。

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

1. 由真实参考决定方向。 当被要求设计一种风格时，模型会返回该类别的默认风格。一套固定的方向卡片只能把默认风格挪到别处：每个抽到同一张卡片的项目，都会得到相同的页面。在这里，Agent 会针对当前简介，搜索 regards.design——一个按视觉效果整理的真实网站版块精选索引。它查看页面像素，挑选五到八个版块，指出从每个版块中借鉴的一项特质，再根据所选内容推导出设计方向。
2. 创意源自主题本身。 最佳网站与平庸网站的区别，在于创意取自事物本身，而非装饰风格。参考为创意提供灵感，但绝不取而代之。
3. 采用不加装饰的统一风格， 并通过真实浏览器中的 scripts/inspect.mjs 衡量，让规则得到检查，而不是寄希望于它们。你研究过的参考可以成为例外的依据；习惯不行。
4. 检查自己的成果。 查看三个宽度下的截图、评审标准，以及并排展示的参考；修复问题，再次检查。

测试中得出一条警示：去掉装饰只是工作的一半；页面删掉标签、线条和卡片，却没有用其他内容填补，就会显得单薄。另一半是内容本身：使用更大的字号、整片色彩、真实呈现这一主题世界的图片（找到的或绘制的），并确保每个版块都包含完整内容。不要为了克制而牺牲内容。

在下方命令中，<skill> 指的是这项技能所在的文件夹。请在项目根目录运行这些命令，这样工作文件会放在那里的 .taste-skill/ 中（文件夹名称沿用 tasteskill，以便脚本无需修改即可运行）。脚本需要 Node 22+，以及已安装的 Chrome、Edge 或 Chromium，并且不会安装任何内容。assets.mjs 还需要网络访问权限；它不使用 API 密钥。

开始前，先检查 regards 工具是否可用（search_sections、view_section、get_section、page_sections、similar_sections；你的客户端可能会在工具名前添加服务名称）。如果缺少这些工具，请告知用户如何连接一次：

claude mcp add --transport http regards https://mcp.regards.design/mcp

然后继续执行步骤 3 中的备用方案，并在报告中说明。如果你的客户端可以读取 MCP 资源，请在首次搜索前阅读 skill://regards-design/SKILL.md。

执行流程

按顺序完成以下步骤。步骤 1 至 5 用于判断页面质量。

1. 阅读需求简介和项目

了解真实情况：主题、受众、页面必须促使用户做的一件事、技术栈、现有品牌元素（颜色、字体、标志），尤其要弄清真正存在什么图像素材：项目自己的照片或产品图、可展示的真实界面、可调用的图像生成工具，或者什么都没有。不要围绕手头没有的图片做规划。没有项目自有图片，通常不等于完全没有素材：主题所在城市、街道、材料和历史都能在开放档案馆和博物馆中找到，而且只需注明出处即可免费使用（第 6 步，scripts/assets.mjs）。

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

然后在笔记中盘点主题：列出八到十二项属于这个客户、而非任何竞争对手的事物。查找它的名称及含义；它的地址、门牌号、街道和街区，以及那个地方的样貌（瓷砖、标志、油漆颜色、店铺门面的字体、光线、天气）；需求简介中的数字（座位数、房间数、到海边的分钟数、价格、年份）；它面临的限制（每月只生产一批、冬季关闭、仅接受预约）；它的材料和颜色；它的仪式和营业时间（五点点燃烤炉，七点渡船出发）；它所处世界中的印刷品（时刻表、标签、票券、标志）。这份清单会为第 4 步的创意提供灵感，决定你在第 3 步中的搜索内容，以及第 6 步中的图片搜索词。

2. 写出论点

在开始设计之前，先把页面列成一组主张及其证据，每个版块一行，格式如 references/copy.md §1 所示。主张决定哪些版块应该存在以及排列顺序。删掉没有主张支撑的版块。这样可以避免套用英雄区、徽标、三个功能、用户评价、定价、行动号召的常见顺序。论点也会成为你在第 3 步中搜索组件的清单。

3. 按方向研究参考内容

此步骤将原先从固定库中抽取方向的做法替换为研究方向。references/regards.md 包含搜索方案、优劣样例说明和变换手法。简要步骤如下：

从素材清单出发搜索，而不是从类别出发。 搜索“律师事务所网站”得到的是类别，而你正要摆脱的正是类别。搜索素材清单中写明的内容及其可能的变化：印刷品（“像印刷标签一样排版的价目表”）、材料（“原色纸张、邮票、包装”）、测量方式（“测量真实事物的数字和刻度”）、感觉，以及用户提到的网站（“像 这样、但更安静的网站”）。分三轮搜索：

1. 氛围： 从不同角度（布局、字体、图像、质感）进行两到三次简短搜索，探索整体感觉。
2. 组件： 对论述中的每个要点分别搜索一次（主视觉、列表或菜单、佐证内容、预约、页脚），再针对细节搜索一次：线条、边框和框架，以及数字的呈现方式。
3. 拓宽并偏移： 对你最喜欢的两到三个键使用 similar_sections，再进行一次刻意偏离简报的迂回搜索（搜索该主题领域中的一个词，或使用空查询，以浏览最具特色的版块）。如果结果显得平平无奇，就用文字要求“实验性”或“不寻常”；新颖度从 1（模板）到 5。

即时搜索是默认方式，每分钟有速率限制；深度搜索会消耗一次额度，因此只在需求细致、要求“不要 X”，或需要查找类似某个指定网站的网站时使用。

先查看，再保留。 搜索结果摘要只有一行，设计体现在像素中。对每个可能用到的结果，都使用 view_section 打开并查看，然后淘汰大部分结果。使用 get_section 获取版块的文本、尺寸和页面信息，使用 page_sections 查看整页的节奏。

保留五到八个参考，每个参考只取一处。 同一个网站最多保留一个参考。对每个参考，在 .taste-skill/references.md 中写一行样例说明：

profound/08 · https://www.regards.design/sections/profound/08 · live: https://www.tryprofound.com/
takes:   sheets of graph paper with binder holes, filed behind angled folder tabs
leaves:  the dark ground, the generative squares, the product copy
becomes: a seed library's drawers: one tab per season, one sheet per variety, the real packet on each

“布局不错”不算样例说明。要精确指出组件，让人仅凭你的描述就能在页面上找到它，然后说明它如何转化为适合当前主题的设计。如果无法根据素材清单填写 becomes:，那这个参考就只是装饰：舍弃它。

根据保留的参考推导方向， 并在同一文件的样例说明下方逐行写出：创意句（步骤 4）、主视觉、论述中每个版块及其顺序，并标明所借鉴的样例；字体（参考中使用的字体类别，选用可加载的免费字体；绝不使用参考中的授权字体）；配色（参考中的色彩比例，以及主题自身材料中的颜色，如有）；动效；以及值得访客截图留念的标志性细节。制作每个版块前，都要重新阅读这份说明。

参考与竞争对手测试。 用你的搜索方式研究最接近的真实竞争对手。如果最终得到相同的样例，说明你的搜索是从类别出发的：从素材清单重新搜索。

绝不照搬。 只借鉴创意，不照搬版块：不得完整复现布局，不得使用参考中的文案、标志、插图、照片或品牌标识。在步骤 8 中进行测试：将完成的每个版块与其借鉴的参考并列比较。如果访客可能把两者认错，就继续改造。

没有 regards 时的备用方案。 如果工具缺失或运行失败，就像 tasteskill 那样，从随附的素材库中抽取一个方向（references/draw.md），并在报告中说明该方向是抽取的，而非研究得出的。

4. 找到创意

方向是一种构图方式。创意则让页面只属于这个主题，而不属于其他主题。把这句话写在笔记里，在从主题本身填满两个空白之前，不要开始制作任何内容：

在这个页面上，[属于该主题的事物] 变成了 [参考资料指向的设计手法]。

寻找第一个空白的方向：

• 它的产物。 这个事物会产出什么？把真实产物作为素材放进页面。
• 它的物件或形状。 从剖面或轮廓看，它的实体外观是什么样？把它放大、裁切，让它成为画框或唯一的图案。
• 它的名称。 字母能否容纳一张照片、堆成一堵墙、分布到两个角落，或被测量？
• 它的所在地。 有没有一个视角能让人想去那里？
• 它的仪式。 页面能否在滚动时呈现某种流程？
• 它的实物。 它的世界里已经存在什么印刷品：门票、菜单、标签、收据、邀请函、文件夹、手册？
• 它的反面。 哪个其他类别拥有这个类别所缺少的感觉？

根据你的素材清单填写第一个空白，不要根据类别填写。**竞品测试：**把最接近的真实竞品代入句子。如果句子仍然成立，那么这个创意属于整个类别。“简洁、现代”不算创意。

如果没有参考资料指向能承载这个创意的设计手法，就带着这个创意回到步骤 3，把它作为搜索条件。创意引领方向；参考资料为它服务。

一个互动功能。 给页面一个访客可以操作的功能，或一个每次访问都会有所不同的内容，并让它由创意衍生而来：选择木材，看看椅子用它制成后的样子；输入姓名，看看它用铸造厂的字体排版后的样子；设定贷款金额，查看真实的月供。规则：使用主题的真实内容；能在手机上用拇指操作；没有脚本时也有简单的备用方案；绝不妨碍阅读；它必须是一个功能，而不是游乐场。它会作为页面的一部分，在步骤 6 中制作。

5. 撰写文案

在编写标记之前，按照 references/copy.md 把整个页面写成文案稿（纯文本）：

• 所有宽度下的每个标题都不得超过两行。 在确定句子之前，先按照 copy.md §2 计算字数：字号较大时，约 32 个字符在任何情况下都足够安全。
• 一句辅助说明。一个主要操作按钮，名称要说明它的功能，并以真正的按钮形式出现在首屏。
• 首屏要用大字回答访客的第一个问题。 活动页面要说明活动内容、时间和地点；产品页面要说明产品是什么，以及价格或用途；个人介绍页面要说明人物身份和工作。访客想了解的每个部分都要有自己的标题，并在导航中占据独立位置。
• 写完整内容。 简介要求的每个部分都要完整提供相关信息。内容单薄是简洁页面输给内容更丰富页面的最常见原因。
• 简介中缺失的信息应补充示例细节，让设计以完整的信息密度呈现；在报告中列出这些内容，供客户确认。证明材料绝不能凭空捏造：不得虚构客户、引语、评论、新闻报道、徽标或业务统计数据。
• 绝不照搬参考资料中的文字。

6. 仍要制作

在脑海中关掉动态效果来制作页面；需要动画才能显得完整的页面，就是还没做好。工作顺序：

1. 设计令牌。 将方向说明表中的颜色和字体角色设为 CSS 自定义属性。下游所有内容只能引用令牌。<skill>/assets/base.css 是中性的基础样式，你可以从它开始；它本身没有特定风格。

2. 主视觉区域，依据说明表中的那一行， 分别适配桌面和手机宽度。先把大的元素做大、小的元素做小，再着手其他内容。

3. 每个区块都依据说明表中的对应行和背后的范例， 使用本项目的内容。相邻区块不能采用相同布局。将设计理念贯彻到每个区块， 包括定价、常见问题和页脚：即使是优秀网站也最常见的失败，就是首屏独具特色，后面却接连出现模板化区块。

4. 图像， 按以下优先顺序使用：

   1. 项目自有图像；
   2. 如果有图像工具，则生成图像；
   3. 来自开放图库、真实展现主题所属世界的照片， 只要有合适且真实的照片就使用。使用 node <skill>/scripts/assets.mjs "<query>" 搜索（Openverse、Wikimedia Commons、Art Institute of Chicago 和 Met；默认只使用允许商业用途的许可）。搜索具体素材，不要只搜类别。--get <ref> 会将素材下载到 assets/ 并记录来源和许可信息；--credits 会输出页脚所需的署名行。找到的照片应展现客户周围的世界，绝不能将其说成是客户自己的产品、房间、菜肴、人物或团队；
   4. 根据主题本身用代码绘制， 适用于没有真实照片可用的内容；
   5. 只用文字和颜色。

   切勿使用参考资料中的图片。

   最低要求，检查器会核验： 页面上至少要有四张真实照片，通常为六到十二张。SVG 绘图不计入最低数量。只要有合适且真实的片段，就添加一段动态影像（assets.mjs --video "<query>"）。references/imagery.md 介绍了搜索、许可、署名、视频、绘制、裁切和处理方式。

5. 动态内容：将第 4 步的动态内容放在能证明相关主张的区块中，内容要真实，并提供拇指大小的手机版本和纯文本备用方案。

6. 材质。 为页面赋予材质（见下文 § Material）：用整片色彩铺陈，用纸张质感绘制印刷物，用线条呈现数据，金属色点缀最多一种。克制能让页面整洁；材质能让页面值得展示。

7. 充实度。 将每个桌面屏幕都视作海报来审视：一个主导元素及其承载的内容。每页最多安排一处刻意留白。正文使用完整墨色，字号至少为 16px。

8. 状态与语义。 使用真实链接和按钮、清晰可见的焦点状态、替代文本，以及具有独立构图的手机布局。

需要了解决策背后的细节时，请阅读 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>

lint.mjs 会扫描源代码中的禁用模式和模板化措辞。inspect.mjs 会在真实浏览器中以 1440、768 和 390 像素的宽度打开页面，对页面进行测量，并将截图保存到 .taste-skill/inspect/。修复每一项 FAIL。除非你能用一句话向设计师说明理由，否则每一项 WARN 都应视为错误。反复运行，直到没有 FAIL。第 3 步中获得的例外（参见项目规范）会从 .taste-skill/direction.json 读取；不要添加其他例外。

8. 查看

通过检查只说明没有测到任何违规项，不代表页面做得好。打开检查器列出的截图，并根据 references/critique.md 对它们进行评判。然后进行参考核对：用 view_section 打开每个样本，并与借鉴它的版块并排查看，在笔记中回答两个问题：是否借鉴了指定元素，并达到了原作的质量？它看起来是否与所有参考都不同？修复最突出的问题，再运行一次检查器并重新查看。最多进行三轮。

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

9. 动效

现在制作动效层。这是必需的，而且不只是淡入：检查器会判定页面不合格，如果页面在加载和滚动时真正动起来的元素少于八个。动效层包含四个部分：精心制作的风格标志性动效；每个版块的各部分依次进入（先标题，再文本，最后图片，间隔 60 到 90ms，向上移动 16 到 32px，仅播放一次）；每个控件的反馈；一张会动的图片。只使用变换和不透明度，每个动效都必须提供 prefers-reduced-motion 降级方案。如果参考中的动效就是你的风格标志性动效，view_section 展示的是静态画面：阅读 get_section 了解它如何运动，并在可行时打开 links.live。references/motion.md 提供了设计变量和方案。再次运行检查器，并逐一检查每张截图，确认是否有内容未能显示。

10. 报告

简要告知用户：你运行过的搜索（查询内容，按列表列出）；样本表；每个参考及其 regards 链接、live 链接、你借鉴了什么以及它最终变成了什么；任何违反设计规范的例外及批准该例外的参考；创意句和实际呈现；最后一轮评判的最终分数及仍有不足之处；找到的每张图片和视频片段、其署名，以及署名在页面上的位置；以及发布前必须替换的任何示例内容。如果设计方向来自备用素材库，请说明这一点。不要声称进行了实际上未执行的检查。

设计规范

无论参考是什么，这些规则都适用于每个页面。inspect.mjs 会检测这些规则。

规则	替代方案
各个屏幕宽度下，标题最多两行。 所有 h1 到 h6，以及首屏的主标题，无论它使用什么标签。	精简措辞。然后加宽文本区域。最后再调整字号。
陈述内容应为段落。 导语句或放大的引文应使用 <p> 或 <blockquote>，保持陈述字号（桌面端不超过 36px，手机端不超过 24px），长度约为 25 个词。	再长就属于标题，须遵守两行规则。
不要眉题。 标题上方不要放小标签，不要在主标题上方放胶囊徽章，也不要放“New ·”标签。	将信息放进标题或第一句话，否则就删掉。
真实代码块之外不要使用等宽字体。 *	使用正文用字。数字需要对齐时，使用等宽数字。
不要使用索引编号。 不要用 01 / 02 / 03，不要用 (001)，不要写“Step 2”。*	用位置、大小或文字体现顺序。顺序确实重要时，使用真正的 <ol>。
不要使用细线。 不要用发丝线分隔符、1px 描边框、网格线、十字线或裁切标记。*	留白、背景色调的层次变化、比例变化或实心形状。
不要使用渐变。 背景、按钮和文字都不要用渐变。	使用纯色或真实照片。照片文字下方的中性色遮罩是唯一例外。
静止状态的元素不要加阴影。 不要加光晕。	用表面之间的色调层次。只有真正悬浮的元素才加阴影。
不要使用助手配色。 不要用黄色奶油色底搭配陶土色或铁锈色，也不要用紫罗兰色或靛蓝色。	使用源自主题和参考素材的颜色。
不要使用字号极小、带字母间距的全大写标签。 *	使用易读字号和句首字母大写的格式。
不要使用顶部带图标的功能卡片，也不要排列一行相同卡片。	根据你的素材页构成一个完整的版块。
不要使用玻璃效果。 不要使用背景模糊面板，也不要使用悬浮胶囊导航。	使用简洁的栏：品牌字标、少量链接和一个操作按钮。
不要使用表情符号、渐变色块、装饰形状，也不要用灰色条伪造仪表盘。	使用真实图片、真实界面片段，或者什么都不用。
标题中的强调词不要采用特殊样式（斜体、衬线字体、着色、下划线）。	一种字体，一种颜色。让文字本身承载强调。
最多使用两种字体， 通常只用一种。	使用素材页中的字体。

* 有依据的例外。 tasteskill 禁用等宽字体、索引编号、细线和极小的字距标签，是作者的选择，而非数据所要求：其自身研究发现，这些元素在获奖网站中反而更常见；禁用它们是因为生成器会把它们当作装饰照搬。本分支默认保留禁用规则，但允许参考素材出于明确理由，在某一处破例使用。带 * 标记的元素只有在以下三项都满足时才能使用：

1. 你通过 view_section 打开的某个版块使用了该元素；
2. 该元素的样例行点明了它，并说明它对当前主题有何作用；
3. 它在你的页面中承载信息（例如刻度用于衡量真实内容，账本的列展示真实数据），而非用于装饰。

然后，将该规则的 id 添加到 .taste-skill/direction.json 中的 allow（hairline、outlined-box、mono、numbering、micro-label 或 dashed），例如 { "source": "regards", "allow": ["hairline"] }，并在报告中列出。

两种材质类例外遵循同样的三个步骤，但第三项条件各有不同（§ 材质）：shadow 仅可用于页面上作为实物展示的物件下方的一道柔和阴影（如一张纸、一张票、一张夹在夹子里的卡片），因为它确实从页面上凸起；绝不可用于面板、界面卡片或按钮下方；palette-purple 仅当紫罗兰色或靛蓝色是从参考素材中提取的多个完整色块之一时才可使用，绝不可将其作为中性页面上的点缀色、光晕或色调。渐变、玻璃效果、光晕、表情符号、眉题、图标卡片以及奶油色与陶土色搭配的配色，永远不得例外使用。

以下三个区域保留各自惯例，不受检查器约束：<pre>/<code> 中的真实代码、真正的表格和表单字段，以及根元素带有 data-ui 属性的真实界面片段（参见 references/imagery.md §7）。 移除装饰，就会留下空间。绝不要用另一种装饰填满它。用尺度感、完整内容、专为当前主题制作的图片，或一片纯色来填充。

质感

在之后手动推出的这项技能中，哪些因素让人们想要展示的页面脱颖而出，胜过那些仅仅正确的页面。请在步骤 8 中对照这些因素检查每个版块。

• 色彩应铺满整片色域。 从参考资料和主题中提取三到六种饱和色，再加上墨色，组成调色板。为各个版块分配独立色域，并在相邻色域之间用明暗分明的色阶过渡：浅色区域用墨色文字，深色区域用白色文字。多个鲜明的色域胜过在安全的中性色上点缀一种强调色。看起来像生成内容的配色组合：藏青配黄色、奶油色或米色搭配任何颜色，以及只有一种强调色的深色页面。
• 印刷品应有物件质感。 票据、便条、合同页或标签都应画出纸张质感：在设备像素级别呈现纸纹（使用 devicePixelRatio 对应的画布；每个像素添加一个正负偏移量，使其平均值为零，这样纸张能保持原本的颜色，不会蒙上一层灰；再加上较少出现的深色凹点和几缕淡淡的纤维）；墨迹应能显出纸张纹理，边缘应呈现裁切效果。绝不要使用平铺噪声图或叠加滤镜。物件可以倾斜几度、延伸出画框、与邻近物件重叠，并投下一片柔和阴影。
• 线条承载数据。 用成片的短线条描绘平面，并在有事物发生的位置弯曲；用刻度标示真实数值；从便条指向其说明对象的引线末端带小方块；在重要线条上加括号。使用 SVG 或 canvas 绘制，让线条在任何缩放级别下都保持清晰；每条线都应指向真实事物。这样才能让细线或虚线例外之处发挥价值。
• 一种材质点缀。 在一到三个小物件上使用抛光金属质感（带反射色带的铬，或带细腻纹理的银）：夹子、按钮、边框。绝不要用于整个界面，也不要用于文字。
• 字体风格统一。 用自信的无衬线字体奠定页面基调；另一种字体通常是衬线字体，只用于一种声音（产品自身的文字、印刷文档）。
• 每个版块都应像一张海报。 一个醒目的大元素、少量精确的辅助文字、完整内容，不显拥挤。如果一个版块无法独立撑起整个屏幕，它就还没完成。

设计法则

精简版，摘自 tasteskill 对 247 个作品集网站的研究（references/research.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 至 220px。
• 每个区块的构图都应与相邻区块不同；不要使用卡片网格。

颜色

• 每个区块使用一种墨色、一种强调色和一种底色（区块可以使用专属色域：§ 材质）。强调色用于操作元素，或许还用于另一处。
• 正文使用完整墨色。表面之间用细微的色调差异区分。
• 区块可以改变整个色域。任何元素都不应渐隐至其他元素中。

图像

• 一张主导图片胜过六张小图。裁切比例一致，处理方式一致；除非设计方向另有要求，否则使用直角。
• 所有找到的图片都要下载到项目中，在页面上标注出处，并列入报告。
• 任何元素都不得覆盖标题或陈述文字（检查器会判定不合格）。

组件

• 按钮：扁平设计，使用单一填充色，采用直角或完全圆角，并统一确定一种样式。大多数优秀的首屏区域没有按钮，或只有一个按钮。
• 导航：字标、三个到五个纯文字链接，以及一个操作项。
• 页脚应是经过设计的收尾，而不是网站地图。

特殊情况

已有品牌或设计系统。 保留其颜色和字体；仅从参考网站中借鉴构图和组件，并将品牌映射到相应角色。如果品牌本身要求使用禁止的设计手法，就保留该手法、说明原因，并仅针对该规则向检查器传入 --allow <rule>。

重新设计或审查现有页面。 先对页面运行 lint.mjs 和 inspect.mjs，并报告检查结果，然后再评审截图。重新设计时，从第 3 步开始研究，并将页面的真实内容作为清单。

组件或单个区块，而非整个页面。 搜索同类区块的参考案例，保留两到三个范例，与周边设计保持一致，遵循既定规范，并仍然检查结果。

没有结账流程，也没有表单后端。 如果设计说明指定了真实目标，主按钮就链接到该目标；否则使用带有明确主题和正文的 mailto:，或使用 #checkout 并在报告中注明。绝不要伪造付款表单。

没有 Chrome 或 Node 22。 运行 lint.mjs（Node 18+），使用现有的任意浏览器工具截图，并评审这些截图。在报告中说明检查器无法运行。

文件

文件	何时阅读
references/regards.md	第 3 步：搜索配方、样本注释、变异手法，以及绝不照搬测试。
references/copy.md	撰写论点和文案集（第 2 步和第 5 步）。两行算术。
references/type.md	设置字体：比例、字距、行宽、加载字体、字体搭配。
references/colour.md	应用配色方案：角色、比例、色调层级、深色页面、对比度。
references/layout.md	网格、边距、节奏、版块变化、导航、页脚、手机端构图。
references/imagery.md	选择、查找、标注图片来源、裁剪和处理图片；没有图片时的做法。
references/motion.md	第 9 步。预算、令牌、配方、减少动态效果。
references/critique.md	第 8 步。如何审视、如何评分、优先修复什么。
references/tells.md	生成式页面特征的带日期登记表，以及每项特征的替代方案。
references/research.md	tasteskill 的研究：方法、数据，以及最佳和最差网站的做法。引用研究，不要猜测。
references/draw.md	后备方案：regards 未连接时，从内置库中抽取一个设计方向。
scripts/assets.mjs	第 6 步：从开放图库中获取主题相关的真实图片，并注明来源。
scripts/lint.mjs · scripts/inspect.mjs	检查关卡。
scripts/draw.mjs · library/	仅用于抽取后备方案。不要通读整个库。
assets/base.css · assets/base.js	可选的中性基础样式。

致谢

基于 Leonxlnx 的 tasteskill v2 分叉而来，采用 MIT 许可。研究、清单、创意与竞品测试、开放图库图片、检查器、评审标准和审视循环均来自 tasteskill。本分叉新增了研究步骤、样本表和有据可依的例外。