前端与 UI
design-skills · Terracotta
奶油底配陶土强调色，DM Serif Display 标题，专为长文阅读。
这是什么
一个日晒编辑风界面的规范 Skill：奶油色 #F3E9D8 表面、一种陶土色 #C56A3C 强调、DM Serif Display 标题、JetBrains Mono，专为博客和叙事调校。
A sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent.
它对设计意味着什么
- 只用一种强调色，强调因此稀有，层级靠标题撑起。
- 温暖的奶油底比纯白页更少眩光，适合长文。
- 衬线标题压着墨棕正文，定下清晰的编辑节奏。
包含哪些内容
- Brand
- Style foundations
- Rules: do
- Rules: don’t
- Component rule expectations
- Quality gates
如何安装
design-skills · Terracotta
-
克隆这个仓库。
git clone https://github.com/bergside/awesome-design-skills -
把 Codex 指向这个 Skill 文件。
skills/terracotta/SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
让 Codex 先认准陶土和奶油这套 token，再写任何组件。
-
逐组件要结构、变体和状态，间距 token 都点名写清。
-
改造已有的不一致界面时，让它给出反面案例和迁移说明。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。