使用指南
如何使用 StyleKit
3 个简单步骤，让你的 AI 编码助手按照统一的设计风格生成代码
01
选择设计风格
浏览风格目录，选择适合你项目的设计风格。每个风格都有完整的文档、配色方案和组件模板。
02
导出 AI Rules
选择你使用的 AI 工具（Cursor、Claude Code、Trae），一键复制对应格式的规则文件。
03
开始生成代码
将规则粘贴到你的 AI 工具中，然后用自然语言描述你想要的界面，AI 会按照风格规范生成代码。
快速导出
|工具配置
如何配置你的 AI 工具
Cursor
.cursorrules在项目根目录创建 .cursorrules 文件，粘贴规则内容
Claude Code
CLAUDE.md在项目根目录创建 CLAUDE.md 文件，粘贴规则内容
Trae
trae-rules.md在项目根目录创建 trae-rules.md 文件，粘贴规则内容
示例 Prompts
尝试这些 Prompts
配置好 AI Rules 后，可以用以下 Prompts 开始生成代码：
着陆页
用这个风格生成一个 SaaS 产品着陆页，包含 Hero 区域、特性展示、定价表和底部 CTA
仪表盘
用这个风格创建一个数据仪表盘，包含统计卡片、图表区域和侧边导航
表单页面
用这个风格设计一个多步骤注册表单，包含进度指示器、表单验证和成功状态