williamsnieves/landing-factory

tasteskill v2

模型构建的页面通常看起来像模型所见所有页面的平均值：居中的三行标题，上方一个小标签，一行图标卡片，柔和的渐变，几条细线和等宽字体说明。其中没有错误，但也没有任何决定。

本技能通过四种方式用决策取代这些默认设置：

1. 脚本处理方向，您从中选择。 要求模型创造一种外观时，它总是选择类别默认值。scripts/draw.mjs 从二十个经过研究的方向中抽取三个；您选择最能体现主题创意的那个，然后脚本从基于247个真实网站精炼的库中抽取其字体系统、调色板、英雄区和区块构图。
2. 创意源自主题。 在研究过程中，区分优秀网站与平凡网站的关键在于从事物本身提取的概念，而非样式本身。
3. 无装饰的样式风格， 由 scripts/inspect.mjs 在真实浏览器中测量，确保规则得到实际检查而非仅凭期望。
4. 您需要查看所构建的内容。 三个宽度的截图、评审标准、修复、再次查看。

测试中得出的一个警告：移除装饰只是完成了一半工作；一个页面如果失去了标签、规则和卡片，却没有得到任何替代内容，则会显得单薄，盲审评委正确地倾向于一个内容更丰富但有明显模板特征的页面，而非一个空荡荡的页面。另一半是实质内容：更大的字体、整片的颜色、该主题世界的真实照片（找到或绘制），以及每个区块都承载其完整内容。本技能旨在为您提供这些；不要为了节制而牺牲它们。

在下面的命令中，<skill> 代表本技能的文件夹。从项目根目录运行，以便工作文件放在该目录下的 .taste-skill/ 文件夹中。脚本需要 Node 22+ 以及安装的 Chrome、Edge 或 Chromium，且无需安装任何东西。assets.mjs 还需要网络访问权限；它不使用任何API密钥。

运行流程

按顺序执行以下步骤。步骤1-5需要几分钟，并决定页面是否合格。

1. 阅读简报和项目

找出真实信息：主题、受众、页面必须让访客做的一件事、技术栈、任何现有品牌（颜色、字体、Logo），以及最重要的是 确实存在的图像：项目自身的照片或产品图、可以展示的真实界面、可调用的图像生成工具，或者什么都没有。不要围绕不存在的图片进行规划。自己没有任何素材很少意味着完全没有：主题所在的城市、街道、材料和历史都存在于开放档案馆和博物馆中，可免费使用并注明出处（步骤6，scripts/assets.mjs）。

如果请求模糊，自行决定并用一句话说明您的理解，而不是追问。仅在缺少的事实会阻碍工作时才询问（例如，没有产品名称）。

然后在笔记中 列出主题清单：八到十二个属于该客户且不与任何竞争对手共享的事物。寻找其名称及其含义；其地址、门牌号、街道和社区，以及该地方的外观（瓷砖、标志、油漆颜色、店面字体、光线、天气）；简报中的数字（座位数、房间数、距海分钟数、价格、年份）；其面临的限制（每月仅一批、冬季关闭、需要预约）；其材料和颜色；其仪式和营业时间（五点烘烤炉、七点渡轮）；其世界中的印刷物品（时刻表、标签、车票、标志）。这个列表是步骤4中创意的来源。在盲测中，赢得每个简报的页面都基于此类列表中的某个项目（客户名称及其含义、所在的街道、使其成形的唯一限制），而失利的页面则是构图良好但只有类别创意。该列表也是您的图片搜索依据：列表中的每个地点、材料和印刷物品都是步骤6的查询关键词。

2. 编写论证

在任何设计开始之前，按照 references/copy.md §1 所示方式，将页面列举为带有证据的主张，每个区块一行。这些主张决定了哪些区块存在及其顺序。删除任何没有主张的区块。这是避免常见的英雄区、Logo、三个功能、推荐、定价、行动号召的固定序列的方法。

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：

• 每个标题在任何宽度下都适合两行或更少。 在确定句子之前，按照 copy.md §2 进行计算：大约32个字符在任何大小下都是安全的。研究中的画廊英雄区标题中位数为5个单词，32个字符。
• 一个支撑句。一个主要操作，以其功能命名，作为第一屏上的真实按钮。
• 第一屏以大号字体回答访客的第一个问题。 对于活动：是什么、何时、何地（日期应包含在标题或第二大小中，绝不仅用小字）。对于产品：是什么及其价格或功能。对于人物：谁以及他们做什么。访客前来访问的每个区块（阵容、菜单、房间、价格）都有自己的标题和在导航中的位置。
• 编写完整内容。 简报要求的每个区块都应完整呈现其信息：完整菜单及价格、每个房间的详细信息、每位演讲者和议程、包含内容的定价、针对每个真实问题的答案。内容单薄的区块是简洁页面输给更丰富页面的常见原因。
• 当简报留有空白时，期望提供示例细节（菜品名称、房间名称和价格、项目标题），以便设计以完整密度呈现；在报告中列出它们供客户确认。切勿编造证明：没有客户、引述、评论、新闻、Logo或业务统计数据。

6. 构建它，仍然

在头脑中关闭动画来构建页面；需要动画才能看起来完成的页面并未完成。工作顺序：

1. 标记。 从方向表中提取颜色和字体角色作为CSS自定义属性。所有后续内容仅引用标记。<skill>/assets/base.css 是一个中性的基础，您可以选择从此开始（重置、标记名称、流体字体步进、网格、焦点和选择样式、运动辅助工具）；它本身没有任何外观。
2. 英雄区，完全按照蓝图描述， 在桌面和手机宽度下。在创建其他任何内容之前，先将大东西做大，小东西做小。
3. 根据蓝图构建每个区块， 使用本项目的内容。保持几何结构，改变主题。相邻区块不得共享布局。将创意带入每个区块， 包括定价、常见问题解答和页脚；研究中常见的失败，即使是在优秀网站中，也是第一屏独特，后面跟着模板化区块。
4. 图像， 按以下优先级：
   1. 项目自身的；
   2. 生成的，如果您有图像工具；
   3. 来自开放收藏的主题世界的真实图片， 只要存在诚实的图片。使用 node <skill>/scripts/assets.mjs "<查询>" 搜索（Openverse、Wikimedia Commons、芝加哥艺术学院和大都会博物馆；默认仅允许商业使用的许可证）。搜索清单，而不是类别：其街道在旧明信片中的样子、该社区的旧地图、其材料特写、其行业在版画中的表现、其种类的博物馆藏品、植物图版、星图。大方且有目的地使用它们：一张档案照片作为英雄区，一张放大的版画作为页面主题，街道的真实地图作为联系区块。在选择前查看每一张；--get <引用> 将其下载到 assets/ 并记录其来源和许可证；--credits 打印用于页脚的信用声明。找到的图片展示了客户周围的世界，绝不能呈现为客户自己的产品、房间、菜肴、人物或团队；
   4. 绘制在……

…（此处因原始内容截断而结束）