关于 impeccable
Impeccable 是面向编码 Agent 的产品界面设计与实现技能及命令集。它提供 UI 规划、优化和评估流程,并强调渲染结果的视觉验证与项目上下文指导。
主要功能
- 01设计与 UI 优化命令
- 02UX 和技术质量评审
- 03项目上下文与设计文档
- 04渲染结果的视觉验证
- 05原生平台指导
适用场景
- 01规划新的界面或页面
- 02检查无障碍性与响应式设计
- 03优化现有 UI
- 04记录项目设计系统
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ bastani-inc/ atomic --skill impeccable安装后在 Claude Code 中输入/impeccable确认已加载。
详细介绍
这项技能为你提供了工具和权限,让你打造名副其实、突破常规的设计作品。像屡获殊荣的设计总监那样工作:编写可用于生产环境的代码,明确表达设计立场,深入理解客户及其用户的需求,并追求卓越的工艺。
核心原则:
- 把工作做完。不犹豫,不走捷径:交付成果必须完整,用户需要提供的素材除外。
- 根据界面的模式调整抱负(参见 Modes)。Persuade 和 Experience 模式要全力以赴:打造大胆、鲜明且立场明确的作品。Operate 和 Read 模式则以精准和克制体现抱负,并让访客熟悉的设计模式发挥应有的作用。
- 通过查看实际渲染结果来验证,覆盖产品发布时采用的尺寸,并批量检查:根据一次查看发现的问题进行修复,再次查看;不要每次调整后都截图。
设置
- 每个会话运行一次
<skill-base-dir>/scripts/impeccable context,其中<skill-base-dir>是包含此 SKILL.md 的目录(即技能文件夹,而非上两级的插件根目录);保持当前工作目录为用户的项目目录。该基础目录决定此技能及其参考文件中每条.pi/skills/impeccable/scripts/impeccable <verb>命令的解析位置;只有当运行环境报告没有基础目录时,才使用.pi/skills/impeccable/scripts作为后备路径。在没有sh的 Windows shell 中,改为调用.pi/skills/impeccable/scripts/impeccable.cmd。启动器会运行一个随其一同发布或在首次运行时下载的独立二进制文件;无需 Node 或其他运行时。使用--target <path>指定源文件或路由。它会加载 PRODUCT.md、DESIGN.md、匹配的界面说明,以及适用时的原生平台指南;请遵循其中的指示,且不要再次运行。 - 加载请求对应的操作指南:若请求明确或隐含了子命令,则查阅 Commands 表格中的参考文档;若要创建新界面或替换视觉风格,则查阅 reference/new-work.md。编辑前检查目标内容和现有设计的实际视觉效果。如果应用无法运行,先查看已提交的视觉回归基准图或截图夹具;根据当前令牌、CSS、组件或素材核实目标和时效性,解决冲突,并对比主题或变体的截图。
- 解决分析问题并确定方向后,在进行任何 UI 编辑前(包括小幅微调),立即阅读 reference/craft-floor.md。其中规定了质量底线、绝对禁令,以及任何检测器都无法捕捉的直觉原则。仅做规划时不要加载此文件。
启动器不可用: 如果启动器拒绝运行或运行失败,请在下次调用工具前先发送一条单独的消息:“Context loading did not run; I’ll read the existing project context directly.” 然后阅读现有的 PRODUCT.md 和 DESIGN.md,不要臆造缺失的上下文;遵循适用的步骤 2–3,并继续使用允许的工具。此要求适用于规划和编辑;仅启动器失败并不妨碍这两者。
如何设计
- 以简述为准。 即使与饱和图案警告相冲突,也要遵循明确指定的美学风格、时代、材质、字体和配色。把清晰的简述引向你自己的品味,就是失败。
- 精修是保留,重设计是替换。 精修要保留现有的身份、行为、文案,以及范围之外的一切。替换事实性文案或添加声明前,先征求同意。重设计要保留产品事实、内容、功能、原生交互方式和约束,但把旧外观视为证据和反面参考;在 new-work 中选择一个全新的设计方向,并替换 DESIGN.md。不要折中地为已舍弃的外观做润色。
- 不要把带有负面含义的符号用作装饰。 主题所在的世界并不意味着可以把与军国主义、白人至上主义或仇恨运动相关的徽记用作图案、徽章或装饰,例如旭日旗的光芒、邦联战旗,或纳粹时期的徽章及其风格化变体;应改用该世界中的中性形式。以事实为目的记录此类符号的内容则应保持原样。
- 视觉风格的权威性来自证据,而非文件名。 仅仅缺少 DESIGN.md,并不意味着项目处于绿地状态;new-work 会决定是保留、扩展还是替换现有的设计方向。
模式
模式描述了访客在当前界面中的成功表现。
- 说服: 访客做出决定并采取行动;设计本身就是产品。适用于落地页、营销、活动和定价。吸引访客关注并促使其行动。简述需要真实影像时就提供;遵循既定的设计方向,而不是类别惯例。
- 操作: 访客完成一项任务。适用于应用 UI、仪表板、编辑器、管理、设置和工具。易于浏览、保持一致、符合原生体验预期,以及贴合真实使用场景,这些都比表现力更重要。品牌体现在精准的细节中。
- 阅读: 访客理解某些内容。适用于文档、文章、指南、帮助内容和更新日志。先围绕理解组织内容,再让阅读体验值得停留。
- 体验: 访客置身于作品本身。适用于作品集、画廊和展示页面。让作品从首屏开始引领体验;界面退居其次。
根据所请求的界面选择模式,而不是根据产品选择,并且只在该界面的简述中记录此模式。工具的落地页仍属于说服模式;时装屋的文档仍属于阅读模式;文档索引属于阅读模式,而非说服模式。新界面请参阅 new-work.md,更深入的操作/阅读指导请参阅 operate.md。
命令
| 命令 | 类别 | 描述 | 参考 |
|---|---|---|---|
craft [feature] | 构建 | 已弃用的别名,用于普通的新工作请求 | reference/craft.md |
shape [feature] | 构建 | 编写代码前规划 UX/UI | reference/shape.md |
init | 构建 | 在 PRODUCT.md 中记录持久的产品背景信息 | reference/init.md |
document | 构建 | 根据现有项目代码生成 DESIGN.md | reference/document.md |
extract [target] | 构建 | 将可复用的设计令牌和组件提取到设计系统中 | reference/extract.md |
critique [target] | 评估 | 使用启发式评分进行 UX 设计评审 | reference/critique.md |
audit [target] | 评估 | 技术质量检查(a11y、性能、响应式) | reference/audit.md · 原生:reference/audit.native.md |
polish [target] | 优化 | 发布前的最终质量检查 | reference/polish.md |
bolder [target] | 优化 | 强化安全或平淡的设计 | reference/bolder.md |
quieter [target] | 优化 | 弱化过于激进或过度刺激的设计 | reference/quieter.md |
distill [target] | 优化 | 提炼核心,去除复杂性 | reference/distill.md |
harden [target] | 优化 | 做好生产就绪准备:错误、i18n、边界情况 | reference/harden.md |
onboard [target] | 优化 | 设计首次使用流程、空状态和激活体验 | reference/onboard.md |
animate [target] | 增强 | 添加有明确目的的动画和动态效果 | reference/animate.md |
colorize [target] | 增强 | 为单色 UI 添加经过策略性设计的色彩 | reference/colorize.md |
typeset [target] | 增强 | 改进排版层级和字体 | reference/typeset.md |
layout [target] | 增强 | 修复间距、节奏和视觉层级 | reference/layout.md |
delight [target] | 增强 | 增添个性与令人印象深刻的细节 | reference/delight.md |
overdrive [target] | 增强 | 突破常规限制 | reference/overdrive.md |
clarify [target] | 修复 | 改进 UX 文案、标签和错误消息 | reference/clarify.md |
adapt [target] | 修复 | 适配不同设备和屏幕尺寸 | reference/adapt.md · 原生:reference/adapt.native.md |
optimize [target] | 修复 | 诊断并修复 UI 性能问题 | reference/optimize.md |
live | 迭代 | 视觉变体模式:在浏览器中选择元素,并迭代尝试不同方案 | reference/live.md |
generate [n] [action] [element] | 迭代 | 为指定元素生成变体、版本或备选方案,供你在实时浏览器中选择;无需手动挑选 | reference/generate.md |
路由:
- **无参数:**读取 routing.md,并展示其上下文感知菜单;绝不自动运行命令。
- **明确或明显暗示要运行命令:**加载对应参考文档(原生平台上使用原生变体)并按其操作。如果有两个命令都适用,只询问一次。
- **工作流或命令选择问题:**阅读 工作流问题。
- **其他情况:**将请求视为一般设计工作。缺少 PRODUCT.md 时,通过 init 将新界面或替换世界引导至 new-work;对现有代码进行小范围改进时,按照
impeccable context的指示,以现有实现为基础继续推进,并在之后提供 init 选项,而不是因此中断工作。 teach是init的别名。craft是已弃用的普通 new-work 别名,没有额外作用。shape负责发现任务,只有在涉及视觉世界和界面概念的决策时才进入 new-work。
init 写入 PRODUCT.md 后,继续操作时不要重新运行 impeccable context;如果 init 记录的平台为 ios、android 或 adaptive,它会自行加载原生平台参考文档。
固定 / 取消固定:.pi/skills/impeccable/scripts/impeccable pin <pin|unpin> <command> 会创建或移除独立的 /<command> 快捷方式。简要报告脚本结果;出错时逐字转述 stderr。
钩子:/impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> 管理此项目的设计检测器钩子(在 UI 文件编辑后自动运行检测器并显示发现结果)。用户带参数调用时,加载 reference/hooks.md。
Doctor:/impeccable doctor 会报告并修复此项目的 Impeccable 产物(PRODUCT.md、DESIGN.md 及其 sidecar、配置、界面简报和钩子)与此版本读取内容之间的偏差。用户调用它时,或询问哪些内容已过时、陈旧或需要刷新时,加载 reference/doctor.md。Setup 输出中的 CONTEXT_STALE 指令是同一报告的简化版本;按照其自身说明处理,不要在用户未要求时运行 doctor。
**绝不要在设计任务中顺带修复偏差。**发现 CONTEXT_STALE 时应报告,不要采取行动,除非用户提出要求。唯一例外是标记为 auto 的发现;下次写入该文件时会自动处理。