Skills · 社区项目

Impeccable

面向 AI 编码 Agent 的前端设计 Skill,提供 23 个界面工作流、实时浏览器迭代和 61 条确定性检测规则,并可通过本地 Hook 在编辑后反馈问题。

66.1k StarsApache-2.0JavaScript今天更新
01

项目介绍

Impeccable 是面向 AI 编码 Agent 的前端设计 Skill,把产品上下文、视觉方向、界面审查、定向打磨、实时浏览器迭代和机械检测组织成一套连续工作流。当前公开版本包含 23 个命令和 61 条确定性检测规则;本页基于固定 GitHub 提交与公开发布记录整理,没有把项目自述写成亲自实测。

02

核心功能

01

上下文与视觉方向

通过 init、document、teach 和 shape 等流程形成 PRODUCT.md、DESIGN.md 与具体页面策略,减少脱离产品事实的界面生成。

02

界面审查与打磨

提供 critique、audit、polish、distill、clarify、bolder 和 quieter 等命令,分别处理视觉、无障碍、响应式、文案与复杂度问题。

03

实时浏览器迭代

Live 模式通过本地开发服务器和浏览器探索视觉方向、注释页面并把选定变体落回本地源代码。

04

机械反模式检测

CLI、浏览器扩展和本地 Hook 共用 61 条确定性规则,无需 LLM 或 API Key;可输出适合 CI 的 JSON。

03

安装与使用

在项目根目录运行 `npx impeccable install`,选择检测到的 Agent 和项目或全局范围;进入 Agent 后运行 `/impeccable init`,Codex 还需打开 `/hooks` 批准项目 Hook。

AI AGENT INSTALL

让 AI Agent 帮你安装

把这段话发送给 Codex、Claude Code 或其他可以操作本地环境的 AI Agent。

请帮我在当前项目安装 Impeccable,项目地址:https://github.com/pbakaus/impeccable。先阅读固定提交 36e4cea 的 README.md、package.json、.agents/skills/impeccable/SKILL.md 和 .codex/hooks.json,说明将写入的 Skill、Hook 与 .impeccable 路径,以及首次引擎下载。确认 Node.js 至少为 22.18.0 后运行 `npx impeccable install`。不要使用 --force,也不要覆盖已有同名 Skill 或损坏的 Hook 清单;需要启用 Hook 时先展示其命令。Codex 安装后提醒我打开 /hooks 批准。最后运行 /impeccable init,并对非敏感测试页面执行一次 /impeccable audit;不要修改生产页面或启动 Live 模式,除非我另行确认。
01开始前准备
  • Node.js 22.18.0 或更高版本,仅 npx 安装器需要
  • 一个受支持的 AI 编码 Agent
  • 对目标项目 Skill、Hook 和配置目录的写权限
  • 允许首次从 GitHub Release 获取并校验固定版本引擎
02复制安装命令或配置
npx impeccable install
03按步骤完成安装
  1. 1
    核对环境与写入范围

    确认 Node.js 版本、目标 Agent、项目或全局安装范围,并查看将创建或合并的 Skill 和 Hook 文件。

  2. 2
    执行官方安装

    在项目根目录运行: npx impeccable install

  3. 3
    批准 Hook 并初始化

    Codex 用户打开 /hooks 审查并批准项目 Hook,然后在 Agent 中运行 /impeccable init,确认 PRODUCT.md 和相关配置符合项目事实。

  4. 4
    运行最小审查

    选取一个非敏感测试页面运行 /impeccable audit,确认输出包含优先级、受影响文件或选择器及具体改进建议,再决定是否进入 polish 或 live。

如何确认安装成功

安装后确认宿主能发现 Impeccable Skill,运行 `/impeccable init` 生成或确认 PRODUCT.md;再对一个非敏感测试页面运行 `/impeccable audit`,确认得到带文件或选择器证据的优先级问题清单。Codex 用户同时确认 /hooks 已批准。

使用前注意
  • 交互安装默认建议启用 Hook,可用 --no-hooks 为本次安装跳过
  • Codex 对 Hook 的批准不能由安装器代替
  • 对陌生项目启用 Live 模式前,应先审查 package.json 中的 impeccable:manual-edit-validate 脚本
04

使用场景

SCENARIO 01

新界面定向

先固定产品事实和视觉世界,再由 Agent 生成并实现符合项目语境的新页面。

SCENARIO 02

现有页面审查

把视觉层级、响应式、无障碍和性能问题整理为带证据的修复清单。

SCENARIO 03

编辑后质量门

利用宿主原生 Hook 对变更文件运行确定性规则,在 Agent 流程中反馈常见反模式。

05

使用评价

Impeccable 的特点是把设计上下文、工作流指令、浏览器反馈和可重复的机械规则放在同一条前端交付链路中。它的 Hook 与 CLI 对早期发现常见问题有帮助,但机械检测不能替代人工视觉和无障碍评审;本评价仅基于公开代码与文档。

值得一试的地方

  • 23 个命令覆盖从产品上下文到审查、打磨和视觉方向调整的连续流程。
  • 61 条规则无需 LLM 或 API Key,可通过 Hook、CLI 和 CI 重复执行。
  • 支持多种编码 Agent,并为 Codex、Claude Code、Cursor 等提供宿主原生 Hook。

使用前要知道

  • 检测通过不代表界面整体质量、可用性或无障碍已经达标。
  • Hook 会执行本地二进制并读取变更文件,需要用户审查和宿主信任。
  • 本页没有实测安装、Hook、Live 模式或真实前端任务。
06

README

Impeccable


Overview

面向 AI 编码 Agent 的前端设计 Skill,提供 23 个界面工作流、实时浏览器迭代和 61 条确定性检测规则,并可通过本地 Hook 在编辑后反馈问题。 Design guidance for AI coding agents. 1 skill, 23 commands, live browser iteration, and 61 deterministic detector rules for AI-generated frontend design.

Getting started

  • 在项目根目录运行 `npx impeccable install`,选择检测到的 Agent 和项目或全局范围;进入 Agent 后运行 `/impeccable init`,Codex 还需打开 `/hooks` 批准项目 Hook。
  • 项目定位:为 AI 编码 Agent 提供前端设计指导、23 个工作流、实时浏览器迭代和 61 条确定性规则。
  • 初始化:/impeccable init 检查项目并写入 PRODUCT.md,既有或新设计系统另行记录在 DESIGN.md。
  • 安装后确认宿主能发现 Impeccable Skill,运行 `/impeccable init` 生成或确认 PRODUCT.md;再对一个非敏感测试页面运行 `/impeccable audit`,确认得到带文件或选择器证据的优先级问题清单。Codex 用户同时确认 /hooks 已批准。

Configuration

npx impeccable install
在 GitHub 阅读完整 README