杀手级设计是做什么的？

目标是：让人们加载网站时能发出“哇”的赞叹——一个顶级工作室才能为这个项目制作出来的网站。整洁、正确、有品位是基础，而非目标。一个仅仅避免了错误的页面是会被遗忘的。以下三个习惯能让你达到这个目标，而本技能也围绕它们构建：

在编写代码之前确定设计。 千篇一律的网站源于从未做出任何设计决策。字体、颜色和布局都默认采用每个模板都在用的样式。一个简短的、根植于项目主题（或品牌，如果有的话）的设计方向，能为后续的每个选择提供理由。
设计一个令人惊叹的瞬间。 在首屏创造一个核心亮点，一个根植于概念的东西，能让访客驻足停留：一个现场演示、大胆的排版、随指针移动而变化的灯光、随着滚动而展开的场景。以高标准执行它，并保持其周围一切元素的平静，以便给它留出展示空间。参见 references/motion-and-wow.md。
审视结果。 凭空编写的CSS总是会有问题：拥挤的移动端布局、薄弱的层次结构、没人看得清的灰色文字、拖沓的动画。渲染页面（包括动效），像评论家一样审视它，修复问题，然后再次审视。

工作分六步进行：理解项目、设定设计方向、编写内容、构建、审查截图并修复、润色并交付。如果是重新设计，则首先增加一个盘点步骤（参见“重新设计现有网站”）。

1. 理解项目

在提问之前，先阅读已有的一切。这意味着要阅读README、文档、包或应用的元数据、现有文案、Logo和品牌文件、截图，以及任何 DESIGN.md。弄清楚：

这是什么，用一句外行也能看懂的话概括。
谁来访问，他们需要决定或做什么。 指出唯一的首要操作：安装、预购、注册、联系。
具体细节：真实的命令、数字、名称、时间、地点、功能、约束、故事。这些是文案和视觉的原始素材，具体细节是让网站避免千篇一律的关键。
个性：三个形容词，加上一个它不是什么。例如：“精确、安静、可信；不俏皮。”
约束：托管方式（例如静态GitHub Pages），任何必须保留的内容，以及现有的品牌资产。
记录的意图：README或文档中说明这个网站是干什么的，以及它刻意省略了什么（“单页面，指向GitHub的按钮；完整列表在其他地方”）。这是已经有人做出的决定。遵循它，任何超出此范围的内容都应在交付时作为提案提出，而非直接构建。
是否存在品牌系统：品牌指南（BRAND.md、样式指南、品牌仓库）、设计令牌、DESIGN.md，或一套一致的成品品牌艺术品（社交卡片、横幅、README封面、当前网站）。如果存在，步骤 2 的工作方式将不同。请参见下面的“在现有品牌体系内工作”。

只向用户询问你无法找到或合理推断并且会改变设计的事情。最明显的例子是产品实际上做什么。对于其他一切，做出合理的判断并在交付时列出你的假设。比起回答一系列问题，他们更愿意对真实的页面做出反应。

2. 设定设计方向

如果项目已有品牌系统，那么该品牌就是方向。跳到“在现有品牌体系内工作”，然后回来执行步骤 3。以下内容适用于需要创建设计的项目。

“干净且现代”不是一个方向。它只是你什么都没决定时得到的结果。

在主题中找到概念。 思考这个项目属于哪个世界。一个提琴修理工作室可能让人联想到云杉和清漆、手写标签、测量图纸。一个城市开放数据门户可能让人联想到交通地图、标识系统和时刻表。一个攀岩馆可能让人联想到等高线地图、镁粉和路线难度。超越最初的联系，找到更具体的东西：“纸和墨水”几乎适用于任何事物，而“20世纪50年代目录中的种子包装袋”则不。这个概念应该塑造字体、调色板、质感和布局。它不应该变成剪贴画或双关语。

用一两行草拟三种真正不同的方向，在概念、字体、色温和布局态度上有所变化。然后选择最符合受众和个性的那个。脑海中浮现的第一个想法通常是最通用的，这就是为什么你要写三个。对照本文档末尾的“什么让网站看起来像是AI制作的”检查所选方向。如果它不过是某种常用调色板加上常规板块，那就再往前推进一步。

选择令人惊叹的瞬间。 问问关于这个项目，唯一最有趣的真实事情是什么，以及首屏如何展示它而不是说出来。写两三个候选瞬间，选择最符合概念并且你能漂亮地执行的那个。阅读 references/motion-and-wow.md 以了解技术菜单和经过验证的配方。然后诚实地问问，看到这个的人会说出“哇”还是“不错”。如果答案是“不错”，那就更大胆些：扩大规模，制造更强的对比，让这个瞬间更有活力。

将方向写入网站根目录下的 DESIGN.md 文件，使用下面的模板。这个文件能保持未来页面和未来会话的一致性。如果 DESIGN.md 已存在，则遵循并扩展它，除非用户要求新的方向。

在选择字体和颜色之前，请阅读 references/typography.md 和 references/color.md。它们包含了能避免常见默认选项的字体搭配和调色板方法。references/layout.md 涵盖了超越“英雄图加三张卡片”的布局方案。

# 设计：<项目>

## 概念
一两句话：这个项目所属的世界以及访客离开时应带有的感觉。

## 受众和首要操作
谁来了，他们需要知道什么，我们希望他们做的一件事。

## 字体
展示字体：<字体族, 字重>，以及原因。正文字体：<字体族, 字重>，以及原因。等宽字体，如果有的话。
比例：基础字号和比例（来自 scripts/scale.mjs）。

## 颜色
角色 -> 值：背景色、表面色、文字色、浅文字色、线条色、强调色、强调色上的文字色、聚焦色。
使用规则（例如“强调色仅用于主要操作和激活状态”）。

## 布局
网格和宽度、板块节奏、整体态度（编辑型、紧凑型、透气型、不对称型……）。

## 标志性动作
人们会记住这个网站的一到两个动作。

## 令人惊叹的瞬间
是什么让人在首屏驻足，以及它如何工作。还要考虑在无JS、减弱动效以及手机上它看起来如何。

## 图像和质感
视觉元素是什么，它们如何制作，考虑到已有的资产。

## 动效
什么在动，如何动，动多少。尊重减弱动效偏好。

## 语气
文案听起来如何；要用的词和要避免的词。

## 备选方案
其他两个方向，每个一行，以便用户可以调整方向。

选择一个方向并构建它。不要停下来让用户在抽象概念中做选择。在交付时列出备选方案，这样他们看到真实页面后可以调整方向。

3. 先写内容

布局跟随内容。围绕Lorem Ipsum设计的布局会产生通用化的方框，而通用的文案即使搭配好的布局，读起来也像模板。在布局之前先写真实的文字：

标题：用朴实的语言说明这是什么，或者访客会有什么变化。具体优于聪明。“预订利兹任何公共网球场馆的场地”优于“让你的比赛更上一层楼。”
使用项目的具体细节：真实的命令、真实的数字、真实的名称、实际的时间和地点。
删掉营销套话：解锁、提升、无缝、赋能、革新、增强、轻松、尖端、强大、利用、改变游戏规则、“将X提升到新水平”、“在当今快节奏的世界”。如果一个句子可能出现在任何网站上，就重写它。
同时避免AI的句式结构和用词。 注意：
- 每个板块标题都基于相同的两拍公式（“一个二进制。选择如何获取它。”，“按原样或按当时状态取回它。”）；
- “没有X。没有Y。只有Z。”；
- 三个一组的形容词；
- 每个标题都有一个双关语。
一个朴实的标签（“安装”，“恢复快照”）通常比一个聪明的句子更有力，它能为那个精心制作的标题留出脱颖而出的空间。
按钮标签说明会发生什么：“下载应用”，“预订餐桌”，“预约维修”，而不是“开始”或“了解更多”。
切勿将虚构的事实呈现为真实情况。 没有编造的价格、地址、营业时间、统计数据、推荐语、客户徽标或“受到10,000个团队信任”。这是用户自己的项目，编造的声明是一种很容易意外发布的责任。当某个板块确实需要你无法获取的事实时，放入一个可见的占位符，例如样式化为醒目样式的 <span class="todo">[价格]</span>，并在交付时列出每一个。

4. 构建

首先是令牌。 在任何组件之前，将系统定义为 styles.css 顶部的CSS自定义属性：颜色角色、类型步长、空间步长、圆角、阴影、文本尺度和动效时序。使用以下命令生成流式类型和空间比例尺度：

node <skill-dir>/scripts/scale.mjs --min-ratio 1.2 --max-ratio 1.333   # 选择适合设计方向的比例

之后，使用令牌而不是硬编码的数字。硬编码的数字会漂移，这种漂移正是让间距看起来到处都略有偏差的原因。

脚本需要 Node 20 或更新版本。如果 node 不在 PATH 中，使用 ~/.cache/killer-skills-node/node.exe 运行它：Windows 安装程序在缺少时会在此处放置Node。

字体。 从killer-skills字体包中自行托管它们，该包包含 references/typography.md 中命名的所有字体：

node <skill-dir>/scripts/fonts.mjs list                       # 字体族及其字重或轴
node <skill-dir>/scripts/fonts.mjs add path/to/site "Newsreader" "IBM Plex Mono" --weights 400,600

add 命令会将文件及其许可证复制到 assets/fonts/ 中，并写入 assets/fonts/fonts.css。在 styles.css 之前链接这个样式表，并且只预加载首屏依赖的字体（脚本会打印这行代码）。它不需要网络，完成的网站不会向字体托管方发出任何请求。如果包未安装或不包含该字体，则按照 references/typography.md 中的描述从 Google Fonts 加载。

文件。 对于新网站，除非项目另有规定：

site/            (或用户/项目希望的任何位置)
  index.html
  styles.css
  DESIGN.md
  icon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, icon-maskable-512.png, manifest.webmanifest
  assets/        (svg, images, fonts/)
  script.js      (令人惊叹的瞬间和小型交互；保持简短)

HTML。 使用语义化的地标元素（header、nav、main、带标题的 section、footer），一个 h1 和按顺序排列的标题。操作使用 <button>，导航使用 <a>，并且每个表单字段都必须有 <label>。每个页面都需要 lang、视口 meta 标签、真实的 <title>、meta 描述、Open Graph 标签以及完整的 favicon 和应用图标集。

CSS。 纯现代CSS，移动优先：

使用 grid 和 flex 进行布局，并采用内在模式，如 repeat(auto-fit, minmax(min(100%, 18rem), 1fr))。
通过 clamp() 实现流体令牌，阅读幅宽大约在 60–70ch。
适合设计的 :focus-visible 样式。悬停效果放在 @media (hover: hover) 内部。
标题使用 text-wrap: balance，段落使用 text-wrap: pretty。
@media (prefers-reduced-motion: reduce)。

JavaScript。 仅在能改善体验的地方使用：令人惊叹的瞬间、指针效果、全屏切换的主题开关、现场演示、移动端导航切换（<button aria-expanded>，或 <details>）。保持原生和手写，放在站点自己的文件中：无框架、无CDN、不从其他地方加载任何内容，通常不超过一百行。将其构建为一种增强。内容必须在没有JS的情况下可见。切勿在等待脚本显示时将部分内容隐藏为 opacity: 0，因为当脚本失败时，内容就消失了。对于CSS能做到的事情，优先使用CSS（如入场、打字效果、滚动驱动场景）。

动效。 其他地方的动效保持快速而安静：150–250ms的悬停和焦点过渡，小型的入场动效。这种平静正是让令人惊叹的瞬间得以发挥作用的要素。每个动画都放在 @media (prefers-reduced-motion: no-preference) 内部或 matchMedia 检查之后，并且减弱动效版本是一个完整的静态设计。配方和性能规则在 references/motion-and-wow.md 中。

Favicon和应用图标。 像设计英雄区一样认真地设计 favicon：它是设计中被看到最多的部分。在16px下，文字标记会变得模糊，因此大多数标记需要为小尺寸提供一个简化版本，比如一个粗体字母或一个形状，放在一个在浅色和深色标签页上都能显示的平铺块上。阅读 references/favicons.md。然后从一个SVG构建整个图标集并进行检查：

node <skill-dir>/scripts/icons.mjs build mark.svg --out path/to/site --bg "#hex" --name "Site" --theme-color "#hex"
node <skill-dir>/scripts/icons.mjs audit path/to/site     # 预览表：1x/2x标签页、浅色/深色、主屏幕

无库存照片时的视觉效果：

软件：用HTML和CSS构建产品的实际界面，例如一个样式化的终端会话，包含真实的命令和输出，或一个包含真实数据的应用窗口。这比任何插图都更有说服力，并且能保持品牌一致性。
排版作为图像：超大标题、数字、拉引文、像印刷卡片一样设置的菜单。
SVG和CSS：几何形状、图表、地图、图表、图案、颗粒纹理（低不透明度的SVG feTurbulence 滤镜）、具有一致笔画宽度的简单内联图标。
警惕手绘真实事物。 食物、人物、动物、植物、建筑和工具是手写SVG最容易失败的地方。比例会漂移，一个细节（面包上的一个切口、高光、一只手）会被解读成其他东西，并且会因错误的原因吸引目光。一个笨拙的插画对页面的伤害比根本没有插画更大。所以：
- 优先选择代码擅长做的事情……

（后续内容省略以保持长度在合理范围内）

杀手级设计