Codex 前端设计 skill 推荐。

开箱即用的 Codex 能设计出合格、但似曾相识的界面。设计 skill 给它审美：在字体排版、间距和布局上有自己的主张。下面是值得了解的 skill 和插件，各自擅长什么，以及怎么安装。

更新于 2026年11月5日 · 阅读约 7 分钟

设计 skill 到底做了什么

skill 是一组指令，任务需要时 Codex 才会加载。设计 skill 通常会告诉 Codex：用哪些字体和字号层级，留多少空白，哪些布局模式看起来像套模板、应该避开，以及怎么检查结果。模型还是那个模型，但它拿到的需求说明好得多。

下面大多数 skill 都以 Codex 插件的形式发布，装一次就能得到一整套。安装后新开一个 Codex 会话，让 skill 加载进来，然后输入 $ 加 skill 名称来调用它，或者在请求匹配时让 Codex 自己挑。

1. Taste Skill（design-taste-frontend）

最适合：不想看起来像 AI 生成的落地页、营销网站和改版设计。

Taste Skill 是 Leonxlnx 开发的开源 skill，采用 MIT 许可证，也是 GitHub 上最受欢迎的设计 skill 之一。它的主 skill design-taste-frontend 从客户的需求说明出发，在 20 个经过研究的设计方向里选定一个，找来带署名的开放授权图片，并在浏览器里用三种宽度检查结果。2.1 版本把它扩展到了仪表盘和 App 界面。它需要 Node.js 22 或更高版本，以及 Chrome、Edge 或 Chromium。

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

2. 风格类 skill：柔和、极简和粗野主义

最适合：你已经清楚自己想要什么样的视觉效果。

同一位作者把早期的单一风格 skill 放在另一个合集里。每一个都只在你点名调用时才会运行：

high-end-visual-design：沉静、精致的 UI，对比柔和，留白宽松，配有弹簧动效。
minimalist-ui：杂志编辑风格的产品 UI，配色克制，结构干净。
industrial-brutalist-ui：冷峻的瑞士风格字体排版，强烈的对比，实验性的布局。
gpt-taste：针对 GPT 模型和 Codex 调校的更严格版本，布局变化更多，动效更大胆。

codex plugin marketplace add Leonxlnx/taste-skill-classics
codex plugin add taste-skill-classics@taste-skill-classics

3. 图片优先的 skill

最适合：在写任何代码之前，先用图片探索视觉方向。

这类 skill 让 Agent 先生成设计图。imagegen-frontend-web 为落地页的每个区块各生成一张图，imagegen-frontend-mobile 生成风格统一的成套 App 界面，image-to-code 则先生成图片、研究这些图，再照着把页面做出来。它们需要一个能生成图片的 Agent。

codex plugin marketplace add Leonxlnx/imagegen-skills
codex plugin add imagegen-skills@imagegen-skills

4. Anthropic 的 frontend-design skill

最适合：想要一个简短、通用的提醒，把设计往「有意为之」的方向推一把。

Anthropic 在公开的 anthropics/skills 仓库里发布了 frontend-design，采用 Apache 2.0 许可证。它在审美方向和字体排版上给出指导，帮助做出不像模板默认值的选择。它原本是为 Claude 写的，但用的是同样的 SKILL.md 格式，所以把 frontend-design 文件夹复制到 ~/.agents/skills 就能在 Codex 里用。

5. Figma 插件

最适合：设计稿和设计系统都放在 Figma 里的团队。

OpenAI 的插件目录里有一个 Figma 插件，涵盖 Code to Canvas、Code Connect 和设计系统规则。可以在插件目录（Plugins Directory）里找到它，也可以在 Codex CLI 里运行 /plugins。

Codex Design 在其中的位置

我们的插件 Codex Design 不是风格类 skill。它给 Codex 一块画布：界面和参考图并排摆放，还能可视化地修改字体、颜色和间距。它可以和上面任何一个 skill 搭配使用：让审美类 skill 塑造设计，再在画布上对比它给出的几个方向。一句提示词就能安装 Codex Design。

为你自己的设计系统写一个 skill

最好的设计 skill 往往是你自己写的。如果你的产品已经有配色、字体和组件，把它们写下来一次，之后 Codex 设计的每个界面都会遵循。把下面的内容保存为仓库里的 .agents/skills/acme-ui/SKILL.md：

---
name: acme-ui
description: Acme 的视觉设计规范。设计或审查任何 Acme 界面、页面或组件时使用。
---

# Acme UI

## 基础规范
- 颜色：ink #1F2430，accent #3B5BDB，surface #F7F8FA。不用其他色相。
- 字体：Inter。正文 16px/1.5，标题字重 600，每个界面最多 3 种字号。
- 间距：8px 的倍数。卡片内边距 24px，圆角 12px。

## 组件
- 主按钮用纯色 accent，每个界面只有一个。
- 表单的标签放在输入框上方，不要用占位文字代替标签。

## 完成之前
- 检查对比度是否达到 WCAG AA。
- 在 390px 和 1440px 宽度下检查布局。

描述要写具体。Codex 根据描述决定什么时候使用某个 skill，所以「设计或审查任何 Acme 界面时使用」比「设计规范」效果好得多。

小贴士

一次只用一个风格 skill。 极简风 skill 和粗野主义 skill 给出的指令会互相冲突。
重要的时候点名调用 skill，比如 $minimalist-ui，不要指望 Codex 自己选中它。
安装之前先读一遍 skill。 skill 是以你的 Agent 权限运行的指令，插件还可能添加工具和 hook。