Impeccable — 前端界面设计 Skill
Claude Code Skill | v3.1.0 | Apache 2.0 License
Impeccable 是一个专注于前端界面设计的 Claude Code Skill，提供从构思到交付的完整设计工作流。支持网站、仪表盘、组件、表单、引导页等各种界面类型的设计与优化。
功能概览
Impeccable 提供 27 个命令，覆盖设计、评估、精炼、增强、修复和迭代六大类别：
构建 (Build)
| craft [功能] | 从规划到编码，端到端构建一个功能 |
| shape [功能] | 在写代码前先规划 UX/UI |
| teach | 设置 PRODUCT.md 和 DESIGN.md 上下文 |
| document | 从现有代码生成 DESIGN.md |
| extract [目标] | 提取可复用的设计 token 和组件 |
评估 (Evaluate)
| critique [目标] | UX 设计评审与启发式评分 |
| audit [目标] | 技术质量检查（a11y、性能、响应式） |
精炼 (Refine)
| polish [目标] | 发布前的最终质量把关 |
| bolder [目标] | 放大保守或平淡的设计 |
| quieter [目标] | 降低激进或过度刺激的设计 |
| distill [目标] | 剥离至本质，去除复杂度 |
| harden [目标] | 生产就绪：错误处理、i18n、边缘情况 |
| onboard [目标] | 设计首次运行流程、空状态、激活 |
增强 (Enhance)
| animate [目标] | 添加有目的的动画和动效 |
| colorize [目标] | 为单色 UI 添加战略性颜色 |
| typeset [目标] | 改善排版层级和字体 |
| layout [目标] | 修复间距、节奏和视觉层级 |
| delight [目标] | 添加个性和令人难忘的细节 |
| overdrive [目标] | 突破传统极限 |
修复 (Fix)
| clarify [目标] | 改善 UX 文案、标签和错误消息 |
| adapt [目标] | 适配不同设备和屏幕尺寸 |
| optimize [目标] | 诊断和修复 UI 性能问题 |
迭代 (Iterate)
| live | 在浏览器中选中元素，实时生成变体 |
快捷方式管理
| pin <命令> | 创建快捷方式，如 /craft 直接调用 /impeccable craft |
| unpin <命令> | 移除快捷方式 |
案例展示
以下案例展示了 Impeccable 在不同场景下的设计能力。每个案例都是独立的 HTML 文件，可直接在浏览器中打开预览。
01. 品牌落地页 — Atelier 设计工作室
深色主题品牌网站，采用衬线+无衬线字体组合，暖色调点缀。展示 Hero 区域、作品网格、服务列表等典型品牌页面模块。
涉及命令: craft | shape | typeset | layout
02. SaaS 仪表盘 — Monolith 数据监控平台
暗色主题 SaaS 仪表盘，包含侧边导航、统计卡片、柱状图、环形图和服务状态表格。专为 SRE 团队设计的可观测性界面。
涉及命令: craft | harden | optimize | audit
03. 组件设计系统 — Lumina
浅色主题组件库展示，包含按钮变体、卡片样式、表单元素、开关、徽章、警示、标签页和色彩系统。使用 OKLCH 色彩空间和一致性设计语言。
涉及命令: extract | document | colorize
04. 新用户引导 — Flare
多步骤引导流程设计，包含进度条、步骤切换动画、特性列表和空状态页面。深色主题配合紫色强调色，营造科技感和信任感。
涉及命令: onboard | animate | clarify
05. 动效交互 — Motion
文字逐字揭示动画、卡片悬停光效跟随、列表交错入场、弹性反馈和加载状态骨架屏。使用 ease-out-quart 缓动曲线，避免弹跳和弹性效果。
涉及命令: animate | delight | overdrive
06. 电商产品页 — Aether 无线降噪耳机
电商产品详情页，包含商品图库、颜色选择器、数量控制、价格展示、特性卡片和用户评价。暖色背景配合深色文字，营造高端产品氛围。
涉及命令: craft | bolder | adapt | polish
快速上手
1. 基础用法
在项目目录中直接调用 Impeccable，它会自动加载项目上下文（PRODUCT.md 和 DESIGN.md）：
# 端到端构建一个功能
/impeccable craft login-page
# 评估现有界面
/impeccable critique dashboard
# 添加动效
/impeccable animate card-hover
# 优化性能
/impeccable optimize landing-page
2. 首次设置
如果项目没有 PRODUCT.md，先运行 teach 命令建立项目上下文：
# 生成 PRODUCT.md 和 DESIGN.md
/impeccable teach
# 从现有代码生成 DESIGN.md
/impeccable document
3. 快捷方式
将常用命令固定为快捷方式，省去每次输入完整路径：
# 创建快捷方式
/impeccable pin craft
# 之后可直接使用
/craft login-page
# 移除快捷方式
/impeccable unpin craft
核心设计法则
Impeccable 遵循以下设计法则，每个生成的界面都会自动应用：
色彩策略
- 使用 OKLCH 色彩空间
- 绝不使用纯黑 #000 或纯白 #fff
- 提供四种策略：克制（默认）、承诺、全色板、浸润
主题选择
暗色或浅色不是默认选择。先写一个具体的使用场景句子（“谁在什么环境下使用”），由场景决定主题。
绝对禁止
以下设计反模式被严格禁止：
- 侧边条纹边框（>1px 的 border-left/border-right 作为卡片装饰）
- 渐变文字（background-clip: text 配合渐变背景）
- 默认玻璃拟态（无目的的装饰性模糊）
- 英雄指标模板（大数字+小标签+统计的 SaaS 俗套）
- 相同卡片网格（图标+标题+文本的无限重复）
- 首想模态框（先穷尽内联/渐进式替代方案）
AI 痕迹测试
如果用户一眼能看出 “这是 AI 生成的”，设计就失败了。避免分类反射：
- 一阶反射: 监控 = 深蓝、金融 = 藏青+金、医疗 = 白+青
- 二阶反射: 避免 “不是 SaaS 奶油 = 编辑排版” 之类的陷阱
项目文件说明
impeccable-demos/
├── index.html # HTML 格式使用指南
├── README.md # 本文件
├── 01-brand-landing.html # 品牌落地页案例
├── 02-saas-dashboard.html # SaaS 仪表盘案例
├── 03-component-system.html # 组件设计系统案例
├── 04-onboarding-flow.html # 新用户引导案例
├── 05-animated-interaction.html # 动效交互案例
├── 06-ecommerce-product.html # 电商产品页案例
└── screenshots/
├── 00-guide-preview.png # 指南文档预览
├── 01-brand-landing.png # 案例1截图
├── 02-saas-dashboard.png # 案例2截图
├── 03-component-system.png # 案例3截图
├── 04-onboarding-flow.png # 案例4截图
├── 05-animated-interaction.png # 案例5截图
└── 06-ecommerce-product.png # 案例6截图
