tasteskill v2
模型构建的页面通常看起来像模型见过的所有页面的平均值：居中的三行标题、标题上方一个小小的标签、一排图标卡片、柔和的渐变、几条细线和等宽字体说明文字。其中没有错误，但也没有任何经过决策的地方。
这个技能用决策来取代这些默认设置，有四种方式：
- 发牌提供方向，你来选择。 当要求创造一种外观时，模型每次都选择类别的默认值。
scripts/draw.mjs从 20 个研究方向中随机发三个；你选择最能体现主题理念的那个，然后脚本会从一个包含 247 个真实网站库中，发牌出它的字体系统、调色板、首屏和区块构图。 - 理念来源于主题。 在研究中，区分最佳网站和容易被遗忘的网站的关键，不是样式，而是从事物本身提取的概念。
- 无装饰的 House Style， 在真实浏览器中由
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 <sector> --brief "<一行关于主题的描述>" \
--sections <按你的论据顺序排列的区块角色> [--tone <tone>] [--have <asssets>] [--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）。首屏（hero）是隐含的。--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：
- 每个标题在每个宽度下都适合两行或更少。 在确定一个句子之前，按照 copy.md §2 做一下计算：在自信的字号下，大约 32 个字符在所有地方都是安全的。被研究的画册首页的标题字数是中位数为 5 个词和 32 个字符。
- 一个支持句。一个主要行动号召，以它的功能命名，作为真实按钮出现在首屏。
- 首屏以大号字体回答访客的第一个问题。 对于活动：它是什么，时间和地点（日期属于标题或次级字号，绝不仅仅放在小字中）。对于产品：它是什么以及它的价格或功能。对于个人：谁以及他们做什么。访客想要找的每个区块（阵容、菜单、房间、价格）都有自己独立的标题和在导航中的独立位置。
- 写出完整的内容。 需求中要求的每个区块都完整地提供其信息：完整的菜单和价格，每个房间的详细信息，每位演讲者和演讲，价格及其包含的内容，每个真实问题的答案。内容单薄是干净的页面输给更热闹的页面的最常见原因。
- 在需求留有空白的地方（菜品名称、房间名称和价格、项目标题），需要提供示例细节，以便在满密度下看到设计；在报告中列出它们供客户确认。从不会编造证据：没有客户、没有引用、没有评论、没有媒体、没有标志、没有商业统计数据。
6. 构建它，静态地
在你的脑海中关闭动效来构建页面；一个需要动画才能看起来完成的页面是没有完成的。工作顺序：
- 令牌（Tokens）。 来自设计稿的颜色和字体角色，作为 CSS 自定义属性。下游所有内容只引用令牌。
<skill>/assets/base.css是一个中性的基础，你可以从中开始（重置、令牌名称、流体字号递进、网格、焦点和选择样式、动效辅助）；它没有自己的外观。 - 首屏，精确按照蓝图描述的方式， 在桌面端和手机宽度下。在任何其他东西存在之前，先把大的东西做大，小的东西做小。
- 每个区块按照其蓝图， 使用这个项目的内容。保持几何结构，改变主题。相邻的区块不能共享布局。将理念贯彻到每个区块， 包括定价、常见问答和页脚。这是研究中失败的常见原因，即使是在好网站中，也是独特的第一屏后面跟着常规的区块。
- 图像， 按此优先级顺序：
- 项目自己的；
- 生成的，如果你有图像工具；
- 来自开放收藏中主题世界的真实图片， 只要诚实的图片存在。使用
node <skill>/scripts/assets.mjs "<query>"搜索它们（Openverse, Wikimedia Commons, Art Institute of Chicago and the Met；默认只搜索允许商用的许可证）。搜索清单里的条目，而不是类别：明信片中的它的街道、旧的街区地图、它的材料特写、雕刻画中的它的贸易、它那类的博物馆藏品、植物图鉴、星图。使用它们时，要大且有目的：一张档案照片作为首屏，一个放大的雕刻作为页面的图案，街道的真实地图作为联系区块。在每次选择前查看它们；--get <ref>将其下载到assets/并记录其来源和许可证，--credits打印要放在页脚的来源声明行。找到的图片展示的是客户周围的世界，绝不会被呈现为客户自己的产品、房间、菜肴、人物或团队； - 用 CSS 绘制， 作为常被忽略的第四选择。在某个区块需要一个形状但没有诚实的图片可以匹配时，使用纯 CSS 或 SVG 绘制几何图案。这在页面上是诚实的，且通常比使用无关的图像更好。