qwopop/competitor-reels-tool

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. 阅读简报和项目

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

如果需求含糊不清，不要询问，而是做出决定并用一句话陈述你的解读。仅在缺少某个关键事实会阻碍工作时才提问（例如，没有产品名称）。

然后在你的笔记中 盘点主题：找出八到十二个属于这个客户且是其竞争对手所没有的东西。关注其名称及含义；其地址、门牌号、街道和街区，以及那个地方的样子（它的瓷砖、标牌、油漆颜色、店面使用的字体、光线、天气）；简报中的数字（座位数、房间数、到海边的分钟数、价格、年份）；它所受的限制（每月仅一批货、冬天关门、需预约）；它的材料和颜色；它的仪式和营业时间（五点烤箱亮起、七点渡轮出发）；它世界里的印刷品（时刻表、标牌、门票、标志）。这个列表是步骤 4 中理念的来源。在盲测中，赢得每个简报的页面都是基于此类列表中的某个项目构建的（客户名称及其含义、其所在的街道、使其成为自身的那个限制条件），而失败的页面虽然有好的布局但使用的是类别化的理念。这个列表也是你的图片搜索关键词：列表中的每个地点、材料和印刷品都是步骤 6 的搜索查询。

2. 编写论据

在任何设计之前，按照 references/copy.md 第 1 节所示的方式，将页面列为带有证据的主张，每个部分一行。主张决定了哪些部分存在以及它们的顺序。删除任何没有主张的部分。这是避免使用主视觉、Logo、三个功能、推荐、定价、行动号召这种固定顺序的方法。

3. 抽取方向

node <skill>/scripts/draw.mjs --sector <sector> --brief "<一行关于主题的描述>" \
  --sections <按照你的论据顺序排列的角色> [--tone <tone>] [--have <assets>] [--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。如果没有，则省略它：draw 将避免依赖这些资产的布局，并且样式表会说明如何诚实地填充图片位置（软件使用 HTML 构建自己的界面；没有照片的产品会在其世界的真实图片中绘制和放置，绝不使用伪造的产品照片）。你将在开放收藏中找到的图片不属于项目自己拥有；不要将它们放入 --have。
• --keep palette,type：当品牌已经固定了颜色或字体时。draw 随后仅发放布局，你需要将品牌的值映射到角色上。

该命令会打印一份 方向样式表。它是本次构建的艺术指导：

• 采纳它。 不要将其与你本会做的布局混合。如果它让你感到不熟悉，那很好：熟悉的布局正是这个技能旨在防止的。
• 仅在你能够陈述理由的情况下重绘一个位置（--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 "<query>" 搜索它们（Openverse, Wikimedia Commons, the Art Institute of Chicago and the Met；默认仅允许商业用途的许可证）。搜索你的盘点清单，而不是类别：它在旧明信片中的街道、街区的旧地图、它的材料特写、它的行业版画、其种类的博物馆藏品、植物图鉴、星图。大尺寸且有目的地使用它们：一张档案照片作为主视觉，一张放大的版画作为页面主题，街道的真实地图作为联系方式部分。在选择之前查看每一张；--get <ref> 将其下载到 assets/ 并记录其来源和许可证，--credits 打印用于页脚的信用行。找到的图片展示了客户周围的世界，并且绝不能呈现为客户自己的产品、房间、菜品、人物或团队；
   4. 在……

…[因翻译而截断]

注意： 由于原始 SKILL.md 文件被截断，翻译后的标记也在此处截断。完整的翻译应继续翻译剩余部分，包括子章节 7、8、9 和附录。