Impeccable — design directions and gallery
项目截图关于这个 Skill
Impeccable 为编程 Agent 提供按任务组织的界面设计工作流。可以用 critique 和 audit 审查页面，用 polish、typeset 等操作改进组件；它也支持制作新界面，上游尤其强调对已有页面或组件的迭代。
为什么推荐
如果你能看出页面有问题，却难以把问题表达成具体的修改要求，Impeccable 值得考虑。与其反复让 Agent「做得好看一点」，可以明确要求它调整阅读顺序、减少争抢注意力的内容，或在保留现有风格的前提下优化一个组件。我们的建议是从一个可见的小问题开始，确认结果后再扩大修改范围。
适合用来做什么
- 独立开发者和创业者：已经用 AI 编程工具开发产品，希望在发布前把落地页或核心界面整理得更容易理解。
- 前端工程师：功能已经实现，但标题层级、间距、信息密度或移动端布局仍需要针对性优化。
- 参与代码实现的设计师：希望把视觉问题准确传达给 Agent，在实际页面中比较方案，再决定采用哪一种修改。
- 小型产品团队：多人维护相关页面，希望字体、颜色和组件规则能在不同任务与 Agent 会话之间延续。
Impeccable 能帮你做什么？
官方流程同时覆盖新页面制作和已有界面的局部改进。开始前先确定范围：一处文案、一个组件、一张页面，或整体视觉方向。目标越明确，越容易判断修改是否解决了原来的问题。
改善排版与阅读顺序
排版和布局命令用于调整文字与页面组织。你可以提出具体目标，例如让主要结果更容易找到、把补充说明与核心信息分开，并为主要操作留出足够空间。
先评审，再选择要修改的问题
critique 用于评审设计，audit 用于检查实现问题。页面让人觉得混乱却说不清原因时，可以先做设计评审；交付前关注可访问性、性能或响应式问题时，再进行实现审查。
改进已有界面与交互状态
局部优化适合保留现有页面中有效的设计，只调整薄弱环节。告诉 Agent 哪些产品事实、导航、品牌风格和交互必须保留，适用于功能已经可用、但完成度仍不足的页面。
为新页面探索视觉方向
制作新页面时，可以从视觉稿开始，也可以直接进入代码实现。先明确目标用户和页面目的，再用参考图说明布局与风格偏好；最终界面仍需要真实内容和可用的交互。
可以从哪些实际场景开始？
下面是我们建议的起步任务，便于你把能力对应到自己的项目。选择最接近当前问题的场景，再用真实的页面内容和约束替换示例条件。
卖点太多、重点不清楚的产品落地页
先确定首次访问者最应该理解哪句话，再提出一项具体改进：简化首屏、讲清主要价值，或让下一步操作更容易找到。保留真实的产品信息和已有注册流程。
信息拥挤、不方便扫读的数据看板
明确用户进入看板后要回答的问题，例如哪些订单需要处理。让 Agent 对相关数据进行分组，减少互相争抢注意力的强调方式，并用真实字段和数值判断结果，而不是只看空白占位卡片。
阅读费力的文章页或文档页
提供一篇有代表性的长内容，要求改善标题层级、段落宽度，以及正文与示例的区分。保留链接和代码的可读性，并把手机上的阅读体验作为判断标准之一。
缺少完整状态的设置页或表单
列出真正需要覆盖的状态：保存中、成功、输入错误和网络失败。要求提供清晰反馈，避免周围布局跳动；如果产品会出现长名称或翻译文案，也一并提供。
此前核对的版本
本页此前核对过 2026 年 10 月 20 日发布的 v4.7.0。后续版本请查看当前变更记录和安装说明；页首日期表示本页内容的编辑审核时间。
常用命令与使用时机
多数工具在 Agent 对话中使用 /impeccable <command> <target>，Codex 使用 $impeccable <command> <target>。以 npx 开头的安装、更新和检测命令在终端执行。当前 main 分支 README 列出 24 个任务命令。
/audit 或 /polish 这类独立入口需要先固定快捷方式，例如 /impeccable pin audit。新使用说明采用统一入口，再补充目标和约束。
| 命令 | 用途与使用时机 |
|---|---|
/impeccable craft | 执行从需求设计到实现的完整流程。 |
/impeccable init | 将长期产品背景写入 PRODUCT.md。 |
/impeccable document | 将现有视觉系统写入 DESIGN.md。 |
/impeccable extract | 提取可复用组件与设计变量。 |
/impeccable shape | 实现前规划 UX 与 UI。 |
/impeccable critique | 评审层级、清晰度与设计方向。 |
/impeccable audit | 检查可访问性、性能与响应式。 |
/impeccable polish | 交付前整理已有页面的细节。 |
/impeccable bolder | 增强现有设计的表现力。 |
/impeccable quieter | 降低过度抢眼的视觉表达。 |
/impeccable distill | 精简界面并减少杂乱。 |
/impeccable harden | 完善错误、长文本、多语言与边界情况。 |
/impeccable onboard | 改善首次使用流程与空状态。 |
/impeccable animate | 添加有用途的动效与反馈。 |
/impeccable colorize | 用颜色说明状态与操作。 |
/impeccable typeset | 改善字体选择、字号与文字层级。 |
/impeccable layout | 调整布局、间距与视觉节奏。 |
/impeccable delight | 添加符合场景的趣味细节。 |
/impeccable overdrive | 为合适页面探索更强的视觉效果。 |
/impeccable clarify | 写清标签、文案和下一步。 |
/impeccable adapt | 将设计适配其他设备与屏幕。 |
/impeccable optimize | 测量并改善界面性能。 |
/impeccable live | 在浏览器中迭代本地运行的页面。 |
/impeccable generate | 为指定元素比较多个方案。 |
第一次使用，建议这样开始
不必一次用完所有命令。如果已经有可运行的页面，可以先围绕一个明确目标完成短流程，方便判断每一步是否有效。
说明用户任务与必须保留的内容
例如：用户需要比较套餐，现有套餐名、价格和注册行为必须保留。再说明你观察到的问题，例如层级不明显或装饰过多。
先评审一个具体目标
阅读评审结果，选择与当前问题相关的建议。下面的示例只针对套餐比较部分，便于控制修改范围。
/impeccable critique the subscription comparison进行一次有范围的优化
同时说明希望改善的地方和需要保留的设计。范围清楚的要求，更方便检查代码改动与视觉结果。
/impeccable layout the subscription comparison. Keep plan names and signup behavior.回到最初的任务判断结果
用户是否更容易比较关键内容？用真实内容和窄屏布局判断，保留有效修改，具体指出仍有问题的地方，再继续调整页面其他部分。
如何安装与开始使用
| 命令 | 用途与使用时机 |
|---|---|
npx skills add pbakaus/impeccable | 通过 skills.sh 安装共享 Skill 的替代方式；需要工具专属集成时使用推荐安装器。 |
/impeccable pin audit | 可选的 Agent 对话命令：创建独立 /audit 快捷方式。在 Codex 中使用 $impeccable 入口。 |
npx impeccable detect https://example.com | 终端中的渲染页面检查，将示例 URL 替换为目标页面；此操作不向线上页面应用实时修改。 |
在终端运行安装器
在终端进入项目目录；官方入门指南要求安装器使用 Node.js 18.19 或更新版本。
npx impeccable install选择编程工具与安装范围
按提示选择对应工具和项目级或全局安装，然后重新加载编程工具。安装器处理工具对应的目录，额外设置以安装结果和官方说明为准。
为 Agent 提供产品背景
在 Agent 对话中调用 init，将目标用户与产品目的记录到 PRODUCT.md。Codex 使用 $impeccable init。开始设计前，先确认保存的背景是否准确。
/impeccable init选择一张页面开始，并按需更新
推荐 CLI 安装通过终端中的 npx impeccable update 更新，然后重新加载工具。Claude Code 插件通过 /plugin 更新；skills.sh 安装使用 npx skills update impeccable。
npx impeccable update
浏览器实时迭代与自动设计检查
在 Live Mode 中比较方案
Live Mode 将运行中的网页与 Agent 会话连接起来。你可以选中元素、描述修改方向、比较备选方案，再把选中的方案应用到项目中。页面应有足够真实内容，便于结合上下文判断效果。
扫描支持的界面代码或渲染页面
确定性检测器可以提示支持范围内的低对比度、溢出和设计系统偏离等问题。扫描本身无需 LLM 或模型 API Key；检测结果覆盖已有规则，整体设计判断仍需要设计评审和你的判断。
在工具支持时启用自动 Hook
自动 Hook 可以在 Agent 修改界面代码时反馈检测结果。不同编程工具的设置与授权方式有所区别，应按官方 Hook 指南配置；安装 Skill 和允许 Hook 运行是不同的设置步骤。
让后续页面保持一致
如果已有产品的视觉规则需要保留，可以在扩展页面前先记录。document 流程将当前设计系统整理到 DESIGN.md，PRODUCT.md 则保存用户与产品背景。确认记录反映的是有意采用的设计，再让后续任务继承这些规则。
对于小团队，我们建议选一张有代表性的页面作为参考，并明确需要复用的控件。重复模式成熟后，再要求提取成共用组件。接受新的设计修改后同步更新记录，方便下一个维护者继续使用。
哪些情况下需要其他方案配合？
希望直接得到托管成品网站
使用前需要准备 Agent、项目和运行环境。网站托管、部署，以及业务系统集成，仍要由项目自身的技术方案完成。
主要问题在后端或业务逻辑
当问题集中在界面表达时，这个 Skill 更适合发挥作用。数据库正确性、权限、支付和领域业务规则，需要对应的实现与审查流程。
需要可量化的业务效果
先提出改进假设，再在自己的产品里衡量。更清楚的界面值得尝试，但截图和设计命令本身无法证明转化率提升。本文场景是起步建议，具体效果由实际使用情况决定。
Impeccable 与 UI UX Pro Max 怎么选
需要针对已有界面执行可用性审查或排版调整等具体操作时，可考虑 Impeccable；需要先检索设计资料并生成项目设计系统时，可考虑 UI UX Pro Max。两者也可以配合使用：先确定方向，再审查实现后的页面。
SkillHey 上的 UI UX Pro Max
检索设计资料并生成项目级设计系统建议。
使用前需要了解
- 准备能够加载该 Skill 的 AI 编程工具，并允许它访问待修改的项目；在安装器中选择对应工具和安装范围。
- 使用推荐的 npx 安装方式时，按官方入门文档准备符合要求的 Node.js；作者也提供其他安装途径。
- 使用 Live Mode 时，需要本地网页和 Agent 会话持续运行；浏览器集成、自动 Hook 的可用性取决于工具支持与信任设置。
- 提供真实的产品背景和有代表性的内容；围绕用户真正要完成的任务评估修改结果，特别留意关键流程、长文本和窄屏布局。
支持的 Agent
常见问题
已有项目可以使用吗？
可以。官方提供已有界面的改进流程。先说明问题与必须保留的内容，再选择一个有范围的任务；可以从单个组件开始，逐步调整。
需要先懂很多设计术语吗？
可以用普通语言描述问题，例如主要操作不好找、表格不方便扫读。已经知道要改善哪一类问题时，再使用更明确的命令即可。
为什么 Codex 的调用方式不同？
多数 Agent 对话使用 /impeccable <command> <target>，Codex 使用 $impeccable <command> <target>。先用 /impeccable pin audit 固定快捷方式，才可使用独立 /audit。安装或更新后重新加载工具。
检测器需要模型 API Key 吗？
确定性检测器的检查无需 LLM 或模型 API Key。由 Agent 执行的设计工作仍使用编程工具本身的模型能力，图片生成流程也需要对应支持与配置。不同能力的依赖有所区别。
在哪里可以查看官方案例？
官方 Neo Mirai 案例介绍了一个虚构会议网站：从页面视觉稿和品牌素材开始，落地为响应式页面，再通过浏览器迭代处理布局与交互问题。下方资料区附有案例链接。
资料与来源
原始资料见下方链接；文中的上手建议由 SkillHey 编辑整理。
