Impeccable

让界面改进有目标、有依据

从一个页面或组件开始,分别处理使用体验、技术质量、异常状态和交付细节;让助手理解产品,再选择合适的改进命令。

作者 Paul Bakaus

作者案例:浅奶油色民宿页面,衬线标题、圆角按钮与海岸建筑图片。打开作者原图

奶油色底、细衬线标题、胶囊按钮与分区图片,呈现另一种页面组织方式。

查看作者案例说明

来自作者 README 的对比图。作者说明两图使用相同模型与 brief,主题是利古里亚海岸一家 14 间客房的家庭民宿。这里展示视觉方向的区别;没有本站对照实验,也不据此承诺生成质量或业务效果。

作者列出的使用环境

  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • GitHub Copilot
  • OpenCode
  • Kiro
  • Antigravity
  • Trae
GitHub Star
95,711
版本
4.8.0
资料核对

先评审一处,再修最有影响的问题

第一次选择已有组件,让 critique 解释用户在哪里难以理解或完成任务。用 audit 补技术检查,明确修改范围后再选 harden、clarify 或 polish,最后回到真实流程复查。

选一个任务,开始使用

在目标项目根目录的交互终端执行安装命令,阅读是否启用编辑后自动检测的提示;已有选择会沿用。安装完成后重新加载助手。CLI 固定为 4.8.0,但安装过程会下载当前发布的技能包;请同时核对实际 SKILL.md 中的版本。

按要解决的问题选择

判断访客能否比较方案、理解价格并找到下一步。

  1. 安装技能与检测入口

    在项目根目录安装到 Claude Code。首次交互安装可选择检测钩子,已有选择会沿用;非交互运行可能直接启用。安装后重新加载助手。4.8.0 固定的是 CLI,技能包从作者当前发布地址下载。

    npx [email protected] install --providers=claude --scope=project
    查看作者安装说明

    首次路径:建立背景 → 评审组件 → 核对结论

    安装后,在助手聊天中运行 /impeccable init,让它先读取已有项目资料,只补充无法推断的目标与限制;新建 PRODUCT.md 前确认事实。已有视觉规范可运行 /impeccable document,从真实代码整理 DESIGN.md,合并或覆盖现有文件前确认内容。接着复制第一条任务,指定一个组件及其预览路由。拿到报告后核对位置、复现步骤和设计判断,再决定修哪些问题。缺少背景文件不意味着必须阻塞一个范围清楚的小修。

    查看初始化的具体步骤
  2. 把这段话发给 AI

    以下为编辑编写的任务提示词。先准备 brief.md,写清目标文件与路由、启动方法、用户与主要操作、已确认事实和不能改的范围;它是你的任务材料,不是安装器自带文件。使用测试数据,只有实际执行过的浏览器操作和检查才写成已完成。

    /impeccable critique 按 brief.md 评审指定定价组件和预览路由。读取当前产品与设计资料,确认目标用户、套餐事实、计费周期及主要行动;缺失的信息标明,不补写优惠或承诺。 用真实页面检查信息层级、套餐比较、按钮含义、关键条件和桌面/手机阅读。将设计判断与确定性检测结果分别呈现,每项给出具体位置、影响和依据;启发式评分说明适用项目与分母,不把模拟用户视角写成真实访谈。 有可用子代理时按技能隔离两类评审;没有时先独立完成设计判断,再做检测并合成,报告首行明确标注方法或单一上下文的降级。先在聊天中交完整报告和优先级;按技能保存 .impeccable/critique/ 快照,存档成功时给出路径,不能只交文件链接。最后按实际问题询问改善范围,本轮不改代码。无法打开或操作的部分列为待查。

  3. 检查你拿到的结果

    • 针对该组件的完整评审,说明最影响理解和选择的问题,而非泛泛评价“有无设计感”。
    • 区分设计判断、检测发现与未验证项;聊天中有完整报告,存档成功时另附快照路径,供后续修改参考。
    查看这项任务的作者说明
进一步了解这个 Skill

Impeccable 是 Paul Bakaus 为 AI 编程助手提供的一套界面工作方法,配合命令行检测器和可选浏览器扩展使用。它尤其适合迭代已经存在的界面:给出明确目标,让助手判断问题,再按问题选择动作。当前命令表列有 24 项,其中 craft 已是弃用别名,不需要额外安装 24 个技能。

它把页面的任务放在视觉风格之前。营销页帮助访客理解并决定,工作台帮助用户准确操作,文档服务阅读,作品展示让内容成为主角。同一个产品的不同页面可以采用不同重点;后台表单不必为了“更有设计感”变成宣传页。

PRODUCT.md 记录产品、用户与约束,DESIGN.md 记录实际视觉系统;两者职责不同。改进既有页面时保留已确认的品牌、内容与行为,只有明确要求重新设计才更换视觉方向。检测器发现的常见模式只是检查线索,不能替代品牌判断。

来源与核验

资料核对

已阅读入口、五项任务、初始化、设计记录与检测说明,并比对 4.8.0 发布内容及安装实现。未运行第三方安装、扫描、模型评审或 live;作者案例也不作为本站实测。