Impeccable — 前端设计技能

Impeccable — 前端设计技能 是做什么的？

设计与迭代生产级前端界面。真正的可运行代码、风格明确的设计选择、卓越的工艺。

基于 pbakaus/impeccable（Apache 2.0 许可），其本身又建立在 Anthropic 的前端设计技能之上。

准备工作

在进行任何设计工作或文件编辑之前：

1. 读取上下文 — 检查项目根目录中是否存在 PRODUCT.md / DESIGN.md。如果 PRODUCT.md 缺失或内容占位（少于 200 个字符），建议用户先运行 impeccable:teach。
2. 识别类型 — 每项设计任务要么是 品牌（营销、着陆页、活动、作品集：设计即产品本身），要么是 产品（应用UI、管理后台、仪表盘、工具：设计服务于产品）。在设计之前进行识别。
3. 加载类型参考 — 根据类型，使用此技能参考文件中的品牌或产品参考。

命令

当用户调用特定的 impeccable 命令时（例如“audit this page”、“polish the checkout”），请遵循模式：impeccable:<命令> [目标]。每条命令都在此技能的参考目录中有一个对应的参考文件。

命令	类别	描述
impeccable:craft [特性]	构建	完整的形塑-然后-构建流程，包含视觉迭代
impeccable:teach	构建	一次性设置：收集设计上下文，编写 PRODUCT.md 和 DESIGN.md
impeccable:document	构建	从现有项目代码生成 DESIGN.md
impeccable:extract [目标]	构建	将可复用组件和设计令牌提取到设计系统中
impeccable:shape [特性]	构建	在编写代码之前规划UX/UI
impeccable:critique [目标]	评估	UX设计评审：层级、清晰度、情感共鸣
impeccable:audit [目标]	评估	运行技术质量检查（无障碍、性能、响应式）
impeccable:polish [目标]	优化	最终检查、设计系统对齐与发布就绪
impeccable:bolder [目标]	优化	放大平淡的设计
impeccable:quieter [目标]	优化	调低过于大胆的设计
impeccable:distill [目标]	优化	剥离至本质
impeccable:harden [目标]	优化	错误处理、国际化、文本溢、边界情况
impeccable:onboard [目标]	优化	首次运行流程、空状态、激活路径
impeccable:animate [目标]	增强	添加有意义的动效
impeccable:colorize [目标]	增强	引入战略性色彩
impeccable:typeset [目标]	增强	修正字体选择、层级、字号
impeccable:layout [目标]	增强	修正布局、间距、视觉韵律
impeccable:delight [目标]	增强	添加愉悦瞬间
impeccable:overdrive [目标]	增强	添加技术上令人惊叹的效果
impeccable:clarify [目标]	修复	改进不清晰的UX文案
impeccable:adapt [目标]	修复	适配不同设备
impeccable:optimize [目标]	修复	性能改进
impeccable:live	迭代	视觉变体模式：在浏览器中迭代元素

路由

• 未指定目标：按类别分组渲染命令表格，询问用户想要做什么。
• 命令匹配：从本技能的 reference/ 目录加载其参考文件，并按照其指示操作。
• 未匹配但与设计相关：直接应用共享的设计法则和类型参考。

共享设计法则

适用于所有设计，无论哪种类型。确保实现复杂度与审美愿景相匹配。在不同项目间有所变化；切勿总是收敛于相同的选择。

色彩

• 使用 OKLCH。当明度接近 0 或 100 时降低色度；极端明度下高色度会显得刺眼。
• 绝不要使用 #000 或 #fff。将每个中性色向品牌色相轻微着色（色度 0.005–0.01 就足够）。
• 在选择颜色之前先确定色彩策略。在承诺轴上有四个步骤：
  • 克制型：轻微着色的中性色 + 一个强调色 ≤10%。产品默认；品牌极简主义。
  • 承诺型：一种饱和色占据 30–60% 的表面。身份驱动页面的品牌默认。
  • 完整调色板：3–4 个命名的角色，每个都有目的地使用。品牌活动；产品数据可视化。
  • 浸染型：表面本身就是颜色。品牌主推、活动页面。
• “一个强调色 ≤10%”规则仅适用于克制型。承诺型 / 完整调色板 / 浸染型会故意超出此限制。

主题

深色与浅色不能是默认选项。不能因为“工具用深色看起来酷”而选择深色。不能为了“安全”而选择浅色。

在选择之前，写一句具体的场景描述：谁在用这个，在哪里，在什么环境光下，处于什么心情。如果这句话不能直接得出答案，说明描述还不够具体。添加细节直到它能给出明确答案。

“可观测性仪表盘”不足以得出答案。“SRE 在凌晨2点昏暗的房间里，在27英寸显示器上瞥一眼事件严重程度”则可以。

排版

• 正文行长度限制在 65–75 个字符。
• 通过字号与字重对比（相邻层级之间比例 ≥1.25）来建立层级。避免扁平化的字号比例。

布局

• 变化间距以创造韵律。所有地方使用相同的间距会造成单调。
• 卡片是偷懒的答案。只有真正是最佳交互载体时才使用它们。嵌套卡片始终是错误的。
• 不要把所有东西都包在一个容器里。大多数东西不需要容器。

动效

• 不要对 CSS 布局属性进行动画。
• 使用指数曲线缓出（ease-out-quart / quint / expo）。不要使用弹跳或弹性效果。

绝对禁止（反模式）

识别并拒绝。如果你即将写出以下任何模式，请改用不同的结构。

• 侧条纹边框。 在卡片、列表项、标注或提示上使用超过1px的 border-left 或 border-right 作为彩色强调。请使用完整边框、背景色调、引导数字/图标，或者干脆不用。
• 渐变文字。 使用 background-clip: text 配合渐变。装饰性，毫无意义。请使用单一实色。通过字重或字号来强调。
• 默认使用玻璃态效果。 装饰性地使用模糊和玻璃卡片。仅在少数且有目的的情况下使用，否则不用。
• 英雄指标模板。 大数字、小标签、支撑性统计指标、渐变强调。SaaS 陈词滥调。
• 相同的卡片网格。 相同大小的卡片，带有图标 + 标题 + 文本，无休止地重复。
• 将模态框作为首选。 模态框通常是懒惰的体现。请先用尽内联/渐进式替代方案。

文案

• 每个词都要有其价值。不要重复标题，不要有重复标题的介绍性文字。
• 不要使用长破折号。 请使用逗号、冒号、分号、句号或括号。

AI 俗套测试

如果别人看到这个界面可以不假思索地说“这是AI做的”，那它就失败了。

类别反射检查 — 两个层次：

• 第一层： 如果有人仅凭类别就能猜出主题+调色板（“可观测性 → 深蓝色”、“医疗健康 → 白色+青色”、“金融 → 深蓝+金色”、“加密货币 → 霓虹黑”），那就是训练数据的条件反射。重新审视场景描述和色彩策略，直到答案不能从领域直接得出。
• 第二层： 如果有人能通过“类别+反参考”猜出美学家族（“‘不是SaaS奶白色的AI工作流工具’ → 编辑排版风格”、“‘不是深蓝金色的金融科技’ → 终端原生暗色模式”），那就落入了更深一层的陷阱。第一层条件反射被避免了，但第二层没有。重新设计，直到两个层次的答案都不显而易见。

参考文件

本技能 reference/ 目录下提供了每条命令和设计领域的详细参考文件。使用 skill_view(name='impeccable', file_path='reference/<name>.md') 加载它们。

关键设计领域参考（用于深入探究）：

• reference/brand.md — 品牌类型：营销、着陆页、活动页面
• reference/product.md — 产品类型：应用 UI、仪表盘、工具
• reference/typography.md — 字体系统、字体搭配、模块化比例、OpenType
• reference/color-and-contrast.md — OKLCH、着色中性色、暗色模式、无障碍
• reference/spatial-design.md — 间距系统、网格、视觉层级
• reference/motion-design.md — 缓动曲线、交错动画、减少动效
• reference/interaction-design.md — 表单、焦点状态、加载模式
• reference/responsive-design.md — 移动优先、流式设计、容器查询
• reference/ux-writing.md — 按钮标签、错误消息、空状态
• reference/cognitive-load.md — 减少界面中的认知负担
• reference/heuristics-scoring.md — 尼尔森风格启发式评估规则

命令特定参考（匹配命令时加载）：

• reference/craft.md — 完整的形塑-然后-构建流程
• reference/shape.md — 编码前的UX/UI规划
• reference/teach.md — 设置 PRODUCT.md 和 DESIGN.md
• reference/document.md — 从现有代码生成 DESIGN.md
• reference/extract.md — 将设计令牌提取到设计系统中
• reference/critique.md — UX设计评审
• reference/audit.md — 技术质量检查
• reference/polish.md — 最终质量检查
• reference/bolder.md — 放大安全的设计
• reference/quieter.md — 调低调噪的设计
• reference/distill.md — 剥离至本质
• reference/harden.md — 生产就绪
• reference/onboard.md — 首次运行流程和空状态
• reference/animate.md — 有意义的动画
• reference/colorize.md — 战略性色彩引入
• reference/typeset.md — 排版修正
• reference/layout.md — 布局和间距修正
• reference/delight.md — 个性和令人难忘的触动
• reference/overdrive.md — 突破传统限制
• reference/clarify.md — UX文字改进
• reference/adapt.md — 设备适配
• reference/optimize.md — UI性能
• reference/live.md — 浏览器变体迭代

CLI 工具

Impeccable 还附带一个独立的 CLI，用于在没有 AI 环境的情况下检测 UI 反模式：

npx impeccable detect src/                   # 扫描目录
npx impeccable detect index.html             # 扫描 HTML 文件
npx impeccable detect https://example.com    # 扫描 URL（需要 Puppeteer）
npx impeccable detect --fast --json .        # 仅使用正则表达式，输出 JSON

扫描 HTML、CSS、JSX、TSX、Vue、Svelte 文件中的 25+ 种反模式。退出码 0 = 干净，2 = 发现问题。需要 Node.js 18+。

来源

原始仓库：github.com/pbakaus/impeccable 网站：impeccable.style