SuperDesign

• 您需要一个 AI 代理来生成外观精美现代、而非模板化的 UI 代码（HTML/CSS/Tailwind）。
• 您正在构建落地页、仪表板或组件密集型界面，并希望自动遵循结构化的设计流程。
• 您希望在亮色/暗色模式下保持一致的主题风格，并使用 oklch() 等现代色彩技术。
• 您需要开箱即用的无障碍、移动优先的响应式布局，以及规范的语义化 HTML。

• 您正在原生移动端环境（iOS/Android）中工作——这些指南以 Web 为主。
• 您的项目使用严格的设计系统（例如，严格遵循 Material Design），与此处提供的主观主题模式存在冲突。

每个 UI 都按照布局设计、主题设计、动画设计和实现这四个步骤依次推进。这种方式避免了在结构和美学尚未考量之前就直接跳入代码编写，从而产出更加连贯一致的成果。

该技能明确避免使用过时的通用调色板（如 Bootstrap 蓝），并推广使用 oklch() 来定义感知均匀的现代色彩。内置多种主题模式，包括深色模式（Vercel/Linear 风格）、新野兽派和玻璃拟态，并附带开箱即用的 CSS 变量。

我们提供一份精心挑选的 Google Fonts 列表，涵盖无衬线、等宽、衬线及展示字体等多个类别，同时支持 Lucide 图标和 Flowbite 组件的 CDN 即用集成——彻底消除排版选择上的困惑与猜测。

一套简洁的符号系统，用于规划微交互（例如 button: 150ms [S1→0.95→1] press），让动画设计更有目的性。本规范定义了入场动画、悬停状态、按钮按下以及页面切换的推荐时序范围。

指南强制执行语义化 HTML、合理的标题层级、ARIA 标签、最低 4.5:1 的色彩对比度以及键盘导航支持——确保输出结果无需额外提示即可满足基本无障碍访问标准。

SuperDesign 内置了针对卡片、按钮、表单和导航的最佳实践规范——涵盖阴影层次、触控目标尺寸、焦点状态、加载/禁用状态以及吸顶标题栏行为。

让你的智能体构建一个 SaaS 落地页，SuperDesign 会确保其遵循结构化布局（页眉 → 主视觉区 → 功能介绍 → 页脚），搭配现代字体组合，应用统一的色彩主题，并生成移动端优先的响应式 CSS——全程无需手动设计指导。

在为分析类或管理后台仪表盘制作原型时，该技能会引导智能体优先完成布局线框图，应用统一的间距与细腻的卡片阴影，并加入悬停/动画状态——最终呈现出接近生产环境水准的原型效果。

使用此技能可生成一套风格统一的按钮、表单字段和导航组件，它们共享相同的设计令牌（用于颜色、圆角、阴影的 CSS 变量），并通过无障碍访问检查。

在构建必须同时支持浅色和深色模式的界面时，该技能的 CSS 变量方案与 oklch() 颜色规范能帮助智能体从一开始就生成具备主题感知能力的系统，而无需在后期再对深色模式进行补救性适配。