一、这个素材库是什么？
做网站/App 时，同一个功能（比如导航菜单）有很多种实现方式，但你可能不知道有多少种、也不知道怎么跟 AI 描述。 这个素材库把常见 UI 组件按分类 + 产品风格整理好，每个变体都配了一段可直接复制给 AI 的提示词。
核心价值：你不用自己想"这个按钮该长什么样"，直接挑一个对得上的产品风格（Linear / Vercel / 小红书），把提示词丢给 AI 就行。
二、怎么用（三步）
1
选分类
左侧菜单选你要的组件类型（导航 / 按钮 / 表单 / 卡片...），或者直接顶部搜索关键词。
2
挑变体
看预览效果，挑一个风格对得上的。比如你要做后台，就找 Vercel/Linear 那种极简风；做电商，就找淘宝/小红书那种。
3
复制提示词
点"复制"按钮，把提示词粘贴给 AI（ChatGPT / Claude / 豆包），AI 就能生成对应的代码了。
三、提示词怎么写更好
✅ 好的提示词
设计一个后台侧边导航：
- 深色背景 #0a0a0a，宽度 240px
- 菜单项 14px，hover 时左侧 2px 蓝色竖条 #1677ff
- 当前页面蓝底圆角背景
- 折叠/展开动画 0.2s
整体风格：Vercel Dashboard 侧边栏
公式：组件类型 + 具体参数（颜色/尺寸/圆角/间距）+ 参考风格（哪个产品）+ 状态（hover/active/disabled）
四、SEO / GEO 优化建议
SEO（搜索引擎优化）
- 语义化 HTML：用 <nav> <main> <article> 这些标签，爬虫能看懂结构
- 页面标题：每个组件分类页有独立 title，比如"按钮组件 | VAV UI-agent"
- 描述：meta description 写清楚这页有什么内容
- 图片 alt：预览图加 alt 文字，搜索引擎能识别
GEO（生成引擎优化）
GEO 是让 AI 搜索引擎（ChatGPT / Perplexity / 豆包）在回答时引用你的内容。
- 结构化内容：每个组件有分类、标签、描述，AI 容易抓取
- 可直接复制：提示词是独立、完整的，AI 可以直接引用
- FAQ 格式：加常见问题页面，AI 喜欢问答格式
- 内部链接：相关组件互相链接，AI 能发现更多内容
建议：后续可以加一个"组件对比"页面，AI 在被问"哪种导航适合后台"时更容易引用你的内容。
五、快捷键 & 小技巧
Ctrl + K聚焦搜索框
点击标签快速筛选风格
点击预览试试交互效果