这是什么
一个前端设计 Skill,命令分成构建、评估、精修、增强、修复、迭代几组。它读项目上下文和一份语域参考,再写出生产级代码。
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing page
它对设计意味着什么
- 语域一分,营销页和产品界面走各自的设计规则。
- 硬性禁令拒掉渐变文字、侧边条描边,以及每个区块头顶的小标签。
- 对比度下限写得明白:正文 4.5:1,大字 3:1。
包含哪些内容
- Setup
- Design guidance
- The AI slop test
- Commands
- Routing rules
- Hooks
如何安装
Impeccable
-
克隆这个仓库。
git clone https://github.com/pbakaus/impeccable -
把 Codex 指向这个 Skill 文件。
plugin/skills/impeccable/SKILL.md -
然后描述你想要的界面,Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
每次会话先跑一次 context.mjs,让 Skill 加载 PRODUCT.md 和 DESIGN.md。
-
带上目标文件调用命令,比如 critique、polish 或 animate。
-
开着 dev server 用实时模式,直接在浏览器里生成变体。
这里的每个插件都免费开源,并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗下一步
用 Open Design 做设计,省掉那些配置
你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。