tasteskill v2
模型构建的页面通常看起来像模型见过的所有页面的平均值：居中 三行标题、上方一个小标签、一排图标卡片、柔和渐变、几条细 线和一个等宽字体说明。没有任何内容是错误的，也没有任何内容是被决定的。
本技能通过四种方式用决策取代这些默认项：
- 脚本发牌方向，你从中选择。 要求模型发明一种外观时，模型总是选择类别默认值。
scripts/draw.mjs从二十个经过研究的方向中抽取三个； 你选择最能承载主题创意的那一个，然后脚本从从 247 个真实网站中提炼的库中抽取其版式系统、 调色板、首屏和区块构图。 - 创意源自主题本身。 研究中，将优秀网站与平庸网站区分开来的是从事物本身提取的概念，而非样式。
- 无装饰的定制风格， 通过
scripts/inspect.mjs在真实浏览器中测量，从而确保规则被检查而非空想。 - 审视你所制作的内容。 三个宽度的截图、评审标准、修复、再次审视。
测试中得知的一条警告。去除装饰只完成了工作的一半；一个失去了标签、 规则和卡片但没有新增内容的页面会显得空洞，而盲评者更倾向于选择 一个内容更丰富但带有“行业术语”的页面，而不是一个没有这些的空页面。另一半是实质内容： 更大的字号、整块的色彩区域、该主题世界的真实图片（找到或绘制的）、以及每个区块承载完整的 内容。本技能旨在为你提供这些；不要为了节制而牺牲它们。
在以下命令中，<skill> 是本技能的文件夹。从项目根目录运行，这样
工作文件会落在其中的 .taste-skill/ 目录下。脚本需要 Node 22+ 和已安装的 Chrome、Edge
或 Chromium，并且不安装任何内容。assets.mjs 还需要网络访问；它不使用任何 API 密钥。
运行流程
请按顺序执行以下步骤。步骤 1–5 需要几分钟时间，并决定了页面是否优秀。
1. 阅读简报和项目
找出真实的信息：主题、受众、页面必须促使用户完成的唯一事情、
技术栈、任何现有品牌（颜色、字体、标志），以及最重要的是哪些图片真实存在：
项目自己的照片或产品图、可以展示的真实界面、可以调用的图像生成工具，或者什么都没有。
不要围绕你没有的图片进行规划。很少是完全没有：主题所在的城市、街道、材料和历史都存在于
开放档案馆和博物馆中，可以免费使用，只需注明来源（步骤 6，scripts/assets.mjs）。
如果请求模糊，请做出决定并用一句话陈述你的理解，而不是提问。仅当缺失的事实阻碍工作 时才提问（例如，没有产品名称）。
然后在你的笔记中清点项目：列出属于这个客户且与竞争对手不同的 8 到 12 件事物。 寻找其名称及其含义；其地址、门牌号、街道和街区，以及那个地方的样子（它的瓷砖、标志、涂料颜色、 店铺门面上的字体、光线、天气）；简报中的数字（座位数、房间数、距离大海的分钟数、 价格、年份）；它面临的约束（每月只有一个批次、冬季关闭、需预约）； 它的材料和颜色；它的仪式和营业时间（凌晨五点生炉、七点轮渡）； 它世界中的印刷品（时间表、标签、车票、标志）。这个列表是步骤 4 中创意的来源。在盲测中，赢得每次简报的 页面都是基于这个列表中的某个项目（客户的名称及其含义、所在的街道、使其成为 其自身的唯一约束），而输掉的页面虽然有良好的构图但使用的是类别化的创意。该列表 也是你的图片搜索列表：列表中的每个地点、材料和印刷品都是步骤 6 的搜索查询。
2. 撰写论点
在进行任何设计之前，像 references/copy.md §1 所示那样，将页面列为带有证据的声明，每个区块一行。
这些声明决定了哪些区块存在以及以何种顺序排列。删除任何没有声明的区块。这样你就可以避免出现
首屏、品牌标志、三项功能、推荐、定价、行动号召的标准序列。
3. 抽取方向
node <skill>/scripts/draw.mjs --sector <行业> --brief "<关于主题的一句话描述>" \
--sections <按你的论点顺序排列的角色> [--tone <语气>] [--have <资产>] [--keep palette,type] \
--options 3
这会抽取三个方向并打印每个方向的简短摘要。将每个方向与你的清点结果进行对比： 哪种构图方式能够承载只有该客户才有的某些特性？选择那个方向，而不是最熟悉的方向，并在笔记中写下选择原因。在测试中，一个不适合主题的随机方向是导致页面薄弱的最常见原因。然后抽取完整方案：
node <skill>/scripts/draw.mjs <相同参数，去掉 --options> --direction <选中的 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 | section:<role> | direction）：它与声明的品牌约束相矛盾，或者需要不存在的资产。绝不要为了获得更舒适的内容而重新绘制。在你的报告中记录每一次重新绘制。 - 当一个抽取的区块无法容纳真实内容时（例如它比较三个计划但只有一个价格；它需要五个引文但实际上没有），不要强行扭曲内容以适应。使用
--alternatives <role>列出其他选项，选择一个匹配内容的选项，并使用--redraw section:<role>=<id>采纳它。 - 检查调色板是否与主题匹配。 抽取的调色板既是一组颜色也是一组比例（一个底色、一个墨色、一个强调色、字段色）。如果其颜色与主题本身的材料冲突（泥煤威士忌使用糖果粉色、山间小屋使用霓虹色），则重新绘制一次调色板；如果主题具有自己明确的颜色（其材料、街道的油漆、窗外的风景），则保留抽取的比例并从主题中提取颜色，并在报告中说明。
- 随时使用
node <skill>/scripts/draw.mjs --show重新打印。在长时间会话中，在构建每个区块之前重新阅读它。
4. 找到创意
方向是一种构图方式。创意是让页面属于这个特定主题而与其他不同。在笔记中写下这句话，在从主题本身填写两个空白之前不要开始构建：
在这个页面上，[属于主题的某个东西] 变成了 [方向要求的元素]。
寻找第一个空白的来源：
- 它的产出。 这个事物产生什么？将真实产出作为素材放到页面上。（一台打印诗歌的相机将其文案交付为纸片。）
- 它的物体或形状。 它在物理上看起来像什么？从截面、剪影看？放大、裁剪、使其成为相框或唯一的母题。
- 它的名字。 字母能否容纳照片、堆叠成墙、分开到两个角落？
- 它的地点。 是否有一个视角能让某人想去那里？
- 它的仪式。 是否有一个序列页面可以在滚动时执行？
- 它的制品。 其世界上已经存在什么印刷品：票、菜单、标签、收据、邀请函、文件夹、手册？
- 它的对立面。 哪个其他类别拥有这个类别缺失的感觉？
从你的清点结果（步骤 1）中填写第一个空白，而不是从类别中。竞争对手测试： 将最近的真实竞争对手放入句子中（两个街区外的面包店、另一个橡木家具制造商、同山上的另一个小屋）。如果句子仍然成立，那么创意属于类别：一条面包属于每家面包店；这条街区因之命名的七个门只属于这一家。
“干净现代”不是创意。研究小组评分最低的网站是那些创意被记录为“超出标准公式的没有”的网站。
一个实时互动元素。 让页面提供一个访客可以做的事情，或者每次访问都不同的元素，源自创意：选择一种木材看椅子呈现在其中；输入你的名字看它在铸造厂的字样中被切出；设置贷款金额看真实的月度数字；查看小屋的炉子现在是否已点燃以及最后一班轮渡还有多久；选择一个尺寸看它在房间中的效果。在盲测中，每个获胜页面都有一个这样的元素，评审者首先提到它。规则：它使用主题的真实内容，在手机上能用拇指操作，在没有脚本的情况下有简单的回退方案，它从不阻止阅读，并且它只有一个，而不是一个游乐场。它在步骤 6 中作为页面的一部分构建，而不是在步骤 9 中添加为动画。
5. 撰写文字
在标记之前，将整个页面写作文案（纯文本），遵循 references/copy.md：
- 每个标题在任意宽度下都限制在两行或更少。 在 commit 一个句子之前，先按照 copy.md §2 进行算术：大约 32 个字符在任何自信字号的任意宽度下都是安全的。研究的画廊首屏的中位数为 5 个单词和 32 个字符。
- 一个支撑句。一个主要操作按钮，以其功能命名，位于首屏。
- 首屏用大号字回答访客的第一个问题。 对于活动：是什么、何时、何地（日期应属于标题或第二大小，绝不要只放在小字中）。对于产品：是什么、价格或功能。对于页面：是谁、做什么。访客来的每个区块（阵容、菜单、房间、价格）都有自己的标题和导航中的位置。
- 撰写完整内容。 简报要求的每个区块都完整提供其信息：完整的菜单带价格、每个房间带各自细节、每位演讲者和演讲、价格及其包含内容、每个真实问题的答案。内容薄弱的区块是干净页面输给更拥挤页面的最常见原因。
- 在简报留有空白的地方（菜品名称、房间名称和价格、项目标题）期望提供示例细节，以便设计在完整密度下被查看；在报告中列出供客户确认。证明信息绝不虚构：没有客户、引文、评论、新闻稿、品牌标志或商业统计数据。
6. 构建它（仍然）
在脑海中关闭动画进行构建；需要动画才能看起来完成的是未完成的页面。工作顺序：
- 令牌。 从方案中提取颜色和版式角色，作为 CSS 自定义属性。所有下游代码仅引用令牌。
<skill>/assets/base.css是一个中性基础，你可以从中开始（重置、令牌名称、流体字号步骤、网格、焦点和选中样式、动画辅助工具）；它本身没有任何外观。 - 首屏，完全按照蓝图描述的那样， 在桌面宽度和手机宽度下。在之前，先放大大的东西，缩小小的东西。
- 每个区块按照其蓝图， 使用该项目的内容。保持几何结构，改变主题。相邻区块不能共享布局。将创意带入每个区块， 包括定价、常见问题解答和页脚：研究中常见的失败，即使是优秀网站，也是独特的首屏后跟着标准块。
- 图片， 按以下顺序优先：
- 项目自己的；
- 生成，如果你有图像工具；
- 来自公开收藏的主题世界真实图片， 只要存在诚实的图片。使用
node <skill>/scripts/assets.mjs "<查询>"搜索（Openverse、Wikimedia Commons、芝加哥艺术学院和大都会艺术博物馆；默认仅搜索允许商业使用的许可证）。搜索你的清点结果，而不是类别：它的街道在老明信片中、该街区的老地图、它的材料特写、它的行业在版画中、它的种类的博物馆藏品、植物图版、星图。使用它们要大尺寸且有意图：一张档案照片作为首屏，放大到页面母题的版画，街道的真实地图作为联系区。在选择之前查看每张图片；--get <ref>将其下载到assets/并记录其来源和许可证，--credits生成归属文本。绝不要将随机库存照片混入页面，即使它们适合颜色。
- 每个区块的完整内容。 文本排版、链接、导航状态、表格数据、表格样式。在构建完成后，清除任何示例文本、临时位置或虚假的
lorem ipsum：页面上剩余的任何示例内容都是 bug。
7. 检查合理性 (scripts/inspect.mjs)
node <skill>/scripts/inspect.mjs <.html 文件或本地 URL> --house-style --widths all
这会在一个无头浏览器中加载页面，并针对方向表中的规则检查它：
- 定制风格测量。 它检查：
--house-style禁用的元素（卡片、徽标、柔和渐变、图标行、分隔线、圆形头像、居中标题、卡片间的间距、小字、狭窄边距、两个以上的装饰字体）。如果任何被禁用的元素在页面上检测到，它会报告违规并被标记。 - 比例测量。 它报告比例：正文 z-index、行高、宽度与视口的比例。
- 截屏。 在三个宽度（360、768、1440）下截图，保存在
.taste-skill/screenshots/中。
运行检查表。 在每个违规处停止。如果定制风格测量报告了任何被禁用的元素，你有工作要做：要么删除该元素，要么证明其存在（例如，一个两列的布局是网格，而不是卡片行；一个徽标可能恰好是一个居中的标签 logo，但必须通过审查）。不要忽略任何违规。
8. 查看和修复循环
查看三个宽度的截图。对每个截图提出以下问题：
- 排版层次清晰吗？ 标题、副标题、正文、小字？
- 颜色按预期使用吗？ 强调色出现在操作元素上，背景色根据需要填充区域？
- 内容在手机宽度下保持连续吗？ 没有人为的断点导致小屏幕上丢失上下文？
- 该页面是否传达了创意？ 盲测：如果页面没有其他上下文的提示，访客能猜出主题吗？
修复任何不符合之处，然后重新运行步骤 7。重复直到满足所有定制风格测量且你认为三个宽度看起来都很好。
9. 添加最后的润色（仅在 CSS 和 JS 中，不更改布局）
在布局和内容被锁定后，添加：
- 动效： 悬停效果、滚动视差、过渡、微交互。不要使用 CSS 库；编写你自己的过渡。
- 可访问性： 语义 HTML、表单标签、焦点指示器、颜色对比度（至少 AA 级别，首屏为 AAA）、减少动效查询。
- 性能： 加载时加载关键 CSS，异步加载字体，延迟加载图片。
不要在添加这些润色后更改布局或内容。
参考
references/ 文件夹包含：
copy.md：文案指南、示例和字符计数规则。directions/：每个处理的方向的完整蓝图、调色板和版式指南。assets/：基本 CSS 文件。
报告
完成后，在 .taste-skill/report.md 中撰写一份报告，包括：
- 您处理的方向 ID。
- 您选择的创意解释。
- 任何重新绘制的说明。
- 在构建过程中发现的任何问题。
- 页面的评估：盲测准备就绪，或需要进一步修改。