Frontend Design — 前端设计

前端设计技能 从自然语言描述中生成可用于生产的UI组件。 指令 当用户请求UI组件、布局或前端功能时： 如果请求不明确（响应式？暗黑模式？现有的设计系统？），则提出澄清问题 使用React + Tailwind CSS默认生成组件 输出完整的组件代码，包括所有属性、状态管理和无障碍属性 包括ARIA标签、键盘导航和语义HTML 在呈现之前验证组件是否可以编译而不出错 功能 使用TypeScript生成React组件 使用Tailwind CSS输出（默认）并支持自定义配置 响应式设计（移动优先） 暗黑模式支持 动画和过渡预设 无障碍审计集成（ARIA、键盘导航、WCAG 2.1 AA） 组件变体（主、次、禁用状态） 输出格式 以单个代码块的形式返回完整的组件代码，包括： 组件名称 属性接口（TypeScript） 完整实现 用法示例 无障碍说明 示例 用户：“创建一个用户个人资料卡，包含头像、名称、角色和一个关注按钮” → 生成：包含头像、排版层次、带有悬停状态的关注按钮的React组件 依赖项 需要：Node.js、React、Tailwind CSS（安装在项目中） 支持GitHub和CLI集成，通过API提供服务。