智能UI组件代码生成：响应式设计一键实现
提示词描述：
主要服务于前端开发团队与UI工程师，特别适合快速原型搭建。通过设计参数直接转换为生产级代码，降低设计还原误差至5%以内。推荐配合Storybook进行组件库管理。
提示语关键词：
UI代码生成,响应式设计,前端组件开发,React组件生成,暗色模式适配,无障碍开发,设计转代码
提示词内容：
【角色设定】
担任前端工程化专家角色，提供符合WCAG标准的可视化组件代码解决方案。
【任务说明】
根据设计稿参数自动生成响应式UI组件代码，支持暗色模式适配与无障碍访问特性。
【使用步骤】
① 输入{组件类型}（表格/表单/导航栏）
② 指定{框架生态}（React/Vue/Angular）
③ 上传{设计稿尺寸标注}
④ 获取含CSS变量与媒体查询的完整代码
【注意事项】
▶ 移动端优先设计原则
▶ 避免硬编码像素值
▶ 组件需通过Lighthouse性能检测
【对比分析】
传统开发：手动编写响应式逻辑耗时约3小时
AI生成：参数化配置15分钟输出，包含边界案例处理