marvinmcv-svg/SCCS-Landing-page

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）。英雄区是隐含的。
• --tone（可选）：quiet, bold, warm, technical, playful, luxury, editorial。仅当简报明确要求时才传入。
• --have：真正存在的资产，用逗号分隔：photography（项目自身的场所、人物或作品照片），product-photo（特定产品的照片，或能生成它们的图像工具），product-ui（真实截图），illustration，video。如果没有任何资产，则省略此参数：draw 脚本会避免依赖这些资产的构图，设计表会说明如何诚实地填充图片槽位（软件用 HTML 构建其自己的界面；没有照片的产品用绘制图表示，并放置在关于其世界的真实图片中，从不使用虚假的产品图）。你将在开放收藏中找到的图片不属于项目自有；不要将它们列入 --have。
• --keep palette,type：当品牌已经确定了颜色或字体时使用。此时 draw 脚本仅处理构图，你将把品牌值映射到这些角色上。

该命令将打印一份 设计方向表 (direction sheet)。这是本次构建的艺术指导：

• 采纳它。 不要将其与你本来会做的布局混合。如果你觉得不熟悉，那很好：熟悉的布局正是此技能旨在防止的。
• 只有在你能够陈述理由时，才重新抽取一个槽位（--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. Token。 来自设计表的颜色和字体角色，作为 CSS 自定义属性。所有下游只引用 token。<skill>/assets/base.css 是一个中立的起点，你可以从它开始（重置、token名称、流体排版、网格、焦点和选择样式、动效辅助类）；它本身没有自己的外观。
2. 英雄区，完全按照蓝图描述， 在桌面宽度和手机宽度下。在存在任何其他东西之前，先让大的东西变得大，小的东西变得小。
3. 根据其蓝图构建每个部分， 填充这个项目的内容。保持几何形状，替换主题。相邻的部分不得共享布局。将想法贯彻到每个部分， 包括定价、FAQ 和页脚：研究中常见的失败，即使是优秀的网站，也往往是醒目的第一屏之后跟着千篇一律的模块。
4. 图像， 按以下优先顺序：
   1. 项目自有；
   2. 如果你有图像工具，则生成；
   3. 来自开放收藏的主题世界真实图片， 只要存在诚实的图片。使用 node <skill>/scripts/assets.mjs "<query>" 搜索它们（Openverse, Wikimedia Commons, Art Institute of Chicago 和 Met；默认仅限允许商业使用的许可协议）。搜索清单，而不是类别：它在旧明信片中的街道，老地图中的社区，它近距离的材料，它的行业版画，它的同类博物馆藏品，植物图鉴，星图。大尺寸且有意图地使用它们：一张档案照片作为英雄区，一张版画放大作为页面的主题图案，真正的街道地图作为联系部分。在选择之前先查看每一张；--get <ref> 将其下载到 assets/ 并记录其来源和许可协议，--credits 打印用于页脚的信用声明。找到的图片展示了客户周围的世界，绝不能呈现为客户自己的产品、房间、菜品、人物或团队；
   4. 在代码中绘制或在页面内用 SVG 构建。 如果你不信任一个不可用的图像生成工具，这是你唯一的选择；
   5. 最后的手段：关于主题世界的真实图片的详细替代文本。不要用占位符，不要用 lorem ipsum 图片，不要用无意义截图。
5. 实时交互元素。 它的标记、样式和逻辑。
6. 页脚： 版权所有、致谢图像来源（如有）、和主导航。
7. 检查每个部分： references/checklist.md 列出了运行 scripts/check.mjs 之前要验证的 28 个项目。先自己检查，然后运行检查器。