01安装入门
交给 Agent 安装
复制下面的提示词给你的 Agent。它会先核对环境与冲突，再按仓库说明安装和验证。
请帮我安装 Codex Design Skills。开始前先检查我的 Codex 环境、所需依赖和是否已经存在同名 Skill；不要覆盖已有内容。阅读 duxinrui9-gif/codex-design-skills 仓库的 README、安装说明和许可证后，按仓库提供的方法安装。完成后执行仓库提供的校验方式，并告诉我安装位置、校验结果，以及第一次该怎么使用。遇到路径冲突、权限问题或来源无法确认时请停止并说明原因。
准备
确认 Codex 可用，阅读仓库的 README、安装脚本、许可证与来源说明。检查是否已有同名 Skill，遇到冲突时停止，不覆盖。
安装
在单独克隆的仓库中，阅读脚本后使用默认安装方式：
./scripts/install.sh
python3 scripts/verify.py安装器不负责配置额外的设计服务、浏览器或运行时依赖。首次安装不使用替换选项。
首次使用
选择一个低风险设计任务，说明受众、目标、资料、边界和验收方式，让 Agent 提出方向后再进入制作。
检查结果
确认 Skill 可被发现，仓库校验通过，第一次任务遵守了范围。安装成功不代表设计已经验收。以下 DESIGN.md 与 VI 内容作为后续实践。
这份指南的目标
DESIGN.md 是让人和 Agent 在同一套视觉判断下工作的项目设计宪章；VI 手册则是把已经确定的视觉识别整理成可交付、可复用的规范。两者的顺序很重要：先定义判断，后制作手册。
DESIGN.md 和 VI 手册有什么区别
| 文档 | 解决的问题 | 适合出现的阶段 |
|---|---|---|
| DESIGN.md | 这个项目应当呈现怎样的气质、信息层级和交互原则 | 方向确认前后，贯穿整个项目 |
| VI 手册 | 标志、色彩、字体、图形和应用如何一致地使用 | 品牌方向确定后，用于交付和协作 |
不要把一堆颜色和字体直接当成 DESIGN.md。它需要写清目标用户、使用场景、品牌关键词、应避免的视觉倾向、页面密度和内容优先级；VI 手册则需要把这些原则变成可执行的组件和版式规则。
开始前：收集可用而有限的材料
先准备品牌名称、业务目标、受众、已有的文字资料、明确可用的视觉资产，以及必须遵守的限制。不要混入来源不明的图片、未经确认的事实或客户私密资料。
把研究拆成三个问题：
- 谁会在什么场景看到这套设计？
- 希望他们先理解什么，再感受到什么？
- 有哪些惯常做法不适合这个品牌？
第一步：提出设计方向，而不是直接画页面
建议先形成两到三个清楚区分的方向。每个方向用一句话说出核心气质，再补充色彩倾向、版式节奏、图像语言和不该出现的元素。方向之间要有真实差异，不能只是换一个主色。
例如，方向可以是“克制的专业编辑感”，也可以是“明亮、轻盈的工具感”。前者会强调留白、秩序和低饱和对比；后者可能使用更开放的网格、更高的可读性和少量明确的强调色。
第二步：写出 DESIGN.md
确认一条方向后，让 Agent 先输出提纲，再逐项补全。一个可用的 DESIGN.md 至少包含：
# 项目设计方向
## 用户与场景
## 品牌关键词与反关键词
## 信息层级与阅读节奏
## 色彩、字体与间距原则
## 图像与插画的使用边界
## 组件和交互原则
## 无障碍与窄屏要求
## 验收清单写到“品牌关键词”时，同时写反关键词。例如想要“精确、安静、可信”，就要明确避免“厚重装饰、过度发光、模板化卡片”。反关键词能帮助 Agent 在生成细节时少走偏。
第三步：把方向变成 VI 规范
VI 手册不必一开始追求几十页。先做最常被使用的一组规则：
| 模块 | 最小交付内容 |
|---|---|
| 标志 | 安全空间、最小尺寸、浅深背景用法和禁用示例 |
| 色彩 | 主色、辅助色、中性色、文字和状态色的用途 |
| 字体 | 标题、正文、注释的层级、字号和行高关系 |
| 图形 | 图标、线条、形状、圆角和图像裁切原则 |
| 版式 | 网格、边距、信息密度和窄屏折叠方式 |
| 应用 | 至少一张网页或物料示例，展示规范怎样落地 |
数值可以随着真实使用调整，但每条规则都要说明用途。只列一串色值，而不说明背景、强调和错误状态如何使用，会让手册无法指导实际制作。
用 AI 生成视觉素材时的边界
AI 图像适合探索情绪、构图和背景氛围，不应被当作未经检查就能发布的事实素材。先写清画面主体、镜头、色彩、留白位置、禁止元素和使用尺寸；生成后检查文字、手部、品牌标识、文化含义和授权边界。
对于人物、客户、产品、数据或需要准确表达的信息，优先使用已确认的真实素材。任何不能核验的细节都不要借由画面暗示为事实。
从网页稿到可审阅手册
制作时可以用 HTML 组织章节、目录、色板和组件示例，再在浏览器中逐页审阅。重点检查：
- 目录能否快速找到规范。
- 色彩在深浅背景和小字号下是否仍清楚。
- 表格、色板和图片在窄屏能否阅读。
- 示例是否真的遵守前面的规则。
- 导出前是否删除了草稿说明和未确认素材。
需要交付文档时，再从已经审阅的页面导出。不要把“能导出”当作“已经验收”。
常见问题
研究还不完整，可以先写 DESIGN.md 吗？
可以，但要把不确定项标成待确认，并只写当前已知范围。DESIGN.md 是可迭代的项目文档，不是用猜测填满的最终宣言。
VI 手册和网页设计稿谁先做？
先确定方向和基础规范，再用网页作为应用验证。网页发现的问题可以反哺规范，但不要让单页的偶然选择变成没有理由的全局规则。
Agent 输出看起来很完整，但总觉得不对怎么办？
回到用户、场景和反关键词，要求它解释每个选择如何服务目标。优先修正信息层级、可读性和风格一致性，而不是继续叠加装饰。
完成标准
当新加入的协作者读完 DESIGN.md 能理解设计判断，读完 VI 手册能在常见页面或物料中做出一致选择，这两份文档就已经发挥作用。后续每次重要应用都应回填一个实际例子，让规范保持可用。