SuperAPI AI 工具集

brand-design

设计与创作

查看项目

更新于 10-16 08:46

技能介绍

用途:把使用 shadcn 默认主题的前端项目打造成具有明确品牌识别度,覆盖配色、字体、渐变与语气/语调。适合新建前端项目尚无 brand.md、用户明确要求品牌色或主题、或对默认中性主题不满意时使用;若用户已深入组件开发则不主动打断。

主要能力:1)读取 idea-context.md、build-context.md、package.json、globals.css 与 brand.md 做前置检查,区分不存在、deferred 占位、已有真实配色三种情况,覆盖前需确认并备份。2)分四步访谈:产品名与一句话说明、类别(defi、infra/data、consumer/social、memecoin/playful、ai/tech、nft/creative、tooling/dev)、情绪(最多两个,如 minimal、bold、warm 等)、参考品牌(可选)。3)生成6套候选配色,每套含名称、一句话气质、OKLCH 与 hex 的5个种子色及完整 shadcn 明暗 token,并逐对校验 WCAG AA,不达标则自动调整或替换。4)根据类别选择语境化迷你 UI 模板(wallet、swap、staking、nft、dashboard、social、generic),将6套配色渲染到 .brand-preview/index.html 并自动打开,支持挑选、围绕某套变体、调整情绪、重置、继续生成等循环,无迭代上限。5)选定后备份 app/globals.css 并写入新 token,输出关键 token 摘要。6)字体配对同样以 HTML 预览呈现6组方案,选定或用 Inter + JetBrains Mono 默认,通过 next/font/google 写入 layout 与 CSS 变量。7)可选派生背景渐变与品牌强调渐变。8)生成 brand.md 供后续会话与 frontend-design-guidelines 使用。

使用方式:按技能工作流逐步执行访谈、生成、预览、应用;预览文件写入项目根 .brand-preview/,用系统命令打开;应用前复制 globals.css 为 .bak;完成后可运行开发服务查看,满意后删除 .brand-preview/。

限制:默认目标为 Next.js + Tailwind + shadcn,其他技术栈仅写入 brand.md 并提示手动映射;配色仅使用技能自带 references,不抓取外部站点;种子使用 OKLCH;明暗主题同源派生;不得在无确认下覆盖真实品牌配色或强制应用配色。