前端与 UI
design-skills · Editorial
严格 8pt 网格上的杂志排版，用 Gelasio 衬线。
这是什么
一个现代编辑风的设计规范 Skill：正文和标题都用 Gelasio 衬线，搭 Ubuntu Mono，白底配近黑 #111111，8pt 基线网格。
Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
它对设计意味着什么
- 标题和正文出自同一衬线字族，长篇阅读的排版始终统一。
- 8pt 基线网格贯穿标题、正文和间距，稳住垂直节奏。
- 无障碍底线包含减弱动效支持、44px 触控区和高对比处理。
包含哪些内容
- Style foundations
- Accessibility
- Guideline authoring workflow
- Required output structure
- Component rule expectations
- Quality gates
如何安装
design-skills · Editorial
-
克隆这个仓库。
git clone https://github.com/bergside/awesome-design-skills -
把 Codex 指向这个 Skill 文件。
skills/editorial/SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
让 Codex 先复述设计意图，定好 token 再碰组件。
-
要它给出覆盖结构、变体、状态和响应式行为的组件规则。
-
最后走一遍 QA 清单，方便代码评审核对产出。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。