By idwalker in 前端设计 — 04 Apr 2026

Impeccable：告别 AI 味，让 AI 生成专业级前端代码

一句话总结：12,000+ Stars，20 条命令，7 份专业文档，让 AI 生成的前端代码达到专业工程师水准。

为什么你的 AI 代码总有"AI 味"？

每个 LLM 都从相同的通用模板学习。没有引导，你会得到同样的可预测错误：

Inter 字体 — 又是 Inter...
紫色渐变 — 为什么总是紫色？
卡片嵌套卡片 — 套娃式设计
彩色背景上的灰色文字 — 对比度灾难

这不是 AI 的错。AI 只是没有得到正确的指导。

Impeccable 是什么？

Impeccable 是一个前端设计语言系统，由 Paul Bakaus 开发，基于 Anthropic 官方的 frontend-design 技能做了深度增强。

GitHub Stars: 12,000+ ⭐

核心组成：

组成部分	数量	说明
核心技能配置	1	基础设计原则和美学指导
实用命令	20	覆盖审计、修复、优化全流程
专项参考文档	7	排版、颜色、空间、动效、交互、响应式、UX写作
避坑规则	若干	明确告诉 AI 什么不要做

20 条命令系统

审计类命令

命令	功能	使用场景
`/audit`	运行技术质量检查（无障碍、性能、响应式）	修改前，了解需要修复什么
`/critique`	UX 设计评审：层级、清晰度、情感共鸣	需要设计反馈，而非技术修复

修复类命令

命令	功能	使用场景
`/normalize`	对齐设计系统标准	审计后，修复不一致
`/polish`	发布前的最后打磨	部署到生产前的最后一步
`/distill`	精简到本质	去除复杂度
`/clarify`	改进不清晰的 UX 文案	改善用户体验

优化类命令

命令	功能	使用场景
`/optimize`	性能优化	提升加载速度
`/harden`	错误处理、国际化、边缘情况	增强健壮性
`/animate`	添加有目的的动效	增加交互感
`/colorize`	引入策略性颜色	改善视觉层次

调整类命令

命令	功能	使用场景
`/bolder`	放大胆小的设计	设计太平淡
`/quieter`	收敛过于大胆的设计	设计太激进
`/delight`	添加愉悦时刻	增加情感连接
`/typeset`	修复字体选择、层级、大小	排版问题
`/arrange`	修复布局、间距、视觉节奏	布局问题

提取类命令

命令	功能	使用场景
`/extract`	提取为可复用组件	创建组件库
`/adapt`	适配不同设备	响应式设计
`/onboard`	设计新手引导流程	用户引导
`/overdrive`	添加技术非凡的效果	创造视觉亮点

设置命令

命令	功能
`/teach-impeccable`	一次性设置：收集设计上下文，保存到配置

命令使用示例

单一命令：

/audit blog              # 审计博客页面
/normalize buttons       # 标准化按钮样式
/polish feature-modal    # 打磨功能弹窗

组合命令（完整工作流）：

/audit /normalize /polish blog    # 审计 → 修复 → 打磨
/critique /harden checkout        # UX评审 + 增强健壮性

7 份专业参考文档

文档	覆盖内容
typography	字体系统、字体配对、模块化比例、OpenType
color-and-contrast	OKLCH、带色调的中性色、暗色模式、无障碍
spatial-design	间距系统、网格、视觉层级
motion-design	缓动曲线、错开动画、减少动效
interaction-design	表单、焦点状态、加载模式
responsive-design	移动优先、流式设计、容器查询
ux-writing	按钮标签、错误消息、空状态

明确的反模式清单

Impeccable 告诉 AI 什么不要做：

❌ 不要使用过度使用的字体

Arial、Inter、系统默认字体

❌ 不要在彩色背景上使用灰色文字

对比度不够，无障碍问题

❌ 不要使用纯黑/灰色

总是带一点色调，更自然

❌ 不要把所有东西都包在卡片里

避免卡片嵌套卡片

❌ 不要使用弹跳/弹性缓动

感觉过时，不够专业

与 Anthropic 原版对比

对比项	Anthropic frontend-design	Impeccable
命令数量	基础	20条
参考文档	基础	7份专业文档
反模式指导	无	明确的反模式清单
跨平台支持	Claude only	10+ 平台
Stars	-	12k+ ⭐
社区案例	无	官网 before/after 案例

支持 10+ 主流 AI 工具

工具	安装方式
Cursor	`cp -r dist/cursor/.cursor your-project/`
Claude Code	`cp -r dist/claude-code/.claude your-project/`
OpenCode	`cp -r dist/opencode/.opencode your-project/`
Pi	`cp -r dist/pi/.pi your-project/`
Gemini CLI	`cp -r dist/gemini/.gemini your-project/`
Codex CLI	`cp -r dist/codex/.codex/* ~/.codex/`
Trae 国内版	`cp -r dist/trae/.trae-cn/skills/* ~/.trae-cn/skills/`
Trae 国际版	`cp -r dist/trae/.trae/skills/* ~/.trae/skills/`
Rovo Dev	`cp -r dist/rovo-dev/.rovodev your-project/`

快速上手

1. 下载技能包

访问 impeccable.style，下载适合你工具的 ZIP 包。

2. 安装（以 Claude Code 为例）

# 项目级安装
cp -r dist/claude-code/.claude your-project/

# 或全局安装（应用到所有项目）
cp -r dist/claude-code/.claude/* ~/.claude/

3. 开始使用

# 首次设置
/teach-impeccable

# 审计现有代码
/audit

# 修复问题
/normalize

# 最终打磨
/polish

注意事项

Cursor 需要 Nightly 通道
- 设置 → Beta → 切换到 Nightly
- 启用 Agent Skills
Gemini CLI 需要预览版
```
npm i -g @google/gemini-cli@preview
```
Trae 有两个版本
- 国内版：~/.trae-cn/skills/
- 国际版：~/.trae/skills/
Codex CLI 使用不同语法
- /prompts:audit 而非 /audit

使用场景建议

场景	建议命令组合
新项目开始	`/teach-impeccable` → `/audit`
修复现有项目	`/audit` → `/normalize` → `/polish`
发布前检查	`/critique` → `/harden` → `/polish`
设计太平淡	`/bolder` → `/delight`
设计太激进	`/quieter` → `/normalize`
提取组件	`/extract` → `/normalize`

案例研究

访问 impeccable.style#casestudies 查看真实的 before/after 案例转换。

结语

AI 生成代码很快，但质量常常堪忧。

Impeccable 给了你一个选择：

要么继续忍受 Inter 字体 + 紫色渐变 + 卡片嵌套
要么用 20 条命令，让 AI 输出专业级代码

一条命令安装，一个命令开始。

/teach-impeccable

告别 AI 味，从今天开始。

本文基于 Impeccable 官方文档和 GitHub 仓库撰写，已同步更新至 skillsAgent.org 数据库。