这是什么
一套十二栏网格方案，每个区块都吸附到共享栏，装进 1px 边框的盒子里。L 形角标记作为背景层，画在低透明度的斜向纹理之上。
Create minimal framed grid layouts with thin visible boundary lines, L-shaped corner brackets, subtle diagonal line texture, and strict section alignment. Use when asked for clean, neutral, precise, structured, editorial
它对设计意味着什么
- 每个区块共用一种边框色、一种角标记尺寸、一套间距刻度。
- 角标记不需要额外标签，结构留在 CSS 里。
- 就算去掉纹理层，版面依旧清晰易读。
包含哪些内容
- Use when
- Layout rules
- Base tokens
- Parent grid
- L-shaped corner brackets
- Section spans
如何安装
Framed Grid Layout
-
克隆这个仓库。
git clone https://github.com/MengTo/Skills -
把 Codex 指向这个 Skill 文件。
agent-skills/web-design/framed-grid-layout/SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
要一个技术风或编辑风页面，先拿到父级网格。
-
用明确的跨栏类，而不是临时定的区块宽度。
-
在两个断点下都核对边框边缘的横竖对齐。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。