技能说明
来自 pbakaus/impeccable 的网页设计技能，包含 23 个设计命令、61 条确定性检查规则和浏览器迭代能力，覆盖产品语境、视觉方向、信息层次、设计系统、可用性、无障碍、响应式、性能、动效和边界状态。README 提供 npx 安装器，可选择 Codex、Claude Code、Cursor、GitHub Copilot、Gemini CLI、OpenCode、Kiro 等环境；项目采用 Apache-2.0 许可证，当前 GitHub 星标为 66959。安装器可能写入项目技能和 hooks，启用前应阅读权限提示并确认。
关于此技能
一套面向网页和产品界面的设计打磨技能，用产品语境、设计系统、视觉层次和有限轮次的真实页面检查，帮助 Agent 摆脱千篇一律的 AI 界面。
核心能力
先建立产品和设计语境
用 init 记录用户、场景、目标、约束和品牌事实，再为具体页面选择合适的视觉方向。
覆盖从规划到打磨的完整命令
提供 shape、critique、audit、polish、layout、typeset、harden、adapt 等命令，分别处理结构、可用性、响应式、无障碍和视觉质量。
用真实渲染做有限轮次验证
支持桌面与移动端一起检查，结合确定性检测规则和浏览器迭代，集中修复问题，避免无止境微调。
适用场景
重做落地页和产品界面
从产品目标出发建立视觉方向、页面结构、真实内容和设计令牌，再进入前端实现。
审查和打磨 AI 生成页面
检查模板感、层次、排版、色彩、动效、可访问性、响应式和错误状态，并按优先级修正。
上线前的设计质量检查
用 audit、harden、polish 和 adapt 覆盖性能、边界状态、国际化、窄屏和交互细节。
使用步骤
- 01
安装并确认权限
运行 npx impeccable install，选择目标 Agent 和项目范围；涉及 hooks 时先在对应 Agent 中查看并批准。
- 02
建立项目事实
运行 /impeccable init，补齐用户、目标、环境、约束和语气，避免把产品事实和表面风格混在一起。
- 03
选方向并实现
先用 shape 规划 UX/UI，再按页面任务使用 craft、layout、typeset、colorize 或其他对应命令。
- 04
集中检查并收尾
用 audit、harden、adapt 和 polish 做一次桌面与移动端检查，集中修复后再确认一次。
常见问题
它和普通前端设计技能有什么不同？+
它把产品语境、设计系统、命令式工作流和渲染检查连在一起，适合从规划一路做到上线前打磨。
支持哪些 Agent？+
README 明确覆盖 Codex、Claude Code、Cursor、GitHub Copilot、Gemini CLI、OpenCode、Kiro 等；实际安装前请确认本地 Agent 的技能或插件支持。
安装后会自动修改项目吗？+
安装器会按选择写入技能和可能的 hooks；hooks 需要在对应 Agent 中确认，建议先读 SKILL.md 和权限提示，再决定是否启用。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/10
安装提醒：这项技能可能涉及网络、脚本、文件或凭据权限，安装前请先阅读 SKILL.md，并确认它需要哪些权限。
npx impeccable install