AI开发

Impeccable:30个斜杠命令,随时微调AI的设计方向

2026-07-22 · 46 次阅读 · 约 7 分钟
#AI设计 #开源项目 #Impeccable

Impeccable:30个斜杠命令,随时微调AI的设计方向

用过AI生成设计页面的人,大概都经历过这种拧巴:给了详细prompt,AI缩手缩脚不敢发挥,出来的东西死板得像填模板;给了简单prompt,AI倒是放飞了,但飞出来的页面一股"一眼AI"的味道——对称居中、大色块、配图糊弄,十篇长得一个样。

这其实暴露了一个核心问题:AI生成前端的过程,本质上是一个黑盒。你告诉它"做个SaaS落地页",它吐出一整版,你觉得"嗯…差点意思",但说不上差在哪,也不知道怎么调。从头改prompt?成本太高。手改代码?那我还用AI干嘛?

之前我聊过taste-skill——它解决的是"写之前"的问题:把设计规则写成硬约束,AI还没动笔就被框在品味范围内,相当于事前清单。但写作之前总不能穷尽所有规则,总有AI跑偏的时候。

这时候就需要一个"事中微调"的工具:Impeccable

一个CLI,50多个脚本,30个斜杠命令

Impeccable( impeccable-skill )是GitHub上16K+ Stars的开源项目,作者是thejackshelton。它不是一份简单的规则文件,而是一个正经的Node.js项目——包含CLI工具、IDE扩展,以及50多个JS脚本。你可以把它理解成一个设计方向调整器的工具箱

安装很简单,前提是你已经有了Node.js环境:

npx skills add impeccable

装完之后,你就在AI编程环境里获得了一套斜杠命令体系。每个命令都是一个独立的设计方向调整器,覆盖了从新建页面到上架精修的完整流程。

命令矩阵:每个斜杠都是一个旋钮

Impeccable目前有30+个斜杠命令,我挑几个最常用的说说。

/impeccable craft —— 入口命令

从头构建新页面。比如 /impeccable craft "SaaS落地页",AI就会基于你的描述生成一个完整的页面结构。这是所有工作流的起点。

/impeccable critique —— 双Agent设计评审

这个命令挺有意思的——它会拉起两个AI Agent,一个扮演设计师,一个扮演用户,对当前页面进行评审并生成评分报告。相当于你多了一个虚拟设计团队帮你做Code Review,只不过审的是设计。

/impeccable audit —— 技术审计

五维评分,满分20:可访问性、性能、主题一致性、响应式设计、代码质量。每个维度都会给出具体问题和改进建议。我自己的习惯是,每做完一轮修改就跑一次audit,像测试用例一样验证设计质量。

/impeccable polish —— 上架前精修

所有细节再打磨一遍:间距是否一致?颜色对比度够不够?圆角大小是否协调?交互反馈有没有遗漏?当你说"差不多了,上线吧",polish会帮你再扫一遍雷。

视觉调性相关的命令

  • /impeccable quieter:调低视觉强度——去饱和、减少动画、增加留白。适合那种"太吵了"的页面。
  • /impeccable bolder:跟quieter反着来——增加视觉冲击力,适合需要抓眼球的营销页。
  • /impeccable distill:极简主义,删掉所有不必要的东西。Less is more,但AI默认不会帮你做减法。
  • /impeccable colorize:配色生成,可以基于品牌色或色板自动推导全套配色方案。
  • /impeccable typeset:排印精调——字号层级、行高、字间距、字体搭配,一条命令搞定排印体系的微调。
  • /impeccable animate:动效设计——给页面加上适当的过渡和微动效,让交互变得丝滑。
  • /impeccable layout:布局优化——调整网格系统、Flex/Gap、对齐方式。
  • /impeccable clarify:UX文案重写——把模糊的按钮文案、占位符提示改成用户能秒懂的措辞。
  • /impeccable delight:加彩蛋——hover效果、微交互动画、页面过渡,那些让用户"哇"一下的小细节。

每个命令不是覆盖所有设计问题,而是只做一件事,做好一件事。这就是"旋钮思维"——你需要降噪就拧quieter,需要加冲击力就拧bolder,各司其职,互不干扰。

一个完整的工作流示例

假设你要做一个SaaS产品落地页,实际的工作流可能是这样:

1. /impeccable craft "SaaS落地页"     → 生成初版
2. /impeccable typeset                  → 调整排印体系
3. /impeccable colorize "#6366F1"       → 基于品牌色生成配色
4. /impeccable quieter                  → 降噪(AI默认太爱堆元素了)
5. /impeccable audit                    → 跑评分,看分数
6. 根据audit报告手动微调
7. /impeccable delight                  → 加一些精致小交互
8. /impeccable polish                   → 收尾精修,准备上线

每一步都是即时生效的,不需要来回改prompt,也不需要退出编辑器去Figma里调。AI生成的页面本身就成了一个可迭代的设计稿,这是impeccable最核心的体验价值。

taste-skill + impeccable = 事前 + 事中

前面提到taste-skill是"写之前不准出界",impeccable是"写之后随时调"。两者不是替代关系,而是互补:

  • taste-skill 设定了品味的下限——不管AI怎么生成,都在品味框架内。
  • impeccable 提供了方向的微调——生成之后,你觉得"偏了一点",拧一下对应的旋钮。

如果再加一个ponytail(控制生成体量的工具),就是三件套:

  • taste-skill → 品味兜底
  • impeccable → 方向微调
  • ponytail → 体量控制

三个维度,基本覆盖了AI生成前端质量的全部变量。品味决定了你不出丑,方向决定了你走对路,体量决定了你不失控。

说实话,这种"旋钮式"的交互哲学,比传统prompt engineering优雅太多了。你把AI当成一个需要不断微调的设计师,而不是一个"一次提示出成品"的魔法盒子。后者是运气,前者是工程。

如果你也在用AI生成前端页面,强烈建议试试impeccable——30多个旋钮,总有一个正好能把你当前页面拉回正轨。