Frontend Design Skill
1 个技能，18 条命令，以及精心策划的反模式指南，助你打造无可挑剔的前端设计。 对抗千篇一律的 AI 审美偏见。
$ impeccable audit ./src
# Scanning 24 anti-patterns...
✓ No bounce easing detected
✓ No gradient text found
✓ Neutrals properly tinted
$ ▌
为什么选择
Anthropic 创建了 frontend-design，一个引导 Claude 实现更优 UI 设计的技能。 Impeccable 在此基础上提供了更深入的专业知识和更多控制能力。
每个大语言模型都从相同的通用模板中学习。如果没有指导，你会得到同样可预测的错误： Inter 字体、紫色渐变、卡片嵌套卡片、彩色背景上的灰色文本。
包含 7 个领域特定的参考文件，覆盖排版、色彩、空间、动效等
用于审计、审查、优化、提炼、动画化等全流程操作
明确告诉 AI 不应该做什么，从根本上避免常见错误
参考资料
| 资料 | 涵盖内容 |
|---|---|
| Typography | 字体系统、配对、模块化比例、OpenType |
| Color & Contrast | OKLCH、着色中性色、深色模式、无障碍性 |
| Spatial Design | 间距系统、网格、视觉层次 |
| Motion Design | 缓动曲线、交错动画、减少运动 |
| Interaction Design | 表单、焦点状态、加载模式 |
| Responsive Design | 移动优先、流式设计、容器查询 |
| UX Writing | 按钮标签、错误消息、空状态 |
反模式指南
不要使用过度使用的字体
(Arial、Inter)
不要在彩色背景上使用灰色文本
不要使用纯黑/纯灰
(始终着色)
不要嵌套卡片
不要使用弹跳/弹性缓动
18 条命令
从审计到发布，每一步都有对应的命令来确保设计质量
/impeccable teach
设置
一次性设置：收集设计上下文，保存到配置
/impeccable craft
核心
完整的先塑形后构建流程，支持可视化迭代
/impeccable extract
系统
将可复用组件和令牌提取到设计系统中
/audit
运行技术质量检查（无障碍性、性能、响应式）
/critique
UX 设计审查：层次结构、清晰度、情感共鸣
/polish
最终审查、设计系统对齐和发布准备
/distill
提炼至本质，移除不必要的复杂性
/optimize
性能优化，提升加载速度和运行效率
/harden
错误处理、新手引导、国际化、边界情况
/animate
添加有目的的运动效果和过渡动画
/colorize
引入战略性色彩，增强视觉表现力
/bolder
强化单调的设计，增加视觉冲击力
/quieter
降低过于大胆的设计，回归平衡
/delight
添加愉悦时刻，提升用户体验
/adapt
适配不同设备和上下文环境
/typeset
修复字体选择、层次结构、大小
/layout
修复布局、间距、视觉节奏
/overdrive
添加技术上非凡的效果和高级特性
CLI 工具
无需 AI 工具即可检测反模式。扫描目录、文件或 URL， 捕获 24 个问题，涵盖 AI 垃圾代码和一般设计质量。
$ npx impeccable detect src/
🔍 Scanning 24 anti-patterns...
📁 Analyzing 47 files...
⚠ Warning: card-component.tsx
→ Border-left: 4px solid (line 23)
→ Gradient text detected (line 45)
⚠ Warning: hero-section.tsx
→ Purple-to-blue gradient (line 12)
✅ 4 issues found in 2 files
$ ▌生态兼容
无论你使用哪种 AI 开发工具，Impeccable 都能无缝集成
快速开始
从网站下载资源包，或直接复制配置文件到你的项目
使用示例
单独使用或组合命令形成完整的质量保障流程
/audit /normalize /polish blog
审计 → 修复 → 优化的完整工作流
/critique /harden checkout
UX 审查 + 错误处理的组合流程