前端与 UI

minimalist-ui

用暖色单色调和扁平 bento 网格,做出编辑风的界面。

这是什么

一套面向文档风极简界面的前端规范,固定了暖色单色调、衬线加等宽的字体层级、1px 描边的 bento 卡片,以及低饱和的柔和强调色。

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
来自上游 SKILL.md

它对设计意味着什么

  • 每张卡片和分隔线都用统一的 1px 浅灰描边,圆角干净利落。
  • 强调色只来自四种柔和的浅色,专门留给标签和行内代码使用。
  • 区块的层次感来自低透明度的图像,而不是空荡荡的纯色背景。

包含哪些内容

  • Absolute negative constraints
  • Typographic architecture
  • Color palette
  • Component specifications
  • Iconography and imagery directives
  • Subtle motion and micro-animations

如何安装

minimalist-ui

  1. 克隆这个仓库。

    git clone https://github.com/Leonxlnx/taste-skill
  2. 把 Codex 指向这个 Skill 文件。

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

如何配合 Codex 使用

  1. 提出页面需求,Skill 会先定下大留白,py-24 或 py-32。

  2. 它把文字宽度限制在 max-w-4xl 以内,并立刻套用单色调变量。

  3. 滚动入场的淡入效果只通过 IntersectionObserver 控制 transform 和 opacity。

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

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

下一步

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

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