技能完整详情
## 技能简介
**React 组件生成器** 将自然语言描述或设计稿直接转化为类型安全的 React + TypeScript 组件，自动生成 props 类型定义、Tailwind/CSS Modules 样式方案与 Storybook 示例故事。
## 核心特性
- **多输入支持**：自然语言、Figma 设计稿、截图均可作为输入
- **类型安全**：自动推导并生成完整的 TypeScript 类型定义
- **样式方案可选**：Tailwind CSS / CSS Modules / styled-components
- **Storybook 集成**：每个组件附带可直接运行的示例故事
## 快速上手
```bash
shanyi gen component "用户资料卡片，含头像、姓名、简介与关注按钮"
```
生成结果：
```tsx
interface UserCardProps {
name: string;
bio: string;
avatarUrl: string;
onFollow: () => void;
}
export function UserCard({ name, bio, avatarUrl, onFollow }: UserCardProps) {
return (
关注
);
}
```
## 使用场景
- 中后台页面批量搭建
- 设计稿快速落地为可运行代码
- 组件库初稿与 Storybook 文档生成
{name}
{bio}