这是什么
一个 CSS 方案，在内容容器两侧各加一条 1px 竖线，可选带迷你角方块。参考线位于内容之下，不响应指针事件。
Add vertical container-size guide lines with mini corner squares for precise, structured web layouts. Use when asked for container lines, measured layout guides, vertical boundary lines, editorial grid markers, or small
它对设计意味着什么
- 把容器宽度显出来，松散的首屏区块因此有了结构张力。
- 参考线共用容器的 max-width 和内边距，永远不会跑偏。
- 关掉了指针事件，竖线不会挡住点击或选中。
包含哪些内容
- Use when
- Rules
- Base tokens
- Page container lines
- Corner squares
- Minimal section wrapper
如何安装
Container Lines
-
克隆这个仓库。
git clone https://github.com/MengTo/Skills -
把 Codex 指向这个 Skill 文件。
agent-skills/web-design/container-lines/SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
给布局外壳加上 container-lines 类。
-
角方块只放在真正的容器或区块拐角上。
-
确认竖线在浅色和深色背景上都足够克制。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。