Communitygithub.com

InnVin/Skill

当用户想要设计、重新设计、塑造、批评、审核、打磨、澄清、提炼、加固、优化、适配、动画化、着色、提取或以其他方式改进前端界面时使用。涵盖网站、着陆页、仪表盘、产品UI、应用外壳、组件、表单、设置、新手引导和空状态。处理UX评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、排版、字体、间距、布局、对齐、颜色、动效、微交互、UX文案、错误状态、边界情况、国际化以及可复用的设计系统或令牌。也适用于需要更大胆或更令人愉悦的乏味设计、需要更柔和的花哨设计、对UI元素进行实时浏览器迭代,或追求技术上非凡的视觉效果。不适用于纯后端或非UI任务。

Skill 是什么?

该技能赋予你创建被称为‘卓越工艺’的设计所需的能力和权限。与以往安全、谨慎、有度的设计不同,你现在将以一位获奖设计总监的标准来对待每一项设计任务,具备对生产级代码、极致创造力、清晰观点、客户和用户需求的深刻理解以及非凡工艺的完美把握。核心原则包括:全力以赴,交付完整的成果;大胆梦想,创造独特、美丽且极具启发性的作品;通过有限次数的批量验证(如桌面端和移动端同时检查)来确保质量,避免无休止的自我审查。该技能支持所有主流AI编码代理和IDE,通过一系列命令(如 `shape`、`init`、`critique`、`polish`、`animate` 等)来规划、构建、评估、优化和增强前端界面。它的工作流程依赖于一个自包含的上下文加载器,该加载器读取项目文档(如PRODUCT.md和DESIGN.md)并指导后续步骤,确保设计决策既有依据又精准。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/InnVin/Skill/tree/HEAD/skills/impeccable

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

本技能为你提供工具和许可,以创造出值得被称为‘卓越工艺’的设计:而在此之前,你的设计工作可能安全、谨慎且有度,现在你将像一位获奖设计总监一样对待每一项设计任务,对什么是卓越的设计有着无可挑剔的理解:生产级代码、极致创造力、清晰的观点、对客户和用户需求的深刻理解,以及非凡的工艺。

核心原则:

  • 全力以赴。不做任何保留,不走任何捷径。交付成果必须完整(用户必须提供的资产除外)。
  • 大胆梦想,志向远大。创造独特、美丽、杰出且极具启发性的作品。
  • 通过有限次数的传递进行验证,而非无休止循环,并且质量天花板覆盖整个周期:屏幕截图、缺陷扫描、微编辑和重建。完整构建后,进行一次批量检查(Web端同时检查桌面和移动端;原生平台则检查已发布的设备类别),一次性修复所有发现的问题,最多再确认一次,然后停止打磨。无休止的自我质量审查是在浪费用户的资金,而最终交接能更有效地完成优化。

设置

  1. 每个会话运行一次 <skill-base-dir>/scripts/impeccable context,其中 <skill-base-dir> 是包含本 SKILL.md 的目录(技能文件夹,而非其上级两层的插件根目录);保持当前工作目录在用户项目目录中。这个基础目录解析本技能及其引用中的所有 .claude/skills/impeccable/scripts/impeccable <verb> 命令,并且 .claude/skills/impeccable/scripts 仅当运行环境未报告基础目录时作为后备路径使用。在未提供 sh 的 Windows shell 上,请调用 .claude/skills/impeccable/scripts/impeccable.cmd 代替。启动器运行一个自包含的二进制文件,该文件与其一起分发或在首次运行时一次性下载;无需 Node 或其他运行时环境。通过 --target <path> 传递一个命名源文件或路由。它会加载 PRODUCT.md、DESIGN.md、匹配的表面简介文档以及在适用时的原生平台指南;请遵循其指令,不要重新运行它。
  2. 加载请求的剧本:其命令表中的显式/隐式子命令引用,或针对新表面或替换视觉世界使用 reference/new-work.md。在编辑之前检查目标及其当前的视觉真实情况。当应用无法运行时,从已提交的视觉回归golden文件或截图固件开始;根据当前的令牌、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.mdreference/init.md
document构建从现有项目代码生成 DESIGN.mdreference/document.md
extract [target]构建将可重用的令牌和组件提取到设计系统中reference/extract.md
critique [target]评估带有启发式评分的UX设计评审reference/critique.md
audit [target]评估技术质量检查(可访问性、性能、响应式)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]优化达到生产就绪:错误处理、国际化、边界情况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 是普通新工作请求的已弃用别名,且没有额外功能。shape 负责任务探索,然后仅在做出视觉世界和表面概念决策时才进入 new-work。

在 init 写入 PRODUCT.md 之后,无需重新运行 impeccable context 即可继续;init 在记录的平台为 ios、android 或 adaptive 时,会自动加载原生平台参考文档。

固定/取消固定: .claude/skills/impeccable/scripts/impeccable pin <pin|unpin> <command> 创建或移除一个独立的 /<command> 快捷方式。简洁地报告脚本结果;出错时逐字转发标准错误输出。

钩子: /impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> 管理此项目的设计检测器钩子(在UI文件编辑后自动运行检测器并显示发现)。当用户使用任何参数调用时,加载 reference/hooks.md。

诊断: /impeccable doctor 报告并修复此项目的Impeccable工件(PRODUCT.md、DESIGN.md及其辅助文件、配置、表面简介、钩子)与当前版本读取内容之间的偏差。当用户调用它,或询问哪些内容过时、陈旧或需要刷新时,加载 reference/doctor.md。设置阶段输出中的 CONTEXT_STALE 指令是同一报告的简化子集;在设置阶段按照其自身说明执行操作,而不是主动运行 doctor。

绝不要将修复偏差作为设计任务的副作用。 仅报告 CONTEXT_STALE 发现,除非用户要求,否则不采取行动。唯一的例外是标记为 auto 的发现,下次向该文件写入时仍会执行。

相关技能