中文 | English
一个为 Codex 编写的设计工作流 skill,帮助 AI 从常见模板中走出来,为网页、应用和游戏界面建立清晰、有辨识度的视觉方向。
它把设计任务组织成 探索 → 定义 → 交付:先拓宽创意,再把方向落实到界面,最后通过实际截图和减法精修改善结果。视觉选择始终围绕目标用户和主要任务展开。
- 为新产品、落地页或游戏界面探索视觉概念。
- 重新设计一个功能可用、但缺少个性或层级的页面。
- 改善重复卡片、机械布局和无目的装饰带来的模板感。
- 在已有审美方向下,完善字体、构图、素材与交互的一致性。
- 使用真实截图获得具体的设计反馈,再实施有限轮次的改进。
普通功能修改、局部样式修复和已经明确的小问题,可以直接处理,不需要完整启动探索流程。现有品牌规范、用户指定方向和项目技术栈始终是约束。
| 方法 | 如何使用 | 预期产物 |
|---|---|---|
| 多方向探索 | 提出约三个在构图、信息组织、字体或交互隐喻上不同的概念 | 简短、可比较的方向说明 |
| 具体的创意 brief | 把用户的喜好、反感和产品用途转成可执行约束 | 统一的设计依据 |
| 真实随机种子 | 陷入重复模板时,用本地随机源引入节奏、分组或对比灵感 | 新的探索线索,种子不显示在产品中 |
| 独立截图评审 | 在允许委派时,让新的评审上下文查看截图与 brief | 具体问题、调整建议与参考评分 |
| 按需生成媒体 | 当图片或视频能承担核心表达时使用,检查其与页面的融合 | 有用途的视觉素材与回退方案 |
| 减法精修 | 删除重复说明、无用容器和竞争注意力的效果 | 更清楚的层级与主要操作 |
这些方法是可选择的工具,不要求每次任务都使用随机种子、生成图片或制作视频。
在具备 skill-installer 的 Codex 环境中输入:
使用 skill-installer 安装 https://github.com/houxin0010/distinctive-ai-design 仓库根目录的 skill,名称为 distinctive-ai-design。
以下命令适用于 macOS/Linux,使用默认的用户 skill 目录:
mkdir -p ~/.agents/skills
git clone https://github.com/houxin0010/distinctive-ai-design.git ~/.agents/skills/distinctive-ai-design当前官方本地发现目录为 ~/.agents/skills,项目内可使用 .agents/skills。Windows 可将仓库克隆或解压到用户目录下的 .agents/skills/distinctive-ai-design。旧版本可能使用 ~/.codex/skills 或 CODEX_HOME/skills;请按本机版本确认,不保证旧目录在当前版本被加载。
目标目录必须尚不存在。已安装时请先查看本地修改,不要直接覆盖。安装后在支持加载本地 skills 的 Codex 会话中调用;若当前会话未识别,可新建会话后重试。
对于使用 Git 克隆且没有本地修改的安装:
git -C ~/.agents/skills/distinctive-ai-design pull --ff-only如果提示工作区存在修改或无法快进,先保留并处理本地变更,再更新。
在目标项目中提供页面位置、主要任务与约束,然后调用 skill:
使用 $distinctive-ai-design 改进当前首页。
目标用户是独立开发者,主要操作是查看产品功能并开始试用。
先提出三个真正不同的视觉方向,再选择最合适的一版实现。
沿用现有技术栈和组件,依据实际截图评审并精修。
skill 的执行指令目前为中文;可以用中文或英文提出任务。英文 README 是使用说明,不是单独的英文版 skill。
使用 $distinctive-ai-design 为我的办公题材游戏设计主菜单方向。
我想要克制、略带幽默的办公室氛围,避免霓虹和过度拟物。
给出三个构图与交互组织不同的概念,说明各自如何突出“开始游戏”。
本轮只提供概念与 brief,等我选择后再实现。
使用 $distinctive-ai-design 改进产品详情页。
保留现有品牌色和内容,采用偏编辑式的布局与清楚的字体层级。
无需重新探索方向。先实现关键视图,再用截图找出最影响效果的三个问题。
使用 $distinctive-ai-design 精修当前仪表盘。
保留业务功能与必要状态提示,检查重复说明、装饰容器和无意义发光。
优先通过删减和调整层级改善体验,不增加新的视觉素材。
验证主要操作和窄屏布局,并说明哪些部分未验证。
使用 $distinctive-ai-design 改进这个产品展示页。
如果一张主视觉能帮助表达产品用途,就使用当前可用的图像生成工具。
让素材与页面构图、配色和留白一致;普通动效使用现有平台能力。
不要接入新的付费服务,缺少生成能力时使用可完成主任务的静态方案。
- 探索:读取现有界面与约束,确定用户、主要任务和目标感受;方向不明确时提出可比较的概念。
- 定义:将选定方向写成 brief,落实到代表性页面或关键状态,使用现有技术栈与组件。
- 评审:捕获运行中的界面截图,检查构图、层级、字体、素材整合和细节;优先修正一至三个主要问题。
- 交付:删除不服务于用途的元素,验证主操作、相关状态和窄屏表现,报告结果与限制。
brief 通常包含:用户与主要任务、目标感受、视觉隐喻、构图与信息层级、色彩与字体、关键交互、避免的元素,以及第一版最小范围。
完成后应获得实现或设计产物、主要调整说明,以及实际验证的证据。审美评价与功能验证分别报告;有截图不代表已经证明交互、性能或无障碍行为正常。
| 能力 | 何时需要 | 不可用时 |
|---|---|---|
| 项目文件访问与实现工具 | 修改实际界面 | 保持任务为概念或设计建议,说明范围 |
| 运行环境与截图工具 | 验证最终视觉结果 | 标注视觉验证未完成 |
| 独立子代理 | 当前任务允许委派,并需要独立评审 | 按同一维度自查,明确这是自查 |
| 图像或视频生成 | 素材对核心表达有明确价值 | 使用已有素材或静态方案,说明限制 |
skill 本身不附带浏览器、生成服务、API 密钥或独立评审模型,也不固定框架、模型版本或付费平台。可选能力取决于当前运行环境、授权与预算。
评审者查看截图、用户任务、审美 brief 和必要参考图,不接收代码、历史解释或目标分数。先进行最多两轮,每轮修正最重要的问题。若不收敛,报告剩余缺口并重新考虑方向,避免无限追分。9/10 仅可作为内部愿景,不能作为上线保证或客观质量认证。
distinctive-ai-design/
├── SKILL.md # skill 入口与中文执行指令
├── agents/openai.yaml # Codex 展示名称与默认调用提示
├── references/review-and-media.md # 评审提示与媒体使用参考
├── README.md # 中文说明
└── README.en.md # English documentation
本 skill 根据 Anshu Chimala 在 Lenny’s Newsletter 的 How to turn your AI into a world-class designer 提炼,于 2026-10-07 阅读公开正文。
已读内容覆盖技巧 1–6:随机种子、具体且大胆的提示、独立评审反馈循环、图像生成、视频生成和删除无用元素。技巧 7 只有标题可见,后续付费正文未纳入,也未推断其内容。
仓库提供独立编写的执行性改编,不包含原文全文。约三个候选方向、两轮评审预算、运行验证和权限边界是本地适配,不是原文的固定要求。本文与 skill 均不保证生成结果达到某个审美水平。
本地 Smoke Test、负向 fixture、最小 Codex CLI 端到端复现命令及验收标准见 验证方案,当前执行证据见 验证结果。静态通过不代表 Skill 加载或真实截图评审通过。