SuperAPI AI 工具集

vibe-customize

设计与创作

查看项目

更新于 10-15 22:16

技能介绍

用途:自定义应用界面,同时保持 ibl.ai 品牌与 shadcn 组件之间的视觉一致。

品牌色值:Primary #0058cc(按钮、链接、激活态);Primary Light #00b0ef(渐变起点、高亮);Primary Dark #004499(悬停态);签名渐变 linear-gradient(135deg, #00b0ef, #0058cc);按钮渐变 from-[#2563EB] to-[#93C5FD](Tailwind)。

添加 shadcn/ui 组件:运行 npx shadcn@latest add button card dialog form input table tabs。shadcn 组件会自动沿用与 ibl.ai 组件相同的 Tailwind 主题(通过 components.json 配置:new-york 风格、neutral 基础、CSS 变量、Lucide 图标)。

添加 shadcnspace 区块:来自 https://shadcnspace.com/blocks 的预构建页面区块,可用 npx shadcn@latest add @shadcn-space/hero-01、@shadcn-space/pricing-01、@shadcn-space/feature-01 等。添加后需更新颜色以匹配品牌:将通用蓝色替换为 #0058cc(主色)或 #00b0ef(浅色);Hero 区与 CTA 使用签名渐变;保持相同字体栈(系统 sans-serif)。

深色模式:在根元素上加 .dark-mode CSS 类切换;SDK 提供深色配色覆盖,背景 #1a1a2e、Surface #16213e、Card #1e2a4a、Border #2a3a5c、文字 #e0e0e0。

SDK 提供的 CSS 工具类:.ibl-primary-bg、.ibl-gradient-bg、.ibl-button-primary、.ibl-text-primary、.ibl-text-secondary、.ibl-border。

用 MCP 发现组件:get_component_info("ProfileDropdown") 获取任意 SDK 组件的 props 与用法;get_hook_info("useChatV2") 获取聊天 hook 参数与返回值。

限制:资料未说明适用框架版本、构建工具、兼容范围及收费情况。