SuperAPI AI 工具集

xaem-theme-ui

设计与创作

查看项目

更新于 10-15 19:50

技能介绍

用途:为设计系统增加创意生成层。scientific-luxury 负责强制结构约束(OLED 黑、0.5px 边框、rounded-sm、物理缓动),但不生成主题;本技能填补该空白。

两阶段管线:Pass 1 生成高熵视觉主题,包括光谱色板、辉光强度、动画时长刻度、字体字重分布、透明度层级;Pass 2 将主题翻译为实现代码,包括 CSS 变量、TypeScript 设计令牌、Tailwind 配置扩展、Framer Motion 预设覆盖、组件样式映射。两条法则:先生成后翻译;不得违反结构约束。

主要能力:六种光谱色(primary/success/warning/danger/accent/neutral)映射语义角色,支持类比、互补、三色等色板策略;辉光分低/中/高三档,内透明度 15%–65%、外 8%–35%、扩散 12px–80px;动画时长含 fast/normal/slow/breathe/pulse/ambient,范围 0.15s–4.0s,必须使用物理缓动;字重范围 100–600;文本透明度六档、边框透明度三档。

使用方式:按触发条件调用,如生成新色板、创建设计令牌、构建主题预设、把情绪板或色彩简报翻译为代码、定制辉光/动画/透明度。输出遵循固定响应格式,含阶段、Pass、状态与下一步动作。生成主题须与 apps/web/lib/design-tokens.ts 的令牌结构兼容。

适用场景:前端主题与设计令牌生成、品牌主题与暗色变体、告警密集界面、监控视图等。

限制:背景 #050505、边框宽度 0.5px、圆角 rounded-sm、动画引擎仅 Framer Motion、缓动仅物理曲线、布局为时间线/非对称、状态图标为呼吸光球,均不可被主题覆盖。禁止低饱和或粉彩色、纯白光谱色、线性过渡、对称网格、CSS @keyframes、100% 不透明文本。所有颜色需对 #050505 达到 4.5:1 对比度且饱和度不低于 70%。文档与注释使用澳式英语拼写。安装命令与具体平台支持暂未提供。