--- name: impeccable description: "当用户需要设计、重新设计、塑形、评审、审计、打磨、澄清、精简、加固、优化、适配、添加动效、配色、提取或改进前端界面时使用。涵盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置页、引导流程和空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、无障碍、性能、响应式行为、主题、反模式、排版、字体、间距、布局、对齐、色彩、动效、微交互、UX 文案、错误状态、边界情况、国际化及可复用设计系统或令牌。也适用于需要放大或收敛的平淡设计、浏览器实时迭代、或追求技术惊艳效果的设计。不适用于后端或非 UI 任务。" version: 3.5.0 user-invocable: true argument-hint: "[craft|shape · audit|critique · animate|bolder|colorize|delight|layout|overdrive|quieter|typeset · adapt|clarify|distill · harden|onboard|optimize|polish · init|document|extract|live] [target]" license: Apache 2.0 allowed-tools: - Bash(npx impeccable *) --- 设计和迭代生产级前端界面。真正的可运行代码，明确的设计决策，卓越的工艺。 ## 设置在继续之前，必须执行以下步骤： 1. 每次会话运行一次 `node .workbuddy/skills/impeccable/scripts/context.mjs`。如果已经看到输出，不要重复运行。该脚本会输出项目的 PRODUCT.md（及 DESIGN.md，如存在），或告知缺失。按输出指示操作。**如果报告 `NO_PRODUCT_MD`，停止并按 `.workbuddy/skills/impeccable/reference/init.md` 执行。** 如果输出以 `UPDATE_AVAILABLE` 指令结尾，遵循它（询问用户一次是否更新，然后继续）。它不会阻塞当前任务。 2. 如果用户调用了子命令（`craft`、`shape`、`audit`、`polish` 等），必须读取 `reference/.md`。不可跳过。参考文件定义了命令的执行流程，缺少它会遗漏用户期望的步骤。 3. 熟悉代码中已有的设计系统、约定和组件。至少读取一个项目文件（CSS / tokens / theme / 代表性组件或页面）。**即使在第 2 步加载了子命令参考，此步仍必须执行。** 不要重新发明轮子；已有的东西能用就用，当 UX 收益明确时才偏离。 4. 读取匹配的注册参考。**不可跳过；跳过会产生通用化的输出。** 如果项目是市场营销、落地页、活动、长文内容或作品集（设计即产品），读取 `reference/brand.md`。如果是应用 UI、管理后台、仪表盘或工具（设计服务于产品），读取 `reference/product.md`。按以下优先级选择：（1）任务线索（"落地页" vs "仪表盘"）；（2）当前界面（页面、文件或路由）；（3）PRODUCT.md 中的 `register` 字段。 5. **如果是全新项目（第 3 步未找到 CSS tokens / theme / 已提交的品牌色）**，运行 `node .workbuddy/skills/impeccable/scripts/palette.mjs` 获取品牌种子色和配色指南。这是主品牌色的锚点。按脚本指示围绕它组成其余调色板（背景、表面、墨色、强调色、柔和色）。全程使用 OKLCH。**仅当第 3 步在已有 tokens 中找到已提交的品牌色时跳过此步；此时保持品牌一致性优先。** ## 设计指南产出立即可交付的生产级代码，而非原型或起点。除非用户要求（不确定时先问），不做任何妥协。不要停止，直到完整的实现达成（美观、响应式、快速、精确、无 Bug、符合品牌）。认真对待每一个细节：每个页面、区域或组件都使用可用工具（浏览器截图、计算机使用等）进行了实战测试。Claude 有能力做出非凡作品。不要保留。 ### 通用规则 #### 色彩 - **验证对比度。** 正文字体必须 ≥ 4.5:1 对比于背景；大号文字（≥18px 或粗体 ≥14px）需要 ≥ 3:1。占位符文字同样需要 4.5:1，而非默认的柔和灰。最常见的失败：在接近白色的浅色背景上使用柔和灰。如果对比度接近临界值，将文字色向色阶的墨色端移动；浅灰色"为了优雅"是 AI 设计难以阅读的最大原因。 - 彩色背景上的灰色文字会显得褪色。使用背景色本身色调的更暗变体，或文字色的透明版。 #### 排版 - 正文行长度限制在 65–75ch。 - 通过字号 + 字重对比建立层次（步间比例 ≥ 1.25）。避免扁平比例。 - 字体家族限制在 3 种以内（展示 + 正文 + 可选等宽）。超过 3 种显得犹豫不决，而非丰富。一个调校得当的家族配合字重对比通常优于三种竞争的字体。 - 不要搭配相似但不完全相同的字体（两种几何无衬线、两种人文无衬线）。在对比轴上配对（衬线 + 无衬线、几何 + 人文），或使用同一家族的多字重。 - 正文不要全大写。全大写的句子在正文尺寸下不可读。 - Hero / 展示标题上限：`clamp()` 最大值 ≤ 6rem（~96px）。超出此范围，页面不是在设计，而是在喊叫。 - 展示标题字间距下限：≥ -0.04em。再紧字母就会粘连；这显得拥挤而非"有设计感"。 - 在 h1–h3 上使用 `text-wrap: balance` 以获得均匀的行长；在长篇散文中使用 `text-wrap: pretty` 以减少孤行。 #### 布局 - 变化间距以创造节奏。 - 卡片是偷懒的答案。仅在它们确实是最佳示意对象时使用。卡片嵌套永远是错的。 - 一维用 Flexbox，二维用 Grid。不要在用 `flex-wrap` 更简单的场景默认用 Grid。 - 无断点的响应式网格：`repeat(auto-fit, minmax(280px, 1fr))`。 - 建立语义化的 z-index 层级（下拉框 → 粘性 → 模态遮罩 → 模态 → 提示 → 工具提示）。绝不用 999 或 9999 这样的随机值。 #### 动效 - 动效应本意明确，不应是事后补充。将其视为构建的一部分。 - 除非确有必要，不要动画 CSS 布局属性。 - 使用指数曲线缓出（ease-out-quart / quint / expo）。不要弹跳或弹性效果。 - 进阶动效需求使用库（如 motion、gsap、anime.js、lenis 等）。 - 减少动效不是可选项。每个动画都需要一个 `@media (prefers-reduced-motion: reduce)` 替代方案：通常是交叉淡入淡出或即时过渡。 - 列表内的逐项错开是合理的。问题是千篇一律的反射（每个区域使用相同的入场效果），而非动效本身；每个展示应匹配它所展示的内容。禁止反射永远不是发布一个完全没有动效的页面的理由。 - 揭示动画必须增强已可见的默认状态。不要将内容可见性绑定在类触发过渡上；过渡在隐藏标签页和无头渲染器中会暂停，导致揭示从未触发，区域变为空白。 - 高级动效素材不仅限于 transform/opacity。模糊、backdrop-filter、clip-path、mask 和阴影/发光在能够实质性改善效果并保持流畅平滑时，都是调色板的一部分。 #### 交互 - 放置在 `overflow: hidden` 或 `overflow: auto` 容器内的 `position: absolute` 下拉框会被裁剪。使用原生 `