Vitrine：实践指南

真正理解Vitrine，要从它处理的任务开始：UI 组件库，适合那些想要与众不同的人。实际做界面与前端开发时，经常会碰到视觉还原、交互状态和响应式细节容易遗漏，所以功能列表并不能代替验证。试跑可以从选一个包含多状态的真实组件完成实现开始，并把尺寸、状态、可访问性、资源和不同视口表现写进验收记录。编辑判断上，愿意逐状态验收界面质量的前端团队可以优先研究它；其他团队不必为了热门标签勉强接入。

什么是玻璃窗？

玻璃橱是一个玻璃展示柜：您只能观看，不能触摸。 Vitrine 是一个允许你拿走物品的展示区。

它是一个精心策划的 React 组件画廊，其中每件作品都有一个清晰的想法，取自现实世界（破碎的玻璃、凸版印刷、翻盖板、湿墨水、乙烯基套、登机牌）并保持有用。每个组件均附带：

• 实时预览，您可以在变体之间切换，
• 真实来源，正是预览中运行的内容，
• 其背后的设计提示，足够精确，可以使用 AI 助手重建或调整组件，
• 关于交互、动画、可访问性、响应性和触摸回退的注释。

没有软件包，没有 CLI，也没有注册表安装。您将一两个文件复制到您的项目中，它就是您的了。

为什么选择玻璃柜

里面有什么

27 个类别 301 个组件。

可以从以下几个方面入手：

• 玻璃破碎按钮：一块深色玻璃板，从单一撞击点破裂，纯粹的 CSS 且经过精心设计。
• Silk Field：您可以在其上设置文字的着色器背景。
• 样本卡：被视为编目对象的卡片。
• 光圈快门按钮：像镜头一样打开和关闭的动作。
• 提示作曲家、思考跟踪、引用答案、内联差异：完善的 AI 界面的构建块。
• 分割翻盖文本、Chrome 文本、挤出文本：随意图移动的类型。
• Route Globe、Sankey Flow、Sunburst Drill、Cohort Retention：值得仔细观察的数据。

在本地运行画廊

要求：Node 22.6+（推荐 24）和 Python 3（由注册表生成器使用）。

git clone https://github.com/ham7a311/vitrine.git
cd vitrine
npm install
npm run dev          # http://localhost:3000

其他脚本：

npm run build        # production build of every page
npm run typecheck    # tsc --noEmit
npm run registry     # regenerate the registry index + run the prompt guard

在图库中按 ⌘K（或 Ctrl K）按名称、标签或感觉进行搜索，例如“玻璃”、“悬停”或“身份验证”。

它是如何运作的

1. 发现：按类别浏览或搜索。
2. 检查：打开组件以查看其完整尺寸、切换变体并阅读源代码和提示。
3. 复制：将每个文件复制到您的项目中。将任何 .css 保留在组件旁边。
4. 让它成为你的：颜色、尺寸和时间位于每个文件顶部的 props 和 CSS 变量中。

代码选项卡在构建时从磁盘读取真实文件，因此您复制的内容正是预览中运行的内容。

字体。 组件以 CSS 命名其字体（Geist、Instrument Serif、Anton、Archivo、IBM Plex...）。该网站从 src/app/layout.tsx 中的 Google Fonts 加载它们。将您使用的添加到您自己的项目中。

工作坊

Vitrine 还展示了如何使用该系列进行构建。

食谱是仅由 Vitrine 组件制作的完整页面，每个页面都有创意方向、逐节组件计划和可复制的构建简介：

产品组合 · Glass 产品组合 · 展示柜 · 工作室 · 发布会 · 控制台 · AI 工作区 · AI 公司

技能 是 19 个可重用的 AI 工作流程，编写为 SKILL.md 文件，可在 Claude Code、Claude.ai 项目、游标规则和 ChatGPT 项目中工作：

技能文件位于 src/workshop/skills/<name>/SKILL.md 中。

组件规则

该集合中的每个组件都遵循相同的契约：

• 反应 + TypeScript。顺风只在有帮助的地方。用于真实关键帧的普通 CSS。 没有动画库。
• 颜色由组件本身定义（CSS 变量或道具）。没有任何东西读取画廊的令牌。
• 键盘访问、可见焦点、prefers-reduced-motion 以及悬停相关行为的触摸回退。
• WebGL/canvas 组件在屏幕外和隐藏选项卡中暂停，限制 DPR 并正常降级。
• 演示内容纯属虚构。

提示保护 (scripts/check-prompts.mts) 强制变量提示仅描述选定的选项，因此组件的简介永远不会偏离其显示的内容。

项目结构

src/
  app/            Next.js App Router: home, /components, /components/[slug], /categories, /about, /workshop
  site/           the gallery shell (navbar, search palette, preview stage, code viewer), not meant to be copied
  lib/            search scorer, build-time source loader (shiki)
  workshop/       recipes, skills (SKILL.md) and live recipe previews
  registry/
    <category>/<slug>/
      <Name>.tsx  the component
      <name>.css  keyframes / complex selectors, when needed
      demo.tsx    what the gallery renders (also shown as usage.tsx)
      meta.ts     name, category, tags, prompt, interaction, a11y, variants…
    order.txt     curated gallery order
    gen.py        `npm run registry` regenerates index.ts + demos.tsx from order.txt
scripts/          prompt guard

添加组件

1. 使用组件创建 src/registry/<category>/<slug>/、可选的 .css、demo.tsx（默认导出，接收 { variant }）和 meta.ts。
2. 将 <category>/<slug> 添加到 src/registry/order.txt。
3. 运行npm run registry。

请阅读 CONTRIBUTING.md 获取完整清单。

科技

Next.js 15 (App Router) · React 19 · TypeScript · Tailwind CSS 4 · shiki 用于构建时语法突出显示。 Playwright 仅用于开发工具。

FAQ

是否有 npm 包或 CLI？ 不，是故意的。复制您想要的文件。您拥有该代码，无需升级。

我可以在商业项目中使用这些吗？ 是的。 Vitrine 已获得 MIT 许可。

我必须归功于 Vitrine 吗？ 不，但链接总是值得赞赏的。

组件是否需要 Tailwind 或 Framer Motion？ 任何地方都没有使用动画库。画廊外壳使用Tailwind；组件仅在有用的地方使用它，其余的则使用简单的 CSS 。每个组件的 meta.ts 列出了其依赖项。

我可以将组件的提示粘贴到 AI 工具中吗？ 这就是它的用途。每个提示都足够精确地描述几何形状、时间、状态和后备，以重建或调整该作品。