首先阅读此技能内的 README.md 文件——其中包含：
- Vebidor 是什么（一个 V 语言编写的 W3C WebDriver + WebDriver-BiDi 客户端）以及它不是什么（不是应用、不是网站、源码中没有 logo——每个视觉元素都是提议的身份标识，并已标记）。
- 内容基础——语气（技术性、成就导向、对比优先）、大小写规则以及起支撑作用的表情符号词汇（✅ ⚠️ 🐛 ✨ 🎉 🏆 ⚡ 🚀 📦 📖 🎯 🌐 🎭 📱）。表情符号是品牌的一部分；在文档和营销页面中保留它们。
- 视觉基础——调色板、字体、间距、动效、表面、卡片结构。
- 图标学——表情符号用于状态；Lucide 用于 UI 铬（已标记为可替换）；单色 SVG 字形用于浏览器 logo。
- 索引——各部分位置。
然后探索其他文件：
colors_and_type.css——所有设计令牌（--vb-blue-500、--slate-950、--code-keyword、--font-mono、--space-*、--radius-*、--shadow-*、--motion-*）以及基础字体样式和.chip类。将其作为<link rel="stylesheet">放入任何新项目中——这是基础。preview/——19 个独立的设计系统卡片（颜色、字体、间距、组件、品牌），你可以从中复制标记。assets/——占位 logo（已标记）和浏览器字形。ui_kits/docs/——高保真 React 文档站点重构（TopNav、Sidebar、TocPanel、DocsPage、CodeBlock、Callout、ComparisonTable、ApiSignature）。组件范围：每个文件将其导出附加到window，以便其他<script type="text/babel">文件可以使用它们。如需扩展，复制组件，在index.html中添加<script type="text/babel" src="…">标签，并遵循相同的window.X = X模式。ui_kits/marketing/——登陆页面重构（MarketingNav、Hero、FeatureGrid、BrowserMatrix、PhasesTimeline、MarketingFooter）。相同的组件作用域模式。fonts/README.md——通过 Google Fonts CDN 加载的字体（Geist + JetBrains Mono）。替换已标记；如果用户有不同品牌的字体，请替换。
当你被调用时
如果用户在没有其他指导的情况下调用此技能，询问他们想构建什么（文档页面？登陆部分？CLI 输出模拟？发布说明图形？对比表格？终端截图？）。询问哪个表面（文档、营销、终端）以及他们想要展示的 API 的哪个切片。然后以专家设计师的身份输出 HTML 工件——或者如果他们正在处理实际仓库，则输出生产代码。
创建视觉工件时（幻灯片、模拟图、一次性原型）
- 从
assets/中复制你需要的资产，以及你想要提取标记的任何预览卡片。 - 在当前项目中创建一个静态 HTML 文件。链接
colors_and_type.css（相对路径）。 - 使用基础样式：
--vb-blue-500用于强调色，--code-bg/--code-fg和令牌类用于代码，.chip chip--success等用于状态，--font-sans+--font-mono。 - 在品牌使用表情符号的地方保留它们。✅ ⚠️ ✨ 🏆 是起支撑作用的，而非装饰。
- 不要发明渐变或左侧圆角的卡片。使用平面表面、边框和一级阶梯。
处理生产代码时
将此技能视为品牌参考。从 colors_and_type.css 中提取值（十六进制颜色代码、字体栈、圆角、动效时序），而不是从屏幕截图中近似。ui_kits/ 中的组件模式是外观重构，而不是生产代码——移植样式，而不是 JSX 连线。
需要注意的警告
如果用户要求你交付真实的 logo、真实的字体、真实的图标——暂停并确认。这里的所有内容都是从源仓库的说明文字中推断出来的（该仓库没有视觉标识）。抵制固化品牌的倾向。