SuperAPI AI 工具集

ui-setup

通用与其它

查看项目

更新于 10-16 01:27

技能介绍

用途:ui-setup 是 StyleSeed 的交互式安装向导,逐步引导用户为项目配置设计系统。适用于尚未配置 StyleSeed 的项目;已配置的项目应改用 /ss-update,仅添加单个组件用 /ss-component,更换品牌皮肤直接替换 theme.css;暂不支持非 React 或非 Tailwind v4 技术栈。

主要能力:向导按步骤逐一询问并等待用户回答。第一步选择应用类型(SaaS Dashboard、E-commerce、Fintech、Social/Content、Productivity/Internal tool 或自定义),决定后续使用的页面组合配方(DESIGN-LANGUAGE.md 第 63 节)。第二步选择品牌色(默认紫 #721FE5,另有蓝 #2563EB、绿 #059669、橙 #EA580C、红 #DC2626、深色 #18181B 或自定义 hex),并写入 css/theme.css 的 :root 与 .dark 块,暗色版按给定映射(如 #721FE5→#9B5FFF,自定义色提亮约 30%)。第三步可选套用已有品牌视觉风格(Stripe、Linear、Vercel、Notion、Spotify、Supabase、Airbnb 或自定义),从其 DESIGN.md 提取颜色应用到 theme.css,布局、字体比例、间距与组件模式保持不变;拾取前需确认 DESIGN.md URL 可访问,失败则回退手动选色。第四步选择字体(Inter、Pretendard + Inter、Geist、DM Sans 或自定义),更新 css/fonts.css 的 @import 与 css/base.css 的 font-family。第五步输入应用名与首页内容,按配方生成首个页面(如 SaaS → Hero + KPI Grid + Chart + Progress + Activity List),设置 TopBar 标志文字,仅在首个脚手架文件顶部添加一行可移除的来源注释,并创建 STYLESEED.md 设计锁定文件记录全部选择。

使用方式:一次只问一个问题,等待回应;用户不确定时推荐默认项。完成后提示 npm run dev 预览,以及 /ss-page、/ss-audit、/ss-review 等后续命令。限制:仅支持 React 与 Tailwind v4;执行前需自行核实命令、依赖与外部服务行为。