Codex Kunchenguid 设计系统页面｜设置标注标题和手机网格
EnglishCodex 安装步骤
- 打开 GitHub 固定提交的 `.agents/skills/use-kunchenguid-design-system/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.agents/skills/use-kunchenguid-design-system/`，把核对后的文件保存为 `.agents/skills/use-kunchenguid-design-system/SKILL.md`。
- 在该项目根目录启动 Codex，输入 `$use-kunchenguid-design-system` 并选择同名技能。
中文摘要
按 Kunchenguid 设计系统创建 HTML 页面，采用单概念标题标注、内容分区和能在手机上收为单列的网格。
SKILL.md 中文导读
可复现示例
给演示说明页拟标题和网格结构。
{"title":"Find the [next step].","sections":2,"desktopColumns":2,"phoneWidthPx":390}工作步骤
- 按项目样板引入样式与标题标注脚本。
- 在标题里只标出一个方括号概念。
- 使用设计系统网格，核对不同屏幕尺寸。
验收方法
为标题加 `data-annotate` 并保留 `[next step]`。采用 `grid--2` 在桌面分为两列，并在 `390px` 下检查单列。
GitHub 原文 · 更新日期
适用环境
在 Codex 打开目标 HTML 项目。页面按原仓库示例加载该设计系统发布的 CSS 和 JavaScript。
常见问题
标题可以标多个方括号概念吗？
每个需标注标题选择一个核心概念，保持标题简短且便于扫读。