mcpField
I
impeccable

impeccable

github.com/pbakaus设计与 UI92.5k368.1k 次安装今天更新
代码仓库

关于 impeccable

impeccable 是面向界面设计工作的 skill,涵盖规划、实现与评审。它通过按任务划分的 playbook,提供视觉方向、界面改进和质量检查指导。

主要功能

  1. 01设计规划与实现指导
  2. 02UX 评审与技术审计
  3. 03界面优化命令
  4. 04响应式与原生 UI 指导
  5. 05渲染结果验证

适用场景

  1. 01规划新界面或视觉方向
  2. 02检查无障碍与性能
  3. 03改进界面文案、布局或动效

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/pbakaus/impeccable --skill impeccable

安装后在 Claude Code 中输入/impeccable确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

agents/
impeccable_asset_producer.toml
impeccable_documenter.toml
impeccable_finish_reviewer.toml
impeccable_manual_edit_applier.toml
openai.yaml
reference/
adapt.md
adapt.native.md
android.md
animate.md
audit.md
audit.native.md
bolder.md
clarify.md
colorize.md
component-review.md
craft-floor.md
craft.md
critique.md
delight.md
distill.md
doctor.md
document.md
extract.md
generate.md
harden.md
hooks.md
reference/degraded/
asset-producer.md
documenter.md
finish-reviewer.md
manual-edit-applier.md

详细介绍

这项技能为你提供所需的工具和授权,助你打造配得上「突破分布边界」之名的设计。像屡获殊荣的设计总监那样工作:交付可用于生产环境的代码,明确表达设计主张,深入理解客户及其用户的需求,并展现卓越的工艺水准。

核心原则:

  • 做好每一项工作。不含糊、不走捷径:交付成果必须完整,用户需要提供的素材除外。
  • 根据界面的模式调整抱负(见「模式」)。「说服」和「体验」要全力以赴:打造大胆、鲜明且立场明确的作品。在「操作」和「阅读」模式下,抱负体现在精准与克制上,而访客熟悉的模式也应当有其用武之地。
  • 在实际交付尺寸下检查渲染结果,并批量进行检查:先根据一次查看发现的问题进行修正,再查看结果,而不是每次微调后都截图。

设置

  1. 每个会话运行一次 <skill-base-dir>/scripts/impeccable context,其中 <skill-base-dir> 是包含此 SKILL.md 的目录(即技能文件夹,而不是高出两级的插件根目录);将当前工作目录保持在用户的项目目录中。该基础目录决定此技能及其引用中的每条 .agents/skills/impeccable/scripts/impeccable <verb> 命令的解析位置;仅当运行时未提供基础目录时,才回退到 .agents/skills/impeccable/scripts。在没有 sh 的 Windows shell 中,改用 .agents/skills/impeccable/scripts/impeccable.cmd。启动器会运行自包含的二进制文件,该文件随启动器一起提供,或在首次运行时下载;无需 Node 或其他运行时。使用 --target <path> 传入源文件或路由名称。它会加载 PRODUCT.md、DESIGN.md、对应界面的设计简报,以及适用时的原生平台指南;请遵循其中的指示,不要重复运行。
  2. 加载请求对应的操作指南:对于明确或隐含的子命令,使用 Commands 表中的参考文档;对于新界面或替换视觉体系,使用 reference/new-work.md。编辑前检查目标及现有界面的实际视觉效果。如果应用无法运行,先查看已提交的视觉回归基准图或截图样例;根据当前设计令牌、CSS、组件或素材,检查目标和时效性,解决冲突,并比较不同主题或变体的截图。
  3. 完成分析并确定设计方向后,在进行任何 UI 编辑前立即阅读 reference/craft-floor.md,小幅调整也不例外。该文档规定了质量底线、绝对禁令,以及任何检测器都无法捕捉的基本做法。仅进行规划而不编辑时,无需加载该文档。

启动器不可用: 如果启动器遭拒绝或运行失败,必须在下一次工具调用前单独发送一条消息:“上下文加载未能运行;我将直接阅读项目现有的上下文。”然后阅读现有的 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/UIreference/shape.md
init构建在 PRODUCT.md 中记录持久的产品背景信息reference/init.md
document构建根据现有项目代码生成 DESIGN.mdreference/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,它会自行加载原生平台参考文档。

固定 / 取消固定:.agents/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 及其伴随文件、配置、界面简报和钩子)与此版本所读取内容之间的偏差。用户调用此命令时,或询问哪些内容已过时、陈旧或需要刷新时,加载 reference/doctor.md。Setup 输出中的 CONTEXT_STALE 指令是同一报告的精简子集;应按照其自身说明处理,不要在无人要求时运行 doctor。

**绝不要在设计任务中顺带修复偏差。**除非用户提出要求,否则只报告 CONTEXT_STALE 发现,不采取行动。唯一例外是标记为 auto 的发现:下次写入该文件时会自动处理。

评论

支持 Markdown