文档
StyleKit 文档
了解如何使用 StyleKit 构建美观的 AI 生成界面所需的一切。
快速上手
StyleKit 是一个精选的网页设计风格集合，包含 AI Rules、组件模板和设计令牌。选择一个风格，导出规则，让你的 AI 编码助手生成一致、美观的代码。
01
浏览与选择
浏览风格目录，找到适合你项目的设计。每种风格都包含设计哲学、配色方案和组件预览。
02
导出 AI Rules
点击导出按钮将 AI Rules 复制到剪贴板。粘贴到你的 AI 编码助手规则文件中（.cursorrules、.clinerules、CLAUDE.md 等）。
03
生成代码
让你的 AI 助手构建组件或页面。它会自动遵循风格规则，生成一致且视觉协调的代码。
风格体系
风格按用途分为三个类别。
视觉风格
定义外观和感觉：颜色、字体、阴影、边框和特效。例如：玻璃拟态、新拟态、赛博朋克霓虹。
布局模式
定义结构排列：网格系统、导航模式和内容流。例如：Bento Grid、圣杯布局、分屏布局。
动画风格
定义动效和交互模式：过渡、滚动效果和微交互。例如：视差滚动、全页滚动。
组合风格
视觉风格和布局模式可以搭配使用。每种布局风格都列出了兼容的视觉风格。将布局模式与视觉风格混搭，创造独特的设计。
Token 体系
设计令牌为 AI 一致性提供精确的 Tailwind CSS 类映射。每种风格定义了边框、阴影、字体、间距、颜色等的精确类名。
Token 类别
- Border：宽度、颜色、圆角、样式
- Shadow：sm、md、lg、hover、focus、彩色变体
- Typography：标题、正文、等宽、尺寸梯度（hero 到 small）
- Spacing：section、container、card、间距梯度
- Colors：背景、文字、按钮（语义化）
- Forbidden：该风格下 AI 绝不能使用的类名
- Required：AI 必须始终包含的类名
Recipe 体系
组件 Recipe 定义了每种风格下各 UI 元素的构建方式。包含骨架标记、可配置参数、视觉变体和插槽定义。
每个 Recipe 提供：
- Skeleton：基础 HTML 元素和必需的 CSS 类
- Parameters：可配置选项，如尺寸、内边距、全宽
- Variants：视觉替代方案（主要、次要、轮廓等）
- Slots：可自定义的内容区域（文字、图标、子内容）
- States：hover、active、focus 和 disabled 样式
AI 集成
StyleKit 可与任何支持自定义规则的 AI 编码助手配合使用。
Cursor
将 AI Rules 粘贴到项目根目录的 .cursorrules 文件中。
Claude Code
将规则添加到项目的 CLAUDE.md 文件中。
v0 by Vercel
在生成组件时将风格规则包含在 prompt 中。
其他 AI 工具
任何支持系统提示词或规则文件的工具都可以使用 StyleKit 风格。