设计系统

Agency Grid Layout Minimal

编辑式多栏网格,超大标题配极小的大写标签。

这是什么

一套面向工作室网站的布局方向:宽网格外壳、超大展示标题、相邻栏里的小号大写元信息,以及建筑感的图像块。

Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.
来自上游 SKILL.md

它对设计意味着什么

  • 严格的栏位摆放,让每个元素的位置都显得是有意为之。
  • 展示标题和极小元信息之间的尺寸反差承载着层级。
  • 留白被保留而非填满,页面保持编辑气质。

包含哪些内容

  • Scope
  • Visual target
  • Implementation guidance
  • Recommended patterns
  • Tuning knobs
  • Avoid

如何安装

Agency Grid Layout Minimal

  1. 克隆这个仓库。

    git clone https://github.com/MengTo/Skills
  2. 把 Codex 指向这个 Skill 文件。

    agent-skills/web-design/agency-grid-layout-minimal/SKILL.md
  3. 然后描述你想要的界面,Codex 会照着这个 Skill 来做。

如何配合 Codex 使用

  1. 先定一个宽 max-width 的外壳,栏位分隔可见。

  2. 让首屏标题横跨大部分栏,辅助文案放侧栏。

  3. 把服务条目做成多栏列表,配极小的元信息标签。

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

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

下一步

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

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