从浏览，到你的项目.

先解决一个具体的设计问题

在设计导航按顺序研究风格、产品结构、模块细节和交互，也可以直接跳到当前卡住的阶段。

1. 定风格：Site of Sites、Awwwards。记录品牌感觉、配色和字体方向。
2. 看产品结构：Mobbin、Lapa Ninja。拆解关键流程、信息顺序和主操作。
3. 拆模块细节：Navbar Gallery、SupaHero、Collect UI。只研究当前要解决的导航、首屏或控件。
4. 补交互与动效：Codrops、UI Movement。明确触发、状态变化和减少动态效果的替代方案。

每一步先写具体问题，再打开资源。看完后记录链接、观察与取舍，点击“保存这一步”。记录保存在当前浏览器，不会同步到其他设备。切换阶段保留当前会话草稿；刷新前请保存或复制简报。

最后复制设计简报，或在“项目指令”中点击“载入本地设计简报”，将结论随业务需求一起交给 AI。

打开设计导航 · 浏览可运行模板 · 准备项目指令

本地启动

UI Lab 支持在线使用和本地运行。本地开发需要 Node.js 24、npm 和现代浏览器。所有训练数据均为演示，存储在当前浏览器中。

npm ci
npm run dev

打开终端显示的本地地址（默认 http://localhost:3000）。先体验「进阶」模板包，再在模板详情复制安装命令。

本次固定版本

Next.js 16.4.2 · React 19.3.1 · Tailwind CSS 4.3.3 · shadcn CLI 4.22.1。完整依赖由 package-lock.json 锁定。

通过 Registry 导入源码

在兼容 React + TypeScript + CSS Modules 的消费项目中初始化 shadcn，然后运行安装命令。模板不会自动覆盖应用路由。

npx shadcn@4.22.1 init
npx shadcn@4.22.1 add https://ui.caize.xin/r/jinjie.json

import { Jinjie } from "@/components/jinjie/jinjie";

export default function TrainingPage() {
  return <Jinjie />;
}

通过 @components/ 安装目标占位符适配消费项目别名。源码、CSS Modules、会话逻辑、版本记录和 MIT 许可会一起安装。单页条目会自动导入共享运行时。

npx shadcn@4.22.1 add https://ui.caize.xin/r/jinjie-workout.json

上述 workout 和 complete 页面入口是明确的种子预览；正式入口使用默认 Jinjie，创建新的真实演示会话。

配置服务地址

本地运行时保持 UI Lab 服务开启。部署到自己的地址时，将 NEXT_PUBLIC_REGISTRY_URL 设为真实 origin 后重新构建。上方安装命令使用本站配置的 Registry 地址。

NEXT_PUBLIC_REGISTRY_URL=http://localhost:3000

索引：/r/registry.json · 模板：/r/jinjie.json · 完整资产定义：/assets.json。

接入官方 shadcn MCP

无需自定义 MCP 服务。在消费项目的 components.json 中合并 registries 字段，保留原有 aliases 等设置：

{
  "registries": {
    "@ui-lab": "https://ui.caize.xin/r/{name}.json"
  }
}

npx shadcn@4.22.1 mcp init --client codex

也可在支持 stdio 的宿主中配置 command 为 npx，args 为 ["shadcn@4.22.1", "mcp"]。Codex 手动配置示例：

[mcp_servers.shadcn]
command = "npx"
args = ["shadcn@4.22.1", "mcp"]

按宿主要求刷新连接后，尝试“列出 @ui-lab 的模板，再把 jinjie 引入当前项目”。本地 Registry 兼容性与 CLI 导入验证不等于宿主 MCP 已识别；实际宿主连接尚未验证。参见 官方 Registry MCP 文档。

安装入口 Skill

将当前仓库的完整入口目录复制到目标项目的 Agent Skills 目录。这里的路径是占位符，请替换成真实 UI Lab 仓库路径。

mkdir -p .agents/skills
cp -R /path/to/ui-lab/skills/frontend-ui-workbench .agents/skills/

使用 $frontend-ui-workbench。先检查当前项目，用 UI Lab 的 jinjie 1.0.0 模板实现我的业务需求：[填写需求]。Registry 地址为 https://ui.caize.xin。保留已有业务逻辑，导入后启动并验证主要交互。

入口只按当前任务读取必要的 references。外部 Skills 的固定提交、目录、要求与命令见技能库。安装后需要刷新宿主并确认识别，实际调用成功再更新记录。

能力边界

生图技能需要可用的生图工具，输出标记为视觉参考；image-to-code 当前偏向网站。Taste 的前端 Skill 对 App 有独立指引。多个技能共享同一份任务设计规则，不互相覆盖。

用文件夹管理资源

资源库从 content/library 中的 meta.json 生成，App、网站、设计规范和组件各自一个文件夹。不需要管理后台或数据库。

content/library/apps/资源名/
content/library/websites/资源名/
content/library/systems/资源名/
content/library/components/资源名/

新增一份资源

npm run library:new -- website my-site "我的网站"
npm run library:check

命令会创建 draft 草稿。填写名称、简介、分类、来源与许可，加入封面、预览或 DESIGN.md；文件路径相对于当前资源文件夹。styles 中的风格 ID 在 content/styles.json 登记。

App 使用 screens 列出各屏名称、尺寸、截图和预览；网站与组件使用 preview 指定 HTML 或本地 React 入口；设计规范用 design 指向 Markdown，可以附带 tokens.css。需要公开下载的文件在 files 中明确登记。

检查并发布

npm run library:check
npm run library:build
npm run build
npm run start -- --port 3100

将 status 改为 published 后构建。脚本校验重复 ID、风格、缺失文件和路径；只有已发布资源的公开文件会生成到 public/library-files。generated 为目录数据，两处都可重新生成，不要手动编辑。

新增和更新内容后需要重新生成目录；开发服务器不会自动扫描内容变化。下架使用 draft 并重新构建，旧版本可以通过 Git 找回。

导入固定来源

npm run library:import -- /path/to/freedesignmd-library
npm run library:build

导入器仅接受已核查提交 ac4258d5449a3c280aed4b1ac737684ce7646ede 的干净工作树，保留已有资源的本地修改。当前支持 31 套设计系统、12 套网站和完整的 8 个按钮控件。设计系统的 Markdown 和样例是本站转换产物，网站自带的 Markdown 保留为原文件。

打开资源库 · 详细维护步骤见仓库 docs/file-based-library.md。

维护可安装的内置源码

assets/catalog.ts 维护内置源码模板、参考图、Skill 和工作流的区分联合类型。安装详情从这份定义读取，Registry 构建脚本从同一份定义生成 Registry 索引、条目和公共目录。

1. 在 registry/ 下加入源码，内部使用相对引用，样式使用 CSS Modules。
2. 在 catalog 中登记稳定 ID、版本、文件、依赖、预览、截图、来源、许可、设计变量与状态。
3. 为预览建立独立文档入口，直接引用 Registry 源码。
4. 生成 Registry，在干净消费项目验证安装与实际渲染。
5. 生成真实截图，记录验证结果，再加入目录。

npm run registry:build
npm run verify:registry
npm run typecheck
npm test
npm run build

设计变量与版本更新

健身模板使用 .app 内的局部变量，避免污染工作台。背景 #121416、表面 #1D2225、文字 #F4F6F8、强调 #C9F36A。模板版本保存在 version.json；后续升级先比较差异并读取 docs/migrations.md，不直接覆盖用户的业务修改。

个人优先，为团队留出空间

当前只有一个个人本地工作空间，资产由 Git 管理，没有账号、云端同步或团队权限。团队扩展可复用现有资产 ID、版本、来源与验证模型，再增加审核、发布和权限层。

来源与验证

进阶模板和入口 Skill 为本项目原创，MIT 许可。shadcn/ui 组件与 Lucide 遵循各自许可证。外部 Skill 仅提供接入说明，没有重新分发正文。官方 JSON Schema 快照保存在 verification/。

本次验证记录：2026-10-22 (Asia/Shanghai)。

仓库 README 和 verification/REPORT.md 记录启动、安装复现步骤、检查范围与剩余限制。