anti-ai-design
自动编排UI设计技能，附带强制性反AI规则。生成惊艳、视觉独特的屏幕界面——绝不产生千篇一律的AI风格输出。
使用时机
当用户要求以下内容时激活此技能：
- 着陆页、英雄区域或营销页面
- 仪表盘、管理面板或数据密集型界面
- 移动应用界面（iOS、Android）或响应式Web UI
- 引导流程、注册表单或产品演示
- 任何组件库或设计系统界面
- “让它更好看”、“重新设计这个”、“为……创建UI”
不可协商的交互契约
在生成任何设计输出之前，必须按顺序解决以下三个决策：
- 平台范围 — 询问用户要为哪些平台生成：
mobile、tablet、desktop。- 允许多选。
- 如果用户只选择了
mobile和desktop，则不要生成tablet。 - 如果平台已经明确且无歧义，通过复述确认并继续。
- 色彩方向 — 按以下顺序解决品牌色彩方向：
- 如果用户提供了准确的颜色，直接使用。
- 否则，如果用户提供了品牌/主题氛围，提供2-3个合适的调色板方向并要求用户选择。
- 否则，自动选择适合产品类别的调色板，并明确说明是自动选择的。
- 风格方向 — 提供2-3个风格选项，让用户选择其中一个。
除非对话中已经包含明确答案，否则不要跳过这些决策。
执行模式
交互模式（默认）
- 按顺序依次询问用户缺失的选择：平台 → 色彩 → 风格。
- 等待用户响应后再进入下一阶段。
- 为风格方向提供选项卡片，并标注推荐标签。
非交互模式
当用户出现以下情况时激活：
- 使用
mode: non_interactive或等效标志调用技能， - 运行一次性CLI命令、后台Codex任务或脚本化流水线，或
- 提供没有先前对话上下文的提示（请求前无聊天轮次）。
自动选择规则（按顺序应用）：
- 平台 — 如果未指定，默认使用
desktop。如果存在移动优先信号（移动应用描述、React Native提及、“手机”上下文），默认使用mobile。 - 色彩方向 — 为检测到的项目类型选择最合适的调色板，不提供替代方案。
- 风格方向 — 从该上下文的2-3个候选风格中，选择应标记为推荐的那个。不展示选项卡片。
生成前必需的输出标题（仅非交互模式）：
自动选择结果：
- 平台：[所选平台]
- 调色板：[调色板名称] — 主色 [十六进制值]
- 风格：[风格名称] — [一句话氛围]
正在进行捆绑包生成。
不要提出澄清性问题。不要展示选项卡片。在标题后直接进入第三阶段。
输出契约 — CJX捆绑包，而非单个松散HTML
默认输出是项目的捆绑包目录，而非单个松散HTML文件。
<应用简称>-design/
html/
landing-page.html
mobile-<界面>.html
tablet-<界面>.html
desktop-<界面>.html
css/
foundation.css
shared.css
landing-page.css
mobile-<界面>.css
tablet-<界面>.css
desktop-<界面>.css
js/
app.js
landing-page.js
mobile-<界面>.js
tablet-<界面>.js
desktop-<界面>.js
捆绑包规则
html/包含每个生成的界面/平台组合的一个HTML文件。css/foundation.css仅包含冻结的设计令牌。css/shared.css包含共享的基元、工具函数、动效、玻璃效果配方、焦点状态和常见布局模式。- 界面特定的CSS放在对应的界面文件中。
js/app.js包含共享UI辅助函数、状态切换、模拟数据处理和可访问性安全的交互。- 仅在需要时，界面特定的JS放在对应的界面文件中。
- 如果用户后续要求单文件导出，可以额外提供自包含的HTML导出，但默认契约是CJX捆绑包。
平台文件命名规则
- 着陆页保持语义化：
landing-page.html、landing-page.css、landing-page.js - 应用界面使用平台前缀：
mobile-<界面>.htmltablet-<界面>.htmldesktop-<界面>.html
- 仅生成所选平台的文件。
- 如果用户选择了
mobile和desktop，输出捆绑包中不得包含任何tablet-*文件。
为什么用独立文件而不是单个响应式HTML
默认使用独立平台文件，因为：
- 每个平台可能在信息架构、导航、密度和CTA放置上有实质性差异，
- 当每个目标隔离时，审查和交接更容易，
- 当界面意图明确时，CJX验证更清晰，
- 桌面/平板/移动端通常需要不同的层级结构，而不仅仅是不同的断点。
只有在用户明确要求单文件交付时，才接受单个响应式HTML。
子技能路由
仅加载当前步骤所需的参考文件。不要一次加载所有文件。
| 任务 | 加载 | 详情 |
|---|---|---|
| 选择设计风格/艺术方向 | references/design-styles-catalog.md | 11个类别中的36种风格 |
| 选择趋势/艺术包 | references/design-trends.md | 6种趋势，3个艺术方向包 |
| 应用设计配方 | references/design-recipes-catalog.md | 15个完整的设计配方 |
| 应用平台布局规则 | references/platform-rules.md | 移动/iOS/桌面/平板规则 |
| 冻结并注入基础令牌 | references/foundation-tokens.md | 令牌冻结说明和格式 |
| 强制圆角语法 + 嵌套层级 | references/radius-choreography.md | 语义圆角角色、嵌套表面规则、风格系列圆角语法 |
| 应用UX/客户旅程规则 | references/ux-guidelines.md | UX强制、CJX模式 |
| 强制动效编排 + 交互意图 | references/motion-choreography.md | 动效目的、悬停策略、状态转换、平台动效规则 |
| 强制捆绑包资产所有权 + 清单审计 | references/output-bundle-rules.md | 共享与界面资产规则、清单、自审计 |
| 生成输出捆绑包 | references/output-template.md | 捆绑包结构、HTML模板、文件契约 |
自动编排流程
按顺序执行以下阶段。每个阶段都有条件逻辑——精确遵循。
第一阶段 — 上下文检测
-
扫描对话和任何附加文件，查找：项目名称、现有品牌颜色、字体、技术栈、目标平台和界面用途。
-
将项目类型分类为以下之一：SaaS产品 · 电子商务 · 移动应用 · 作品集 · 仪表盘 · 营销网站 · 其他。
-
提取请求的界面并计数。
-
将平台范围解析为一个或多个：
mobile、tablet、desktop。 -
如果平台范围缺失或模糊： 问一个带有多个选择的平台选择问题：
- 移动端
- 平板端
- 桌面端
-
如果用户已经指定了平台，不要再次询问——直接沿用这些平台。
-
记录项目中发现的任何现有品牌令牌（颜色、字体、间距比例）——稍后将在令牌冻结中使用。
-
根据项目类型解析配色方案优先级：
深色优先（深色为主要画布；浅色为可选覆盖）：
- 仪表盘 · 管理面板 · 数据密集型SaaS · 金融科技 · 开发者工具 · 分析 · 监控 · 加密/Web3 · 媒体/流媒体 · 游戏
浅色优先（浅色为主要画布；深色为可选覆盖）：
- 电子商务 · 营销网站 · 作品集 · 医疗保健 · 教育 · 餐饮 · 生活方式
如果项目类型不明确或不适合上述列表，默认使用浅色优先，并提供深色模式作为附加选项。
将此决策作为
color_scheme_priority: dark_first | light_first传递。第二阶段调色板选项和第四阶段令牌冻结必须反映此优先级。
第二阶段 — 色彩 + 设计方向
-
在风格选择之前解决色彩方向。
-
如果用户没有提供明确的调色板，提供2-3个适合产品类别的调色板方向，并反映第一阶段中的
color_scheme_priority：- 对于
dark_first项目：以深色调色板选项为首（例如OLED深色奢华、电光石板、深海蓝），只有在最后一个选项才包含浅色选项。 - 对于
light_first项目：以浅色调色板选项为首（例如商务温暖能量、信赖冷色中性），只有在其符合品牌时才包含深色选项。 - 要求用户选择其中一个。
- 对于
-
如果用户拒绝选择，自动选择最合适的调色板，并用一句话说明原因。
-
加载
references/design-styles-catalog.md。 -
从目录中选择最适合项目类型、所选调色板和上下文的2-3种风格。
-
为每种所选风格生成一个选项卡片，格式如下：
[N]. **风格名称** — 推荐（如适用） 氛围：[一句话氛围/情绪] 关键美学：[3个定义性的视觉特征] -
根据最佳匹配，将恰好一个选项标记为推荐。
-
向用户呈现编号列表并要求选择。等待用户响应后再继续。
-
如果用户要求列表中未包含的其他风格，接受它并继续。
第三阶段 — 捆绑包生成
- 加载所选平台的
references/platform-rules.md。 - 加载
references/output-template.md以了解CJX捆绑包格式。 - 加载
references/output-bundle-rules.md以了解资产所有权、共享类放置、清单和捆绑包自审计。 - 在编写任何CSS之前，加载
references/radius-choreography.md以解决圆角语法、嵌套表面层级和基于角色的曲率。 - 在生成最终输出时加载
references/ux-guidelines.md，因为状态完整性是强制性的。 - 应用以下所有反AI设计规则。
- 分别为每个所选平台应用平台规则。
- 在为所选风格方向编写组件CSS之前，解决圆角语法：
- 选择2-4个主要圆角层级，以及根据需要添加pill圆角，
- 将它们映射到语义角色：外壳、表面、内嵌、控件、紧凑、药丸，
- 保持整个捆绑包中的语法一致，
- 确保嵌套的同材质表面在曲率上逐步减小。
- 生成一个捆绑包目录，包含：
html/css/js/manifest.json
- 为每个所需的界面/平台组合生成一个HTML/CSS/JS三联。
- 仅生成请求的界面和所选平台。
- 着陆页如果同一文件表现良好，可保持跨平台语义化；但若布局在不同平台上有显著变化，也要生成特定平台的着陆变体。
- 每个HTML文件必须：
- 引用
../css/foundation.css - 引用
../css/shared.css - 引用其界面的CSS文件
- 引用共享的
../js/app.js - 在需要时引用其界面的JS文件
- 在所有主要结构元素上使用
data-ai-id - 使用上下文相关的、真实的复制内容——绝不使用Lorem Ipsum
- 引用
- 每个生成的应用程序界面必须包含或明确处理来自
ux-guidelines.md的四个UX状态：- 加载中
- 空状态
- 错误
- 成功
- 这些状态可以在主画布中可见，或通过JS控件实现为可切换的模拟状态，但它们必须存在于已发布的捆绑包中。
- 有意识地解决默认可见状态：
- 生成器界面应默认显示为
空状态，除非用户明确要求预加载/演示就绪的成功画布， - 结果/审查界面应默认显示为
成功，除非叙述明确要求先显示其他状态， - 绝不要让生成器界面在用户提供或加载输入之前暗示已完成输出。
- 生成器界面应默认显示为
- 对生成器、结果、仪表盘和表单密集型界面应用实用界面现实主义规则：
- 在追求惊艳效果之前，优先考虑信任、可扫描性和对齐性，
- 将主要表单、状态画布、结果板和CTA组保持在稳定的常规流布局中，
- 不要使用重叠或绝对定位的内容承载卡片作为实用界面的主要结构，
- 保持装饰性不对称性为次要，以免削弱任务清晰度或CTA可发现性，
- 确保实用界面上的英雄排版在目标视口中可读，而不是依赖戏剧性的换行。
- 在声明输出完成之前，运行来自
references/output-bundle-rules.md的捆绑包自审计：- 将所有跨2个以上HTML文件复用的选择器移动到
shared.css中， - 确保没有页面依赖兄弟页面CSS文件才能正确渲染，
- 确保所有引用的资产都存在，
- 确保
manifest.json与生成的文件完全匹配， - 确保未选择的平台没有文件，
- 确保圆角层级结构遵循所选的语义语法，并且嵌套表面不会扁平化为等半径层，
- 确保实用界面在其目标视口中通过布局现实主义审计。
- 将所有跨2个以上HTML文件复用的选择器移动到
第四阶段 — 基础令牌冻结
- 生成首个获批界面后，将确切的令牌值提取到
css/foundation.css中。 - 不仅冻结颜色/字体/动效，还要冻结捆绑包的语义圆角语法。
- 使用以下精确格式：
/* 冻结的基础令牌 — 请勿修改 */
:root {
--color-primary: <确切值>;
--color-secondary: <确切值>;
--color-accent: <确切值>;
--color-bg: <确切值>;
--color-surface: <确切值>;
--color-text: <确切值>;
--color-text-muted: <确切值>;
--font-heading: <确切字体栈>;
--font-body: <确切字体栈>;
--space-base: <确切值>;
--radius-1: <确切值>;
--radius-2: <确切值>;
--radius-3: <确切值>;
--radius-4: <确切值>;
--radi
…
[截断以进行翻译]