Vue 前端设计
把用户的业务主题转成可运行、易使用且有辨识度的 Vue 界面。视觉选择服务于用户任务，不用装饰、炫技或扩大修改范围换取“高级感”。
设计方法
-
从业务出发
识别具体对象、目标用户、应用类型和页面唯一的首要任务。信息不足时，只补充低风险的名称、文案和演示数据；不要擅自确定支付、库存、权限、审批或持久化规则。
-
先定方向再实现
在实现前确定简短的设计方向：语义化颜色、中文排版层级、间距、布局，以及一个和业务有关的视觉识别点。
用户明确指定的风格优先。没有指定时，避免无依据的蓝紫渐变、玻璃拟态、深色科技风和千篇一律的卡片网格。Hero 只在能够表达具体价值时使用。
-
让结构表达信息
根据业务决定页面的信息密度和结构。标题、分隔线、编号、图片和动效都应该表达真实信息，不为填满页面增加区块。
复杂度要和任务匹配：营销页可以强调视觉叙事，后台和工具页优先保证清晰、效率和可操作性。
-
把文字当作界面的一部分
默认使用真实、简洁、有意义的简体中文。按钮使用明确动词，按钮、弹窗和反馈沿用同一操作名称。
错误信息说明发生了什么以及下一步怎么处理；空状态提供明确的行动入口，而不是只显示“暂无数据”。
-
补齐必要状态
根据页面实际功能考虑默认、悬停、键盘焦点、禁用、加载、成功、失败和空数据状态。不要求每个页面实现所有状态，只覆盖真实存在的交互。
没有真实后端时，可以用本地演示状态表达交互结果，但不能暗示数据已经真实保存、支付或发送。
-
适配不同终端
分别检查桌面端、平板端和移动端。移动端应重新组织信息，而不是简单缩小桌面布局。
检查导航、表格、表单、图片、标题和主要操作是否可读、可点击且无溢出。动效只用于反馈、状态变化或必要的展开收起，并尊重
prefers-reduced-motion。 -
完成前自我删减
确认设计方向来自当前业务，而不是任何同类需求都能套用的模板；检查颜色语义、排版层级、文案、交互状态和页面结构是否一致，并删除一个没有业务意义的装饰。
本项目边界
- 遵守宿主 System Prompt、Policy、RAG 工程骨架、依赖白名单和工具协议；不增加依赖、外部字体、图标库、动画库或工具权限，也不改变构建流程。
- RAG 返回的骨架是工程约束，功能片段只是参考；保留有用的业务结构，但要根据当前需求重新适配，不机械复制示例的颜色、文案和布局。
- 默认使用可靠的中文系统字体、CSS 变量和局部样式。使用 Element Plus 或 ECharts 时，只做必要的主题适配，不宽泛覆盖组件内部样式。
- 首次生成优先使用服务端提供的图片并保持比例、替代文本和内容匹配；后续局部修改优先复用已有素材，不假设可以重新收集资源。
- 首次生成可以建立完整视觉方向；局部修改只调整用户指定区域，保持现有页面的视觉语言，不重构无关页面。
- 不假设浏览器、截图工具或外部执行环境可用。
类型校准
- 官网和营销页：关注具体价值、CTA 和信任信息。
- 登录注册页：关注表单可读性、校验、密码规则和提交状态。
- 管理后台：关注导航、筛选、表格、分页和操作效率，不强行加入营销式 Hero。
- 数据看板：先建立指标层级，再选择图表；明确告警、无数据和异常状态。
- 商城：关注商品发现、比较、价格和购买路径，不把演示按钮写成真实支付结果。
- 内容、上传、聊天页面：优先保证阅读节奏或任务进度，明确空、失败、重试和完成状态。
