跳转到使用指南
impeccable作者 Paul Bakaus

Impeccable Skill.

Claude Code 和 Codex 的设计评审 skill:一个集设计、批评、审计、打磨、动画和界面优化于一体的 skill。

  • Design Review & Accessibility
  • UI 代码
pbakaus/impeccable · plugin/skills/impeccable/SKILL.mdSKILL.md
--- name: impeccable description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, … --- ## Setup ## How to design ## Modes ## Commands
从上游文件读取的前置内容和章节标题,2026-09-14 · 完整内容 11,912 字符

01 功能说明

impeccable skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

Impeccable 通过设计、批判、审查、打磨、动效和优化来改造前端界面。它涵盖网站、落地页、仪表盘、产品 UI、组件、表单、设置、引导流程和空状态——处理 UX 审查、视觉层级、可访问性、性能、响应式行为、主题、字体、间距、布局、色彩、动效、微交互和设计系统。

该 skill 通过生产级代码、极致创意、清晰的观点和卓越的工艺,交付超出常规分布的作品。它围绕四种模式——Persuade、Operate、Read、Experience——以及二十多个专用命令来组织工作。每个会话通过启动脚本加载产品上下文、视觉世界与界面 brief,随后遵循特定命令的操作手册与工艺质量底线。

它产出什么

  • 通过 init 命令捕获持久产品上下文的 PRODUCT.md
  • 通过 document 命令从现有项目代码生成的 DESIGN.md
  • 通过 extract 命令提取到设计系统中的可复用 token 与组件
  • 具有完整交付物、极致创意与卓越工艺的生产级 UI 代码
查看示例提示词 ↗

工作方式

  1. 01
    一次性加载会话上下文

    每个 session 中,从 skill 目录运行一次带 context 参数的 impeccable 脚本。

  2. 02
    加载请求的 Playbook

    对于明确或隐含的子命令,加载 Commands 表参考;对于新界面或需要替换的视觉体系,加载 new-work.md。

  3. 03
    编辑前先阅读 Craft Floor

    在完成分析与方向确定后,任何 UI 编辑(包括微小调整)之前,立即阅读 craft-floor.md。

  4. 04
    根据界面类型选择模式

    对于访问者需要做出决定并采取行动的落地页和营销页面,选择 Persuade;对于访问者需要完成任务的应用界面和仪表盘,选择 Operate。

  5. 05
    以有边界的批次进行验证

    完整构建,然后进行一轮批量检查,Web 端同时覆盖桌面与移动端,原生端覆盖已发布的设备类别。

02 找到适合场景

何时使用 impeccable Skill

当任务是这类设计评审时,在 Claude Code 或 Codex 中使用 impeccable skill。适用范围和限制取自该 skill 自己的文件。

适合场景

  • 用户想要设计、重新设计、塑造、评审、审查、打磨、澄清、精炼、强化、优化、适配、动画化、上色、提取或以其他方式改进前端界面
  • 需要变得更大胆或更有趣的平淡设计
  • 需要变得更安静的喧闹设计
  • 在浏览器中对 UI 元素进行实时迭代
  • 应在技术上感觉非凡的雄心勃勃的视觉效果

了解边界

  • 仅涉及后端的任务

需要提供的信息

  • 目标文件或路由运行 context 脚本时,使用带路径参数的 --target 标志传入指定的源文件或路由。
  • PRODUCT.md由启动器加载的持久产品上下文文件。当启动器失败时,直接读取现有文件,不要臆造缺失的上下文。
  • 视觉回归基准图或截图 fixtures当应用无法运行时,从已提交的视觉回归基准图或截图 fixtures 开始。

03 Skill 内部

impeccable Skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 6 条具体指令、默认值与边界——文件中真正改变结果的那部分。

  1. Brief 优先

    即使与饱和模式警告相冲突,也要遵循固定的美学、年代、材质、字体和调色板。将明确的 brief 引向你自己的品味是一种失败。

  2. 精修保留;重设计替换

    精修保留现有身份、行为、文案以及范围之外的一切内容。

  3. 视觉权威是证据,而不是文件名

    仅缺少 DESIGN.md 并不代表项目就是从零开始(greenfield)。新工作 playbook 会根据视觉证据来判断应保留、扩展还是替换现有体系。

  4. 在有限轮次内验证,而非无限循环

    上限覆盖整个周期:截图、缺陷扫描、微调和重建。

  5. 永远不要把修复 drift 当作副作用来做

    CONTEXT_STALE 指令只会被报告,不会被主动执行,除非用户明确要求。唯一的例外是标记为 auto 的发现项,因为对该文件的下一次写入本身就会执行它。

  6. 启动器失败不会阻塞工作

    脚本拒绝执行或失败时,先发送一条单独的消息,然后直接读取现有的 PRODUCT.md 和 DESIGN.md,不要编造缺失的上下文。

04 投入使用

在 Claude Code 或 Codex 中安装 impeccable

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 impeccable 添加到 Claude Code、Codex 或您的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/pbakaus/impeccable --skill impeccable

针对 plugin/skills/impeccable/SKILL.md 的通用 skills CLI 形式;具体仓库可能会记录自己的路径。

为 Skill 提供第一个设计审查任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Audit [src/components/SettingsPanel.tsx] for accessibility and responsive behavior, then polish the form layout and typeset the section headings to improve visual hierarchy. The panel should feel confident but scannable for users managing account preferences.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 最多再确认一轮,然后停止打磨
  • 将缺陷扫描作为有限验证周期的一部分执行
  • 根据当前 token、CSS、组件或素材核实目标和新鲜度
  • 在使用主题系统时对比主题和变体的截图

在 OpenDesign 中,impeccable 已内置:Plugins → Skills,在顶部栏中选择它即可。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Repository
github.com/pbakaus/impeccable 分支 main
Skill 文件
plugin/skills/impeccable/SKILL.md 验证时记录的内容校验和;提交 cb56ed6
License
Apache-2.0 来自 LICENSE;SKILL.md 中写明 "Apache 2.0"。
仓库星标数
67,876 2026-09-14 为整个 pbakaus/impeccable 仓库获取的 GitHub 快照。不是 impeccable 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中(检查于 2026-08-28);此页面尚未记录实际运行。

SKILL.md 内部

  1. 设置每个会话运行一次上下文脚本,加载 playbook,编辑前先阅读 craft floor
  2. 如何设计brief 优先,精修(refinement)保留身份特征,而重设计(redesign)则会替换它;视觉权威来自证据,而非文件名
  3. 模式落地页用 Persuade,仪表盘用 Operate,文档用 Read,作品集用 Experience
  4. 命令二十多个命令,按 Build、Evaluate、Refine、Enhance、Fix 和 Iterate 分类,并附有参考文件
Skill 自身的描述
"当用户想要设计、重新设计、塑造、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、着色、提取或以其他方式改进前端界面时使用。涵盖网站、落地页、仪表板、产品 UI、应用外壳、组件、表单、设置、引导流程和空状态。处理 UX 评审、视觉层级、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、排版、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边缘情况、i18n,以及可复用的设计系统或 tokens。也适用于需要变得更大胆或更令人愉悦的平淡设计,应该变得更安静的喧闹设计,对 UI 元素的实时浏览器迭代,或应该在技术上令人惊叹的雄心勃勃的视觉效果。不适用于纯后端或非 UI 任务。"

来自 SKILL.md 的前言描述。完整文件约 11,912 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 impeccable Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

针对我的需求应该使用哪个命令?

如果未给出任何参数,请阅读 routing.md 并呈现其上下文感知菜单;切勿自动运行命令。对于明确或明显暗示的请求,加载 Commands 表参考。

对于工作流或命令选择相关的问题,请阅读 routing.md 中的 Workflow questions 部分。其他情况则视为一般设计工作。

Impeccable

在真实的设计评审任务中运行 impeccable

impeccable skill 内置于 OpenDesign。下载应用,在 Plugins → Skills 中选择该 skill,粘贴上面的提示词,在结果前阅读计划。

终端
npx skills add https://github.com/pbakaus/impeccable --skill impeccable

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows