framingui

FramingUI

让编码 Agent 无法偏离的设计系统。

安装 · 演示 · 工作原理 · 免费范围 · framingui.com

---

让 Agent「构建一个设置页面」，得到的可能就是模型当天想到的任意结果：默认蓝色按钮、同一屏幕上三种边框圆角、手工编写且没有焦点状态的下拉菜单。代码能运行，但屏幕效果一团糟。

FramingUI 是一项Agent 技能：它将基于设计令牌的设计系统打包，让编码 Agent（Claude Code、Codex）从系统中组合屏幕，而不是绕着系统随意发挥。它提供一套封闭词汇表——组件、布局令牌、可由机器检查的屏幕配方，以及一个立场鲜明的主题——再加上无需安装的验证器，一旦 Agent 偏离规范就会明确报错。你的 Agent 会读取主题的设计 DNA，从目录中组合内容，验证结果，并在宣布完成前对渲染出的屏幕进行自我评审。

无需服务端、账号或遥测。只有一个数据文件夹和纯 Node 脚本。

Agent 能用它构建什么

每个屏幕只需一个提示词，无需设计反馈轮次——完全由 editorial-tech 主题中的免费目录组合而成：

“构建收入仪表板”	“构建我们博客的文章页面”

“构建账户设置页面”	授权预览：对话包

第四个屏幕使用了授权的 conversation 领域包——包含对话线程状态、流式输出和输入框。这里展示它，是为了让你了解免费范围的边界。

安装（30 秒）

Claude Code — 在项目根目录运行：

mkdir -p .claude/skills
curl -L https://framingui.com/get/skill | tar -xz -C .claude/skills

OpenAI Codex — 将同一个 tarball 放入 .agents/skills 即可。

或者克隆此仓库，并将 skill/framingui 复制到你的技能目录中。Claude Code 和 Codex 会自动发现它；之后，任何「构建屏幕／添加组件／应用主题」的请求都会通过该系统处理。

要实际渲染 Agent 组合的内容，请将组件库添加到项目中：

npm install https://framingui.com/get/ui

然后接入作用域和主题 CSS——技能自带的 INSTALL.md 会指导你的 Agent（或你自己）完成操作；运行 node .claude/skills/framingui/scripts/doctor.mjs . 可验证接入情况，并准确指出缺少的内容。

更喜欢 MCP？ 同一套验证器和目录也以 MCP 服务的形式提供——@framingui/mcp（npx @framingui/mcp，stdio）——适用于支持 MCP 但不会加载技能的客户端。

工作原理

1. doctor.mjs 每个项目检查一次环境——软件包、FramingUIScope 边界，以及是否已实际加载主题 CSS。接入配置有误会直接报错，而不是默默使用默认配色。
2. Agent 读取主题（assets/themes/editorial-tech.json）——其中的设计 DNA、氛围关键词和每项配方的说明都是硬性约束，而非建议。
3. Agent 从封闭词汇表中组合内容：30 个组件、12 个 Shell／8 个页面／17 种区块模式，以及 9 种带必需区域和状态的屏幕配方。臆造令牌会导致验证错误。
4. validate-screen.mjs / layout.mjs 以机械方式检查结果——依据退出码，而非主观感受。借助配方，「设置屏幕必须包含这些区域和状态」可以由机器检查。
5. Agent 会先渲染、截取屏幕并根据设计 DNA 进行自我评审，然后才宣布完成。

Agent 将使用的命令（均为纯 Node，无需安装）：

node .claude/skills/framingui/scripts/doctor.mjs .            # environment check
node .claude/skills/framingui/scripts/validate-screen.mjs s.json   # screen definition gate
node .claude/skills/framingui/scripts/layout.mjs validate c.json   # layout contract gate
node .claude/skills/framingui/scripts/recipe.mjs list         # screen grammars
node .claude/skills/framingui/scripts/pack.mjs list           # domain packs

免费版（及授权版）包含什么

免费版经过刻意设计，精简、易用且稳定：它只会不断扩充，因此你今天交付的屏幕永远都能通过验证。

	免费版	授权版
组件	30 — 完整的 20 个组件屏幕规范，以及表单、反馈和布局必备组件	62 — 新增 Sidebar、Command、Combobox、DataTable、DatePicker、Sheet、Popover、包含 8 个组件的对话套件等
主题	editorial-tech	9 种风格
布局令牌和配方	全部	全部
领域包	—	conversation（助手界面）
更新	稳定的免费渠道	持续发布

当你的 Agent 使用某项授权功能时，不会收到含糊的“未知组件”提示，而会收到 LICENSE_REQUIRED 错误，其中会指出实际功能名称及其所在位置，并严格要求不要手工制作仿制品。完整目录采用订阅授权，可在 framingui.com 查看——加入候补名单后，你会在发布时收到且只收到一封邮件。

常见问题

为什么要用技能，而不只是文档？ Agent 不会阅读文档，而是进行模式匹配。技能会将词汇、约束和验证器纳入 Agent 的工作集，而验证器会让违规行为导致退出码。

它会向外部服务器发送数据吗？ 不会。一切都在本地运行。可选的日志（.framingui/journal/）不会离开你的设备，只记录规则 ID 和退出码，不会记录你的代码。

我可以将它用于商业用途吗？ 可以——此软件包采用 MIT 许可证。授权目录是单独的商业产品。

许可证

本仓库中的所有内容均采用 MIT 许可证。skill/framingui 由 FramingUI 源系统生成——欢迎提交问题报告和异常屏幕截图。