前端设计技能

根据自然语言描述生成可直接投入生产的 UI 组件。

使用说明

当用户请求 UI 组件、布局或前端功能时：

1. 若请求不明确，先提出澄清问题（例如：是否需要响应式设计？是否支持深色模式？是否有现有设计系统？）
2. 默认使用 React + Tailwind CSS 生成组件
3. 输出包含所有属性、状态管理及无障碍属性的完整组件代码
4. 包含 ARIA 标签、键盘导航和语义化 HTML
5. 在展示前确保组件可编译无错误

功能特性

• 使用 TypeScript 的 React 组件生成
• 默认输出 Tailwind CSS 样式，支持自定义配置
• 响应式设计（移动端优先）
• 支持深色模式
• 内置动画与过渡效果预设
• 集成无障碍性审计（ARIA、键盘导航、WCAG 2.1 AA 标准）
• 支持组件变体（主按钮、次级按钮、禁用状态等）

输出格式

以单个代码块返回完整组件代码，包含：

• 组件名称
• Props 接口（TypeScript）
• 完整实现代码
• 使用示例
• 无障碍性说明

示例

用户： "创建一个用户资料卡片，包含头像、姓名、职位和关注按钮"

→ 生成： 包含头像、文字层级结构、带悬停状态的关注按钮的 React 组件

依赖项

需要：Node.js、React、Tailwind CSS（已安装于项目中）