impeccable

Impeccable — 前端设计技能

设计并迭代可投入生产的前端界面。编写真正可用的代码，做出坚定的设计选择，追求卓越的工艺。

基于 pbakaus/impeccable（Apache 2.0），该项目以 Anthropic 的前端设计技能为基础。

设置

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

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

命令

当用户调用特定的 impeccable 命令（例如“审核此页面”“润色结账流程”）时，遵循以下模式：impeccable:<command> [target]。此技能的参考目录中为每个命令提供了一个参考文件。

命令	类别	描述
impeccable:craft [feature]	构建	通过视觉迭代，完整执行先塑造后构建的流程
impeccable:teach	构建	一次性设置：收集设计上下文，编写 PRODUCT.md 和 DESIGN.md
impeccable:document	构建	根据现有项目代码生成 DESIGN.md
impeccable:extract [target]	构建	提取可复用组件和设计令牌，纳入设计系统
impeccable:shape [feature]	构建	编写代码前规划 UX/UI
impeccable:critique [target]	评估	UX 设计评审：层级、清晰度、情感共鸣
impeccable:audit [target]	评估	执行技术质量检查（无障碍、性能、响应式）
impeccable:polish [target]	优化	最终检查、与设计系统保持一致，并确认已做好发布准备
impeccable:bolder [target]	优化	强化平淡的设计
impeccable:quieter [target]	优化	收敛过于大胆的设计
impeccable:distill [target]	优化	化繁为简，提炼精髓
impeccable:harden [target]	优化	处理错误、国际化、文本溢出和边缘情况
impeccable:onboard [target]	优化	首次使用流程、空状态和激活路径
impeccable:animate [target]	增强	添加有目的的动效
impeccable:colorize [target]	增强	策略性地引入色彩
impeccable:typeset [target]	增强	调整字体选择、层级和字号
impeccable:layout [target]	增强	调整布局、间距和视觉节奏
impeccable:delight [target]	增强	添加令人愉悦的瞬间
impeccable:overdrive [target]	增强	添加技术上非凡的效果
impeccable:clarify [target]	修复	改进含糊不清的 UX 文案
impeccable:adapt [target]	修复	适配不同设备
impeccable:optimize [target]	修复	提升性能
impeccable:live	迭代	视觉变体模式：在浏览器中迭代界面元素

路由

• 未指定目标：按类别展示命令表，并询问用户想做什么。
• 匹配到命令：从此技能的 reference/ 目录加载相应参考文件，并遵循其中的说明。
• 未匹配到命令，但与设计相关：直接应用通用设计法则和相应类型的参考内容。

通用设计法则

适用于所有设计，涵盖两种类型。让实现复杂度与美学构想相匹配。不同项目采用不同方案；切勿趋同于相同的设计选择。

色彩

• 使用 OKLCH。随着明度接近 0 或 100，降低色度；极端明度下的高色度会显得刺眼。
• 绝不使用 #000 或 #fff。让所有中性色都带有品牌色相倾向（色度 0.005–0.01 就足够）。
• 选色前先确定色彩策略。承诺程度分为四个层级：
  • 克制：带色调的中性色 + 一种占比不超过 10% 的强调色。产品默认方案；适合极简品牌。
  • 鲜明：一种饱和色覆盖 30–60% 的表面。身份驱动型页面的品牌默认方案。
  • 完整调色板：3–4 种命名色彩角色，各自经过审慎使用。适合品牌营销活动；产品数据可视化。
  • 浓染：表面本身就是颜色。适合品牌主视觉、营销活动页面。
• “一种强调色占比不超过 10%”的规则仅适用于克制策略。鲜明、完整调色板和浓染策略有意超出这一比例。

主题

深色还是浅色，绝不是默认选择。不要因为“工具用深色看起来很酷”就选深色，也不要因为“浅色更稳妥”就选浅色。

选择前，先用一句话描述具体场景：谁在什么地方、什么环境光线下、以什么心情使用。如果这句话不能明确指向答案，就说明场景还不够具体。继续补充细节，直到答案明确为止。

“可观测性仪表板”无法明确指向答案。“凌晨 2 点，SRE 在昏暗房间里用 27 英寸显示器查看事件严重程度”则可以。

字体排印

• 正文每行长度限制在 65–75ch。
• 通过字号变化和字重对比建立层级（相邻层级的比例 ≥1.25）。避免扁平的字号层级。

布局

• 用不同的间距营造节奏。到处使用相同的内边距会显得单调。
• 卡片是偷懒的答案。只有在确实最适合当前场景时才使用。嵌套卡片永远是错误的。
• 不要把所有内容都包在容器里。大多数内容不需要容器。

动效

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

绝对禁用（反模式）

识别并拒绝。如果你正要写出以下任何一种做法，请改用不同的结构。

• 侧边条纹边框。 在卡片、列表项、提示框或警报上，将宽度大于 1px 的 border-left 或 border-right 用作彩色强调。请改用完整边框、背景色调、前置数字或图标，或者干脆不加。
• 渐变文字。 使用 background-clip: text 和渐变。它只是装饰，毫无意义。请使用单一纯色，并通过字重或字号强调。
• 默认使用玻璃拟态。 装饰性地使用模糊效果和玻璃卡片。应少用且有明确目的，否则就不要用。
• 主视觉指标模板。 大数字、小标签、辅助统计数据、渐变强调。这是 SaaS 陈词滥调。
• 千篇一律的卡片网格。 尺寸相同的卡片，反复堆叠图标、标题和文本。
• 第一反应就是使用模态框。 模态框通常是偷懒的做法。先穷尽行内和渐进式替代方案。

文案

• 每个字都要有存在的理由。不要重复标题，也不要用重复标题的引言开场。
• 不要使用 em dash。 请使用逗号、冒号、分号、句号或括号。

AI 味测试

如果有人看着这个界面，毫不犹豫地说“这是 AI 做的”，那它就失败了。

类别反射检查，分两个层次：

• 第一层： 如果有人只凭类别就能猜出主题和配色（“可观测性 → 深蓝色”、“医疗保健 → 白色 + 青绿色”、“金融 → 海军蓝 + 金色”、“加密货币 → 黑底霓虹色”），这就是训练数据带来的条件反射。重新设计场景描述和色彩策略，直到答案无法仅凭领域猜出。
• 第二层： 如果有人能根据类别和反面参考猜出美学风格（“不是 SaaS 奶油色调的 AI 工作流工具 → 编辑式排印”、“不是海军蓝配金色的金融科技 → 原生终端深色模式”），这就是更深一层的陷阱。你避开了第一层反射，却没避开第二层。继续调整，直到两种答案都无法轻易猜出。

参考文件

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

主要设计领域参考（深入了解时加载）：

• reference/brand.md — 品牌语调：营销、落地页、活动页面
• reference/product.md — 产品语调：应用界面、仪表板、工具
• 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 — Nielsen 风格的启发式评估标准

特定命令的参考（执行对应命令时加载）：

• 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/                   # scan a directory
npx impeccable detect index.html             # scan an HTML file
npx impeccable detect https://example.com    # scan a URL (requires Puppeteer)
npx impeccable detect --fast --json .        # regex-only, JSON output

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

来源

原始项目：github.com/pbakaus/impeccable 网站：impeccable.style