受够了AI生成的那些千篇一律的Inter字体、紫色渐变、卡片套卡片？这个技能包专治各种“AI设计通病”。
用过OpenCode写前端的朋友可能都有这种感觉：AI生成的界面，总有一股挥之不去的“AI味”。说不上哪里不对，但就是不够专业、不够精致。
这不是你提示词的问题，是大模型训练数据的锅——它们学到的那些模板，本来就是互联网上最泛滥的设计。
今天要介绍的Impeccable，就是专门解决这个问题的技能包。它基于Anthropic官方开源的frontend-design技能，做了深度增强，配了17条专用命令和7个设计参考文件，让OpenCode写出来的界面真正能看。
先来看看AI设计的“通病”：
-
字体永远是Inter（或者Arial、系统默认） -
背景带彩色的地方，文字用纯灰色 -
用色永远是纯黑、纯白、纯灰，没有色彩倾向 -
布局就是卡片套卡片，看久了审美疲劳 -
动画永远用弹簧缓动，2019年流行的效果现在还往外拿
这些问题的根源，不是AI能力不行，是训练数据里全是这些东西。你让AI“设计个卡片”，它给你翻出1000个卡片模板，最后选了个最常见的。
Impeccable的做法是：明确告诉AI什么不能做，什么该怎么做。它通过7份设计规范文档和17条精确指令，把专业前端的知识固化下来，让AI照着执行。
安装后，OpenCode会读到这7份文档，涵盖了前端设计的核心领域：
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
每份文档都包含大量“该怎么做”和“不该怎么做”的明确指引。
这才是Impeccable的杀手锏。你可以在对话中直接使用这些命令，让AI执行特定设计任务：
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
每个命令后面还可以跟具体参数，比如/audit header只审查头部区域，/polish checkout-form只润色结账表单。
⚠️2025年更新：现在可以直接使用 SkillsCLI一键安装，无需手动下载ZIP包。
1. 一行命令安装
注意： -g表示全局安装（用户级别），-y跳过确认提示。
2. 安装位置
技能会安装到~/.agents/skills/目录（注意是.agents而不是.claude）。
3. 确认安装成功
安装完成后，可以问OpenCode：“你现在有哪些可用的设计技能？”如果能提到frontend-design或相关命令，说明装好了。
如果上述方式不生效，可以尝试手动安装：
-
访问impeccable.style（https://impeccable.style/#downloads），下载对应工具的ZIP包。 -
解压到你当前OpenCode项目的根目录。 -
主要文件结构是 .agents/skills/frontend-design/（OpenCode使用.agents而非.claude）。
装好后，你可以在对话中这样用：
“帮我审查一下这个登录页面的设计”
AI会调用Impeccable的设计规范，给出技术审查报告。
或者：
“这个弹窗有点平淡，帮我加一点惊喜感”
AI会根据动效设计和交互规范，给你的弹窗加上合适的微交互。
来看几个具体的“反模式”案例，都是Impeccable明确禁止的：
❌不用的字体
-
禁止Arial、Inter、系统默认字体 -
要求根据品牌气质选择合适的字体搭配
❌不用的颜色
-
禁止彩色背景上放灰色文字 -
禁止用纯黑、纯灰（必须加色调倾向）
❌不用的布局
-
禁止到处套卡片 -
禁止卡片里再套卡片（避免“俄罗斯套娃”）
❌不用的动画
-
禁止用弹簧/弹性缓动（已经过时） -
要求动效必须有目的，不能为了动而动
这些规则都写在了参考文件里，AI每次执行任务时都会读到，逐渐形成“设计肌肉记忆”。
- 产品原型阶段
：用 /critique快速获取设计反馈 - 开发落地阶段
：用 /audit检查实现是否符合规范 - 上线前打磨
：用 /polish做最后润色 - 设计系统建设
：用 /normalize统一代码风格
如果你正在用OpenCode写前端项目，Impeccable能让AI输出的界面质量上一个台阶。那些以前需要你手动调教的“AI味”，会被这套规范系统性地消除。
Impeccable 已在GitHub开源，感兴趣的朋友可以去看源码、提Issue、贡献自己的设计规范：
👉https://github.com/pbakaus/impeccable