pbakaus/impeccable：让 AI 生成的界面从"能用"变"好看"

一套专门教 AI 做设计的技能包，包含 17 个命令，解决 AI 生成界面的审美问题。

一句话：浓缩了专业设计师经验的 AI 技能包，让你的界面从"能跑"变成"能发布"。

你是否遇到这些问题

AI 生成的界面很"AI 味"，风格不统一
多次对话生成的页面间距、圆角、交互都不一致
不知道哪里有问题，也不知道怎么改

Impeccable 包含 17 个专业设计命令，能统一界面风格、诊断设计问题、优化 UI 和交互。

我用它优化了 01mvp 网站，整体风格更统一，质量提升明显。

快速开始

安装

npx skills add pbakaus/impeccable -y

第一次使用（必做）

/teach-impeccable

AI 会问你品牌调性、目标用户、视觉偏好，建立设计基线。

最常用的 5 个命令

1. /critique — 诊断界面哪里有问题

/critique          # 检查整个页面
/critique header   # 只检查头部

2. /polish — 上线前最后打磨

/polish            # 修复对齐、间距、细节问题

3. /colorize — 给单调界面加色彩

/colorize hero-section

4. /harden — 处理边界情况和错误

/harden form       # 改进表单的错误处理、溢出等

5. /adapt — 让界面在移动端也能用

/adapt table       # 适配移动端

记住这 5 个就够日常使用了，其他 12 个按需查阅。

完整命令列表（17 个）

命令格式：/命令 [可选目标]，例如 /audit header 只检查头部区域。

诊断类

/audit — 全面质量检查（无障碍性、性能、响应式）
/critique — UX 视角评审（视觉层级、信息架构）

结构与内容类

/distill — 精简到本质，去掉不必要的复杂度
/clarify — 优化不清晰的文案、错误提示、按钮文字
/onboard — 改进新��引导、空状态、首次使用体验
/extract — 提取可复用组件，整合到设计系统

视觉表达类

/colorize — 给单调界面添加色彩
/bolder — 增强视觉冲击，让设计更大胆
/quieter — 降低视觉强度，让设计更克制
/delight — 添加惊喜时刻和个性化元素
/animate — 添加动画、微交互、动态效果

适配与稳定类

/adapt — 多端适配（不同屏幕尺寸、设备）
/normalize — 统一设计系统，保持风格一致
/harden — 增强健壮性（错误处理、国际化、文本溢出）
/optimize — 性能优化（加载速度、渲染、动画流畅度）

收尾类

/polish — 上线前打磨（对齐、间距、细节）
/teach-impeccable — 建立设计上下文（首次必做）

典型使用场景

场景 1：优化现有项目（最常见）

你已经有一个能跑的网站/应用，但界面质量不够专业，想要整体提升。

# 第一步：建立设计基线
/teach-impeccable

# 第二步：全面诊断问题
/critique

# 第三步：根据诊断结果，逐个修复
/distill homepage        # 精简首页
/colorize dashboard      # 给仪表盘加色彩
/adapt mobile-nav        # 优化移动端导航
/harden form             # 加强表单健壮性

# 第四步：统一风格
/normalize               # 让所有页面风格一致

# 第五步：最后打磨
/polish

效果：所有页面的间距、圆角、色彩、交互都统一了，整体质量提升一个档次。

场景 2：新做的登录页太素

/critique login-page    # 先诊断
/colorize login-page    # 加品牌色
/polish login-page      # 最后打磨

场景 3：表单在手机上难用

/adapt form             # 适配移动端
/harden form            # 处理错误和边界情况

场景 4：Dashboard 信息太多

/critique dashboard     # 诊断问题
/distill dashboard      # 精简内容
/extract card-components # 提取统一组件

日常工作流

功能开发阶段 → 先跑通功能，不管美观

初步优化 → /critique 诊断 → /distill 精简 → /clarify 优化文案

视觉增强 → /colorize 加色彩 → /animate 加动效

稳定性保障 → /adapt 多端适配 → /harden 处理边界 → /optimize 性能优化

上线前收尾 → /audit 全面检查 → /polish 最后打磨

常见问题

Q: 每次都要跑 /teach-impeccable 吗？ A: 不用，只在项目第一次使用时跑一次。

Q: 17 个命令记不住怎么办？ A: 记住 5 个最常用的就够：/critique、/polish、/colorize、/harden、/adapt

Q: 如果 AI 改得太激进怎么办？ A: 用 /quieter 降低强度，或在命令后加要求，如 /bolder hero but keep it professional

Q: 可以只装部分命令吗？ A: 可以，单独安装：

npx skills add pbakaus/impeccable/critique
npx skills add pbakaus/impeccable/polish

它解决什么问题

AI 生成界面的常见问题：

字体总是 Inter/Roboto，毫无特色
灰色文字放在彩色背景上，看不清
纯黑纯灰配色，没有色彩倾向
卡片套卡片套卡片，层级混乱
动画用老土的 bounce 缓动

Impeccable 通过 1 个核心技能 + 17 个设计命令 + 7 大知识模块，教会 AI 避开这些坑。

核心组成

1 个核心技能：`frontend-design`

包含完整的设计知识体系，让 AI 在生成代码时就遵循设计原则。

7 大设计知识模块

Typography — 字体系统、配对策略、模块化比例
Color & Contrast — OKLCH 色彩空间、有色中性色、深色模式
Spatial Design — 间距系统、网格布局、视觉层级
Motion Design — 缓动曲线、动画编排、减弱动效支持
Interaction Design — 表单模式、焦点状态、加载指示器
Responsive Design — 移动优先、流式布局、容器查询
UX Writing — 按钮文案、错误提示、空状态文案

适合谁用

✅ 适合：

用 AI 写前端，但总觉得生成的界面"不够专业"
会写代码但不懂设计，想让产品更有品质感
团队没有设计师，需要结构化的设计流程
做 side project，想快速达到可发布的视觉质量

❌ 不适合：

只写后端，不碰前端界面
已有专业设计师，设计稿很完善
只做命令行工具或 API 服务

官方资源

官网：impeccable.style
GitHub：pbakaus/impeccable