前端与 UI

Impeccable

二十来条命令,用来构建、评审和打磨前端界面。

这是什么

一个前端设计 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
来自上游 SKILL.md

它对设计意味着什么

  • 语域一分,营销页和产品界面走各自的设计规则。
  • 硬性禁令拒掉渐变文字、侧边条描边,以及每个区块头顶的小标签。
  • 对比度下限写得明白:正文 4.5:1,大字 3:1。

包含哪些内容

  • Setup
  • Design guidance
  • The AI slop test
  • Commands
  • Routing rules
  • Hooks

如何安装

Impeccable

  1. 克隆这个仓库。

    git clone https://github.com/pbakaus/impeccable
  2. 把 Codex 指向这个 Skill 文件。

    plugin/skills/impeccable/SKILL.md
  3. 然后描述你想要的界面,Codex 会照着这个 Skill 来做。

如何配合 Codex 使用

  1. 每次会话先跑一次 context.mjs,让 Skill 加载 PRODUCT.md 和 DESIGN.md。

  2. 带上目标文件调用命令,比如 critique、polish 或 animate。

  3. 开着 dev server 用实时模式,直接在浏览器里生成变体。

这里的每个插件都免费开源,并附上真实的上游源地址。

在 codex-design 清单上了解更多 ↗

下一步

用 Open Design 做设计,省掉那些配置

你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。