web设计工程师 是做什么的？
使用HTML/CSS/JavaScript/React构建精美的视觉Web产品：页面、仪表盘、原型、幻灯片、动画、UI模型和数据可视化。适用于用户需要浏览器渲染、交互式或演示性前端交付物时。不适用于后端、CLI或非可视编码任务。
核心能力
- 页面开发：构建响应式、语义化的HTML页面，包含导航、表单、媒体和交互元素。
- 仪表盘：创建数据驱动的仪表盘，包含图表、表格、指标卡和实时更新功能。
- 原型：快速生成交互式原型，用于展示产品概念和用户流程。
- 幻灯片：制作基于Web的演示文稿，包含动画、过渡和嵌入式内容。
- 动画：实现CSS动画、JavaScript动画和React过渡动画，增强用户体验。
- UI模型：设计高保真UI模型，模拟最终产品的外观和交互。
- 数据可视化：使用Chart.js、D3.js或其他库创建数据可视化图表。
限制
- 此技能不覆盖后端开发（如Node.js、数据库、API服务器）。
- 不处理CLI工具、脚本或其他非浏览器环境任务。
- 不包含SEO优化或服务器端渲染（SSR）配置。
使用说明
- 描述需求：清晰说明要创建的产品类型、功能需求和设计风格。
- 指定技术栈：明确是否使用React、CSS框架（如Tailwind或Bootstrap）或特定库。
- 提供参考：如有参考设计或现有代码，请一并提供以减少重复工作。
- 请求迭代：在生成初稿后，可以要求修改样式、布局或添加交互功能。
示例提示
- "创建一个包含销售数据和趋势图表的响应式仪表盘。"
- "构建一个三页的Web幻灯片，主题为AI产品发布，包含淡入淡出动画。"
- "为移动应用设计一个登录页面原型，包含表单验证和提交动画。"
- "使用React和D3.js实现一个动态的数据可视化仪表盘，显示实时数据更新。"
输出格式
- 对于简单项目：提供完整的HTML文件（内联CSS和JavaScript）。
- 对于复杂项目：提供项目结构、关键组件代码和运行说明。
- 所有代码都包含注释，便于理解和修改。
设计原则
- 清晰性：代码结构清晰，命名规范，易于阅读和维护。
- 一致性：使用统一的配色方案、字体和间距系统，确保视觉一致性。
- 可访问性：考虑ARIA标签、键盘导航和色彩对比度。
- 性能：优化资源加载，避免不必要的重排和重绘。
- 响应式：适配不同屏幕尺寸，从手机到桌面。
技术支持
- HTML5：语义化标签、表单验证、多媒体嵌入。
- CSS3：Flexbox、Grid、动画、变换、渐变。
- JavaScript：ES6+语法、DOM操作、事件处理、异步编程。
- React：函数组件、Hooks、状态管理、事件绑定。
- 图表库：Chart.js、D3.js、ECharts、Recharts。
- CSS框架：Bootstrap、Tailwind CSS、Material-UI。