# Impeccable：让编程助手按具体设计指令改页面，还能自动查界面问题

**URL:** <https://www.sunai.net/t/topic/1558>\
**Category:** IT\
**Tags:** claude-code, 开源, 设计工具, 前端\
**Created:** [2026 年10 月 30 日 11:33 UTC](https://www.sunai.net/t/topic/1558 "2026-10-30T11:33:00Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![Logos](https://www.sunai.net/user_avatar/www.sunai.net/logos/32/2077_2.png) [@Logos](https://www.sunai.net/u/Logos)\
发布日期： [2026 年10 月 30 日 11:33 UTC](https://www.sunai.net/t/topic/1558/1 "2026-10-30T11:33:00Z")

</div>

让 AI 写页面，最难说清楚的往往是那句“再好看一点”。它可能把按钮放大、再套一层卡片，但你真正想改的其实是信息层级、留白，或者整页过于模板化。

Impeccable 给 Claude Code、Cursor 等编程助手补了一套设计指令：审查界面、调整视觉方向、收拾上线前的细节。它还带一个可以独立运行的检测器，用确定性规则找常见的界面问题，不需要为了这一步再调用模型。

## 把“改好看”拆成具体动作

它比较实用的地方，是把不同设计任务分开处理。

`critique` 做带评分的 UX 审查，给出修改优先级；`audit` 检查无障碍、性能、主题和响应式问题，按 P0 到 P3 分级。要实际调整时，可以用 `typeset` 改字体与层级，用 `layout` 改间距和节奏，或者用 `quieter` 收敛过于喧闹的页面。

`polish` 适合上线前再整理一遍，`harden` 则盯错误状态、国际化、溢出和边界情况。比起反复追加一句“高级一点”，这些指令至少把要做的事说清楚了。

项目提供了一组海边民宿页面示例。未使用时是米色底、细衬线标题和左右分栏：

 ![项目提供的未使用 Impeccable 的民宿页面示例](https://i.czl.net/r2/original/2X/f/f9bfa827aeead25c816f7ca9828c4e942712cd1b.webp)

使用后的示例换成大幅夜景插画、醒目的标题和更集中的首屏构图：

 ![项目提供的使用 Impeccable 后的民宿页面示例](https://i.czl.net/r2/original/2X/2/239fbcfa4148c30df393f8a16cd4c92a54a2e1cf.webp)

这是项目方的案例，不代表装上之后每个页面都会得到同样的效果。更值得借鉴的是：修改可以落在构图和视觉方向上，而不只是换个颜色。

## 怎么开始用

在自己的项目根目录运行：

```bash
npx impeccable install

```

安装器会识别编程工具，让你选择项目级或全局安装，并在支持的工具中提供设计检查 hook。安装完成后重新加载编程工具，在助手里执行：

```plaintext
/impeccable init

```

初始化会读取项目代码，补问无法推断的产品背景，写入 `PRODUCT.md`。后续指令会读取它。已有视觉规范的项目，还可以运行 `/impeccable document`，把现有设计系统记到 `DESIGN.md`。

第一次不必让它重做整站，可以先找一个具体组件：

```plaintext
/impeccable critique the pricing cards
/impeccable polish settings

```

先看审查意见，再决定改哪一块，比一次性大改更容易检查结果。

## 不让 AI 改代码，也能单独查问题

独立检测器目前有 62 条确定性规则，可以扫源码，也能扫已经运行的页面：

```bash
npx impeccable detect src/
npx impeccable detect http://localhost:5173
npx impeccable detect --github src/

```

源码扫描主要找模式问题；对比度、字号太小这类依赖实际渲染的检查，需要提供页面 URL，并使用本机已安装的 Chrome 或 Edge。`--github` 可以输出 GitHub Actions 注解。

接到 CI 时要留意退出码：`2` 表示发现问题，`1` 表示目标无法扫描，两者不是同一种失败。检测器本身不需要 LLM 或 API Key，但让编程助手执行设计修改，仍然会使用助手自己的模型。

## 适合拿来修已有页面

如果你已经有一个能跑的后台、落地页或设置页面，却总觉得排版别扭，Impeccable 的切入点很直接。它也能参与新页面制作，但对一个具体组件做审查、逐步修改，更容易判断有没有改对。

规则也不能代替产品判断。比如品牌本来就要求统一使用某种字体，可以配置忽略项，没必要为了消除告警把品牌规范一起改掉。

## 项目信息

- 主要语言：Rust（GitHub 仓库统计）
- License：Apache-2.0
- Star：截至 2026-10-30 约 9.63 万
- GitHub：[GitHub - pbakaus/impeccable: The design vocabulary for your coding agent. Steer with polish and bolder, review with critique and audit, catch AI slop before it ships. · GitHub](https://github.com/pbakaus/impeccable)
- 官网：[https://impeccable.style](https://impeccable.style)