lywnl/ai-app-generation/vue-frontend-design

Vue 前端设计

把用户的业务主题转成可运行、易使用且有辨识度的 Vue 界面。视觉选择服务于用户任务，不用装饰、炫技或扩大修改范围换取“高级感”。

设计方法

1. 从业务出发

识别具体对象、目标用户、应用类型和页面唯一的首要任务。信息不足时，只补充低风险的名称、文案和演示数据；不要擅自确定支付、库存、权限、审批或持久化规则。

1. 先定方向再实现

在实现前确定简短的设计方向：语义化颜色、中文排版层级、间距、布局，以及一个和业务有关的视觉识别点。

用户明确指定的风格优先。没有指定时，避免无依据的蓝紫渐变、玻璃拟态、深色科技风和千篇一律的卡片网格。Hero 只在能够表达具体价值时使用。

1. 让结构表达信息

根据业务决定页面的信息密度和结构。标题、分隔线、编号、图片和动效都应该表达真实信息，不为填满页面增加区块。

复杂度要和任务匹配：营销页可以强调视觉叙事，后台和工具页优先保证清晰、效率和可操作性。

1. 把文字当作界面的一部分

默认使用真实、简洁、有意义的简体中文。按钮使用明确动词，按钮、弹窗和反馈沿用同一操作名称。

错误信息说明发生了什么以及下一步怎么处理；空状态提供明确的行动入口，而不是只显示“暂无数据”。

1. 补齐必要状态

根据页面实际功能考虑默认、悬停、键盘焦点、禁用、加载、成功、失败和空数据状态。不要求每个页面实现所有状态，只覆盖真实存在的交互。

没有真实后端时，可以用本地演示状态表达交互结果，但不能暗示数据已经真实保存、支付或发送。

1. 适配不同终端

分别检查桌面端、平板端和移动端。移动端应重新组织信息，而不是简单缩小桌面布局。

检查导航、表格、表单、图片、标题和主要操作是否可读、可点击且无溢出。动效只用于反馈、状态变化或必要的展开收起，并尊重 prefers-reduced-motion。

1. 完成前自我删减

确认设计方向来自当前业务，而不是任何同类需求都能套用的模板；检查颜色语义、排版层级、文案、交互状态和页面结构是否一致，并删除一个没有业务意义的装饰。

本项目边界

• 遵守宿主 System Prompt、Policy、RAG 工程骨架、依赖白名单和工具协议；不增加依赖、外部字体、图标库、动画库或工具权限，也不改变构建流程。
• RAG 返回的骨架是工程约束，功能片段只是参考；保留有用的业务结构，但要根据当前需求重新适配，不机械复制示例的颜色、文案和布局。
• 默认使用可靠的中文系统字体、CSS 变量和局部样式。使用 Element Plus 或 ECharts 时，只做必要的主题适配，不宽泛覆盖组件内部样式。
• 首次生成优先使用服务端提供的图片并保持比例、替代文本和内容匹配；后续局部修改优先复用已有素材，不假设可以重新收集资源。
• 首次生成可以建立完整视觉方向；局部修改只调整用户指定区域，保持现有页面的视觉语言，不重构无关页面。
• 不假设浏览器、截图工具或外部执行环境可用。

类型校准

• 官网和营销页：关注具体价值、CTA 和信任信息。
• 登录注册页：关注表单可读性、校验、密码规则和提交状态。
• 管理后台：关注导航、筛选、表格、分页和操作效率，不强行加入营销式 Hero。
• 数据看板：先建立指标层级，再选择图表；明确告警、无数据和异常状态。
• 商城：关注商品发现、比较、价格和购买路径，不把演示按钮写成真实支付结果。
• 内容、上传、聊天页面：优先保证阅读节奏或任务进度，明确空、失败、重试和完成状态。