这是什么
一个便当盒布局的规范 Skill，把内容摆成大小不一的网格块。全程 Inter，12 到 32 的紧凑字号阶梯，奶油底配桃色和蓝色强调。
Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
它对设计意味着什么
- 块的大小差异承载层级，网格本身就在排优先级。
- 12 到 32 的紧凑字号阶梯，让密集文字塞进小方块。
- 奶油色 #FFF5E6 表面让块的边界不靠重描边也清晰。
包含哪些内容
- Brand
- Style foundations
- Rules: do
- Component rule expectations
- Required output structure
- Quality gates
如何安装
design-skills · Bento
-
克隆这个仓库。
git clone https://github.com/bergside/awesome-design-skills -
把 Codex 指向这个 Skill 文件。
skills/bento/SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
让 Codex 按内容优先级给每个块定尺寸。
-
排块之前先在 4 到 32 的阶梯上定好间距 token。
-
让它处理溢出和长标签，这个 Skill 把它们列成了边界情况。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。