awwwards

你即将打造一件出色的作品。标准是 Awwwards 级别的匠心——让人截图分享的页面，而不只是能正常运行的页面。本技能将整个 Switchyard 前端技术栈编排成一条严谨的流水线。

不要把它当成一份要赶着完成的清单。每个阶段都承重。跳过设计简报 = 作品平庸。跳过配色阶段 = 调色板不对。跳过验证 = 把“在我的机器上能运行”交付给付费客户。

---

何时触发

技能说明会处理触发条件。在技能内部，你的任务是坚定遵循标准并运行整条流水线。

如果需求确实只是实用功能（内部管理、CRUD 表单、错误修复），请停止并告知用户，这项技能大材小用——建议改用 frontend-design 或 impeccable。不要把精英级流水线浪费在设置页面上。

---

技术栈（及运行顺序）

阶段	技能 / 工具	产出
1. 设计简报	（本技能）	美学方向、风格基调、成功标准
2. 配色	color-palette-extractor 或 color-expert	OKLCH 令牌、命名角色、承诺级别
3. 灵感	ui-ux-pro-max:ui-ux-pro-max + mcp__magic__21st_magic_component_inspiration	参考组件、模式、反模式
4. 构图	frontend-design	大胆且坚定的布局，并有清晰的概念方向
5. 动效校准	design-motion-principles	三个维度的决策：克制 / 精修 / 趣味
6. 实现	（本技能，见下方架构）	使用 Framer Motion + anime.js + Three.js + 21st.dev 组件实现的可运行代码
7. 视频（如适用）	remotion-best-practices	Remotion 构图、字幕、主视觉循环
8. 润色与审查	impeccable	克制处理、层级、边缘情况、无障碍
9. 验证	agent-browser	真实浏览器截图、视口检查、交互测试

硬性规则： 任何精英级构建都必须完成阶段 1、2、4、6、8、9。如果你还没有明确的参考方向，阶段 3 也必须完成。只要添加一个过渡效果，阶段 5 就必须完成。阶段 7 仅适用于视频交付物。

---

阶段 1 — 设计简报

打开编辑器之前，先敲定设计简报。可以向用户了解，也可以自行确定答案并提交确认：

• 目的与受众——各用一句话说明。“谁会截图分享，为什么。”
• 风格基调——选择一种：品牌（设计本身就是产品：营销、着陆页、主视觉、作品集）或产品（设计服务于产品：仪表板、应用、工具）。这将决定后续构建路线。
• 美学方向——选择一种极端风格并贯彻到底：极致极简、极繁混沌、复古未来主义、有机自然、奢华编辑风、玩具般俏皮、装饰艺术、工业粗野主义、柔和粉彩等。平庸的中庸之道是敌人。
• 令人难忘的元素——别人会记住的那一个元素是什么？虹彩 3D 物体？由速度驱动的跑马灯？滚动锁定的色彩变化？现在就说出来。
• 限制条件——框架（单页 HTML、Next.js 或 Remotion）、性能预算、无障碍底线、视口支持范围。

将这些内容写成一份简短的设计简报，并在进入阶段 2 前与用户确认。如果当前项目存在 ~/CLAUDE.md 或项目级 PRODUCT.md（例如 Switchyard Web 的 Railyard 美学），设计简报应继承其中的设定——不要另起炉灶。

---

阶段 2 — 调色板

分支 A — 设计面向真实客户端 / 现有品牌：

• 使用 color-palette-extractor，通过无头浏览器截图从客户端的线上网站提取配色。绝不要为付费客户端凭空猜测所谓「得体」的颜色。
• 如果没有线上网站，请向 Sam 索取品牌素材或参考网址。

分支 B — 原创创作：

• 使用 color-expert 创作调色板。明确选择一种承诺程度（impeccable 分类法）：
  • 克制 — 染色中性色 + 一种占比 ≤10% 的强调色。产品默认选项。
  • 坚定 — 一种高饱和颜色占据 30–60% 的表面。
  • 完整调色板 — 3–4 种明确命名的角色色，每种都经过精心设计。
  • 浸染 — 表面本身就是颜色。

**两个分支都适用：**输出 OKLCH 值，而非 hex。绝不要使用 #000 或 #fff——将每种中性色都染上品牌色相（色度 0.005–0.01）。明度接近 0 或 100 时，降低色度。

将最终设计令牌保存为 CSS 变量（--bg、--ink、--accent 等），并在所有地方复用。不要硬编码重复值。

---

阶段 3 — 灵感

搜索组件模式时：

1. ui-ux-pro-max:ui-ux-pro-max — 加载设计智能库。提取相关风格（玻璃拟态 / 粗野主义 / Bento 等）、相匹配的字体组合、适用于组件类型的 UX 指南，以及数据可视化涉及的图表技术栈。
2. mcp__magic__21st_magic_component_inspiration — 搜索具体的组件类型（「带 3D 对象的主视觉区」「速度感跑马灯」「Bento 网格」「审计图钉提示框」）。提取 2–4 个参考案例。
3. mcp__magic__21st_magic_component_builder — 如果找到完全契合的 21st.dev 模式，就通过 Magic 生成组件代码，而不是从头重写。
4. mcp__magic__logo_search — 如果需要真实品牌徽标（用户评价、集成网格），请正确获取。绝不要伪造徽标。

灵感是起点，而非终点。始终进行改编，绝不照搬。

---

阶段 4 — 构图

运用 frontend-design 的原则进行整体构图：

• **排版：**将风格鲜明的展示字体与精致的正文字体搭配。绝不用 Inter、Roboto、Arial、系统字体。绝不要想当然地使用 Space Grotesk（它是 AI 滥用的默认选择）。
• **颜色：**应用阶段 2 的调色板，并遵循选定的承诺程度。大胆的主色搭配鲜明的强调色，胜过怯懦的平均分配。
• **布局：**出人意料。不对称。重叠。斜向流动。打破网格。选择充裕的留白或受控的密集布局，并贯彻到底。
• **背景：**渐变网格、噪点纹理、几何图案、分层透明效果、戏剧性阴影、自定义光标、颗粒叠加。除非美学风格明确要求，否则不要默认使用纯色背景。

绝不要产出 AI 千篇一律的设计：白底紫色渐变、通用字体、可预测的布局、模板化组件。

---

阶段 5 — 动效校准

运用 design-motion-principles，并选择一种视角：

• 克制（Emil） — 即时、近乎不可察觉的动效。弹簧过冲极小。适用于工具和产品 UI，动效不得打断任务流程。
• 精致（Krehel） — 编排有序、节奏沉稳，并采用精心设计的缓动曲线。高端品牌和落地页的默认选择。
• 玩趣（Jhey） — 弹跳感、表现力、角色鲜明。适用于作品集、创意作品，以及个性比速度更重要的场景。

每个界面区域选择一种视角并贯彻到底。在同一个区块内混用不同视角，会显得犹豫不决。

---

阶段 6 — 实现（经过验证的方案）

有三个架构分支。动笔之前先做选择。

分支 A — 单个 HTML 文件，无需构建步骤

Switchyard 展示页面、演示、客户提案和内部产物的标志性方案。几秒内即可加载，无需工具链，部署毫无阻碍。参考： reference/architecture-single-html.md。

关键做法：

• 使用 ES 模块导入映射，从 esm.sh 加载 react、react-dom、framer-motion、three、htm、animejs
• 通过 htm 标签模板使用无需 Babel 的 JSX
• 使用第 2 阶段的 OKLCH 令牌编写原生 CSS
• 在其他部分均为原生实现的页面中，用 React 小岛实现交互部分

分支 B — Next.js / 生产框架

当构建产物将部署到 ~/switchyard/web 或其他应用时使用。平台层使用 vercel:nextjs、vercel:shadcn、vercel:next-cache-components。编码前仍须应用此技能的第 1–5 阶段。

分支 C — Remotion 视频

适用于动态图形、品牌片头和演示短片。先交由 remotion-best-practices 处理合成规则，然后回到此处，通过 switchyard-video 完成音频和交付环节。

动效库对照表

工具	用途
Framer Motion	React 组件动效、布局过渡、useScroll/useVelocity/useTransform/useSpring/useMotionValue/useAnimationFrame。速度驱动的跑马灯。鼠标倾斜 3D 卡片。布局编排。
anime.js	特定效果——数字计数器（通过 easing: 'easeOutCubic' 实现递增）、文字扰动、交错脉冲、SVG 路径变形。
Three.js	Hero 3D 对象。使用 MeshPhysicalMaterial（虹彩效果、透明涂层）。通过 CanvasTexture 渐变和 PMREMGenerator 创建程序化环境贴图。使用 CylinderGeometry + CanvasTexture + FrontSide 制作真实 3D 环绕文字（自动剔除背面）。
纯 CSS	静态装饰、悬停微交互、通过 animation-delay 实现页面加载交错效果。优先尝试。

详细模式见 reference/motion-recipes.md。

已知陷阱（之前遇到过的问题）

1. 斜体渐变 + 字符拆分 = 文字不可见。 子元素会从父元素继承 color: transparent，但自身没有背景。修复方法：将渐变斜体渲染为单个 motion.span，不要拆分字符。
2. 在辅助函数中调用 Hook = 违反 hooks 规则。 将任何调用 useMotionValue/useSpring 的辅助函数提升为独立组件（例如 MagneticCTA）。
3. PowerShell + 不带 BOM 的 UTF-8 = 解析器损坏。 为 Sam 的环境编写 .ps1 文件时，请仅使用 ASCII，或用 -Encoding utf8 重新保存。参见 [[powershell-tool-quirks]] 记忆。
4. React style={{}} 中的 CSS 自定义属性可正常使用，即使类型定义会报错。style={{ '--accent': value }} 是有效的。

完整列表：reference/gotchas.md。

---

第 7 阶段 — 视频（如适用）

如果交付内容包含动态图形：

• 使用 remotion-best-practices 处理合成结构
• 使用 switchyard-video 完成端到端制作（简报 → 渲染 → 社交媒体剪辑）
• 默认使用免费素材和免费层级服务。未经 Sam 事先同意，绝不自动使用 fal-ai 或付费 TTS 服务。

---

第 8 阶段 — 润色与审查

将完成的产物交给 impeccable 做最终检查：

• impeccable audit — 检查克制程度、层级、对比度和边缘情况
• impeccable shape — 如果某个部分需要结构性调整
• impeccable live — 针对特定元素进行实时浏览器迭代

审查范围包括：视觉层级、认知负荷、无障碍性（对比度、触控目标尺寸 ≥44px、焦点环、动效含义）、所有视口下的响应式表现、错误状态、边缘情况和文案精确度。

---

阶段 9 — 验证

使用 agent-browser：

1. 在真实浏览器中打开构建产物
2. 在 320 / 768 / 1280 / 1920 视口下截图
3. 依次按 Tab，验证焦点顺序和键盘无障碍性
4. 悬停/点击每个交互元素，验证动效是否触发
5. 限制网络/CPU，确认在较慢的硬件上动效依然从容自然

类型检查和测试套件验证的是代码正确性，而不是功能正确性。 如果无法在浏览器中打开，请明确说明，而不是声称验证成功。

---

反模式（自动拒绝）

• Inter / Roboto / Arial / 通用系统字体
• 白色背景上的紫色渐变
• 不假思索地使用 Space Grotesk
• 居中且间距均匀的首屏，只有一个标题 + 一个副标题 + 一个按钮（“AI 垃圾风格落地页”）
• 均匀、畏缩的配色分布
• 当美学风格可以营造纵深感时，却使用扁平纯色背景
• 无法强化含义的动画（ui-ux-pro-max 的动效含义规则）
• 虚假用户评价、虚假 Logo、虚假指标
• 面向 Switchyard 的文案中承诺交付时间（~/CLAUDE.md 中的硬性规则）
• 使用“比其他代理商便宜”之类的定价措辞——改用 “没有代理商管理成本——相同的工作，不收取办公室和客户经理费用”

---

输出检查清单（宣布完成前）

• 已撰写并确认简报
• 调色板采用 OKLCH，以 CSS 变量形式定义，且无重复的十六进制值
• 字体具有鲜明特色（不是 Inter / Roboto / Arial）
• 存在一个令人难忘且有效的元素
• 动效风格（克制 / 精致 / 趣味）在每个界面内保持一致
• 所有 Framer Motion / anime.js / Three.js 的用法均符合上述矩阵
• 已检查所有注意事项（斜体渐变、辅助函数中的 hooks、CSS vars）
• 已通过 impeccable audit 审核
• 已完成 agent-browser 的 4 种视口验证
• 不存在 AI 垃圾风格反模式
• 不存在本应使用设计令牌却硬编码的值
• 如果是客户项目：调色板取自客户真实网站（而非凭空设计）
• 如果是 Switchyard 项目：遵守 Railyard 规则（钠琥珀色用作信号而非填充色，首屏 h1 锁定，不承诺时间，不说“客户拥有代码”）

---

快速参考 — 规范参考构建

Sam 的 ~/skills-showcase/index.html（构建于 2026-05-16）是本技术栈中“绝对顶尖”水准的规范参考。如有疑问，请参照其设计选择：

• 首屏：虹彩 Three.js 二十面体 + 两条环绕的文字环 + 磁吸式 CTA + anime.js 数字计数器
• 区块之间使用速度滚动字幕（Framer Motion useVelocity + useSpring + useTransform）
• Bento 网格搭配 3D 鼠标倾斜卡片
• 并排展示克制 / 精致 / 趣味的镜头实验室
• UI 审核展示区，使用悬停提示标记引用具体的 ui-ux-pro-max 规则

该文件就是标准。新构建如果没有达到至少同等精致的水准，就不算完成。