介绍

Forge 是一套面向内部 ToB 交付的 React UI Kit，技术栈是 Next.js 16 · React 19 · Tailwind v4 · TypeScript 5，图标选用 solar-icon。

内容包括 60+ 组件、业务级模版（Ecommerce / Auth）以及 Dashboard Builder 8 种外壳，都从 Figma 设计稿 1:1 还原。团队拿它快速交付客户定制后台， 不必每个新项目都从零拼骨架。

市面空白。开源 React/Next.js 生态里，没有同时满足「面向 AI agent 可理解 + 快速开发 + ToB 交付级」的 Kit。

纯 AI 生成不可靠。即便是 Figma Make 这类直出方案，也无法严格按照既有 UI 规范生成新页面——真实场景里要的是 「按规范设计新业务页」，但 AI 只是参考规范自由发挥，产物风格很难控制。

Forge 的解法。做一套 Claude Code / Codex 这类编程 Agent 能读懂的设计系统——人和 AI 对齐需求后，AI 100% 基于 Forge 组件产出固定风格的页面，人从展现层解放出来，专注业务逻辑和交付速度。

四条最基础的硬规矩，新增组件和业务页都要遵守：

• Figma-First — Figma 是单一真相源， 复刻从 Dev Mode 原始代码开始，不靠截图或记忆。
• Token-Driven — 颜色、字号、圆角、阴影、间距走 CSS 变量，组件内不写 #hex 和裸 px。
• Kit Only — 业务页只允许 import Kit 组件， 禁止手搓 div 复刻已有组件；pattern 重复 3 次立即抽到 Kit。
• AI-Readable — props 扁平语义化，每个组件配 <ApiTable>，让 AI agent 照表调用不用猜。

• 组件 — 60+ 基础组件，分 Foundations 和 Components 两组。
• 组件矩阵 — 每个组件所有变体、尺寸、状态、颜色矩阵铺开展示。
• 模版 — 用 Kit 拼好的整套业务页：Ecommerce Admin、Auth、Dashboard Builder。
• UI for Agents — Skill 插件 + AGENTS.md 约定，让 Claude Code / Codex 开箱即用地基于 Forge 产页面。