ForgeForge
文档/UI for Agents

UI for Agents

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

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

安装

一行命令装好，遵循 Agent Skills 通用规范，Claude Code / Cursor / Codex 三个工具都能自动识别。

bash
npx skills add forge-ui/forge

使用

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

让 AI 帮你做：

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

更复杂的场景，配合 MCP Server（即将上线），实时读取组件文档与源码。

覆盖内容

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

结构

.claude/skills/forge/
├── SKILL.md                       # 主入口（定位 / 铁律 / 工作流 / 子文档索引）
└── references/
    ├── tokens.md                  # 颜色 8 色 × 10 shade + 字体 token
    ├── icons.md                   # solar-icon-set 用法与两个常见坑
    ├── cases-index.md             # 22 个 case 页覆盖矩阵
    ├── workflow.md                # PRD → 页面工作流 + 自检清单
    ├── templates/
    │   ├── auth.md                # 登录套件（sign-in / sign-up / forgot-password / reset-password）
    │   └── business.md            # app/ecommerce 业务骨架
    └── components/                # 70 个组件各 1 份 props & 示例
        ├── button.md
        ├── icon-button.md
        ├── link.md
        ├── badge.md
        ├── forms.md               # TextField / TextArea / SelectOption / Datepicker / Upload ...
        ├── data-table.md          # DataTable / FullWidthTable / 各种 Cell*
        ├── charts.md              # MeterChart / DonutChart / BarChart ...
        ├── layouts-app-layout.md  # AppLayout
        └── ... (60+ more)