Spectra 是一套专为 AI Agent 打造的模块化专业技能矩阵(8 大技能),打通了品牌战略、用户体验设计、交互防错韧性、宏观多领域色彩系统、商业生图提示词与前端工程落地的全链路流程。
全面兼容支持标准技能扩展的各类主流 AI Agent 与代码助手(包括 Claude Code、Cursor、Antigravity、OpenClaw、Codex 等)。
所有技能均已发布至 ClawHub 官方商店,你可以使用 clawhub CLI 将所需技能直接安装至你的 Agent 环境中:
# 安装单个技能
clawhub install @fize/color-system
# 按需安装产品与前端交互全流程套件
clawhub install @fize/product-ux-workflow
clawhub install @fize/interaction-design-sop
clawhub install @fize/custom-ui-spec你也可以通过克隆本仓库在本地离线或软链接使用:
git clone https://github.com/Fize/spectra.git每个技能均为自包含模块,内含独立的 SKILL.md 指令、参考规约(references/)与资源文件(assets/)。
| 技能 | 领域 | 核心能力说明 | 遵循标准 / 交付物 |
|---|---|---|---|
🏷️ brand-identity-design |
品牌战略与 VI | 六阶段品牌生命周期工作流(从品牌灵魂挖掘到 VI 规范手册交付)。推导核心视觉隐喻,输出多触点品牌应用指南。 | 核心隐喻推导、VI 触点映射表 |
🎨 color-system |
宏观多领域色彩 | 双轨色彩架构:数字产品 CSS Tokens(含 tokens.css 及深/浅色模式切换)与平面设计/印刷物理色彩规约。 |
WCAG AA (≥4.5:1)、Pantone 专色、CMYK FOGRA39、总墨量 TIC ≤300% |
🖼️ commercial-image-prompt |
商业生图提示词 | 全球与国内双轨电商视觉提示词工程:海外平台(Amazon、Shopify、SHEIN、TikTok)与国内生态(淘宝、小红书)。 | 三层提示词架构、文字避让安全区、负向约束词 |
📐 custom-ui-spec |
无头组件设计规范 | 专为无头组件库(shadcn/ui、Radix UI)定制的跨平台与品牌级设计规约生成器,支持高定制化界面设计。 | Apple HIG、Fluent、Material 3、Anthropic Editorial、OpenAI Modernist、ArtCraft Blueprint |
🔍 design-deep-research |
审美深度调研 | 跨平台视觉趋势挖掘(Behance、Pinterest、站酷、Savee),采用七维审美解构模型输出可视化 HTML 调研报告。 | 7 维审美解构、趋势聚类分析、可验证真实链接 |
⚡ interaction-design-sop |
交互防错落地 | 前端编码前 7 步交互防错 SOP。P0/P1/P2 信息层级梳理与 4 种状态弹性(空态、加载态、错态、破坏性二次确认)。 | 4 大防御状态、乐观 UI 更新、防断头路流程 |
📋 product-ux-workflow |
宏观产品 UX | 0 到 1 产品体验设计生命周期:度量指标、用户旅程图、树状信息架构(IA)、低保真线框原型与 PRD 交付规范。 | 用户旅程图、信息架构树、线框原型审查门禁 |
🧩 ui-framework-spec |
既有组件库规范 | 主流成品 UI 组件库(Ant Design、Element Plus、Arco、TDesign)的最佳实践、组件映射与跨框架平滑迁移指南。 | 组件与事件迁移映射、AntD 5.x Design Tokens |
Spectra 各技能协同无缝衔接,覆盖从调研、规划到工程实现的产品全生命周期:
graph TD
A[design-deep-research<br/>视觉趋势与灵感调研] --> B(commercial-image-prompt<br/>商业生图提示词工程)
C[product-ux-workflow<br/>0-1 宏观产品体验流程] --> D[interaction-design-sop<br/>编码前交互防错 SOP]
E[brand-identity-design<br/>品牌灵魂与 VI 系统] --> F[color-system<br/>数字 Token 与印刷色彩]
D --> G{前端工程实现}
F --> G
G --> H(custom-ui-spec<br/>无头组件与自定义规范)
G --> I(ui-framework-spec<br/>既有成品组件库)
spectra/
├── README.md # 项目说明文档
└── skills/
├── brand-identity-design/ # 品牌 VI 系统与战略设计
├── color-system/ # 数字产品 Tokens 与物理印刷色彩规约
├── commercial-image-prompt/# 全球/国内电商与商业生图提示词
├── custom-ui-spec/ # 无头组件跨平台设计规约
├── design-deep-research/ # 审美趋势调研与解构
├── interaction-design-sop/ # 编码前交互防错与状态弹性 SOP
├── product-ux-workflow/ # 0 到 1 宏观产品体验全流程
└── ui-framework-spec/ # 主流 UI 框架规约与跨框架迁移
本项目基于 Apache 2.0 License 开源。