ForgeForge
GitHub
文档/UI for Agents

UI for Agents

让 AI 助手用 Forge UI Kit 拼业务页面。

Forge Skill 给 AI 助手完整的 Forge 组件知识、颜色 token、布局规范与工作流。 Skill 按需加载，上下文更省。

安装

一行命令装好，遵循 Agent Skills 通用规范，Claude Code / Cursor / Codex 都可以安装到自己的 skills 目录。

bash
# Claude Code / Cursor
curl -fsSL https://forgeui.org/install-skill.sh | bash

# Codex
curl -fsSL https://forgeui.org/install-skill.sh | FORGE_AGENT=codex bash

使用

Skill 会被 AI 助手 自动发现，也可以用 /forge 命令直接调用。

让 AI 帮你做：

  • 用 Forge 组件搭业务页面
  • 基于现成模板创建后台骨架
  • 定制主题与配色
  • 查询组件 props 与用法

脚本会优先读取本地 Forge 仓库，找不到时再读取 GitHub 上的公开源码。

覆盖内容

  • Forge UI Kit 安装与接入指南
  • 组件规格页、case 页、业务模板页索引
  • 颜色 token 全表（8 色 × 10 shade）与字体 token
  • Icon（solar-icon-set）用法与常见踩坑
  • 布局模板（AppLayout / 登录套件 / 电商业务骨架）
  • 设计原则与组合模式（按 case 参考）

结构

.claude/skills/forge-react/ 或 .codex/skills/forge-react/
├── SKILL.md                       # 主入口（定位 / 铁律 / 工作流 / 脚本索引）
├── scripts/
│   ├── list.mjs                   # 列出 components / cases / templates
│   ├── get-component.mjs          # 读取组件规格页
│   ├── get-case.mjs               # 读取 case 示例页
│   └── get-template.mjs           # 读取业务模板页
└── references/
    └── tokens.md                  # 颜色 token、语义变量、icon 默认色