用 Rayden UI 组件库生成 React 代码
解决设计系统一致性难题：通过加载完整的 API 规范和反模式禁令，让 AI 使用 Rayden UI 库自动生成符合品牌规范的 React 组件代码，避免组件幻觉和通用 AI 的低质量输出。
为什么需要这个技能
在开发 React 应用时，频繁遇到 UI 风格不统一、组件样式写死或组件拼写错误的问题。手动查阅 34 个组件的文档效率低下，且容易拼错 Props 名称。
Rayden Code 技能加载了完整的 RAYDEN_RULES.md 规范，包含所有组件的 Props、设计标记（Tokens）、布局模式和反模式清单。它能确保生成的代码直接采用 bg-primary-500 等 Token 类而非硬编码颜色，极大提升开发速度与品质。
适用场景
- 快速搭建数据面板（Dashboard）、登录页或产品目录页。
- 需要构建严格遵循设计系统的 SaaS 页面或营销活动落地页。
- 进行"Vibe coding"时，希望 AI 输出符合特定 UI 库规范的代码。
- 需要生成包含高级布局模式（如复杂栅格、层级阴影）的生产级代码。
核心工作流
- 解析请求：AI 识别页面类型、所需组件及数据模型。
- 加载规范：自动读取组件库的完整 API 参考和反模式禁令。
- 布局规划：决定页面结构、组件选型、间距、色彩及响应式策略。
- 生成代码：编写 React + Tailwind CSS 代码，仅使用文档化的组件和标记类。
- 自检验证：运行 16 点检查清单，涵盖组件有效性、Token 使用及设计美学。
最佳实践与注意事项
-
依赖安装：生成代码前，请先在你的项目中安装
@raydenui/ui并引入样式文件：npm install @raydenui/ui在入口文件导入
@raydenui/ui/styles.css以激活设计 Token。 -
纯 UI 生成：该技能专注于 UI 构建，不处理数据获取逻辑，需自行补充 API 调用代码。
-
Token 优先：始终使用 Token 类（如
bg-primary-500），避免直接使用十六进制颜色值，确保主题切换正常。 -
安全提示：此技能仅读取本地规则文件并写入项目代码，无外部网络请求，不涉及敏感凭证。
下载和安装
解压后将目录放入你的 AI 工具 skills 文件夹，重启工具即可开始生成代码。
你可能还需要
暂无推荐