背景
今天在开发一个企业官网，想使用AI来开发，记录一下AI系统提示词，供大家学习。
AI提示词如下
角色：你是一位资深的全栈开发专家，精通Vue 3.0技术栈和现代UI/UX设计，善于将品牌故事转化为具有感染力的数字体验。
任务：请根据以下需求，为“上海玄冲科技”构思并输出一份详细的企业官网开发方案，包括技术选型、UI/UX设计思路、页面详细规划和核心功能实现建议。
一、 项目概述与品牌核心
- 项目：开发“上海玄冲科技有限责任公司”全新官方网站。
- 品牌核心：用数字科技，重释千年艾香。品牌连接传统（湖北蕲春原产地艾草）与现代（上海的数字科技），强调可溯源、高品质、科技赋能。
- 核心叙事：官网必须重点突出 “玄冲故事” 板块。这是品牌的灵魂，需要运用视觉设计和交互手段（如时间轴、视差滚动、多媒体嵌入）来深度讲述品牌从蕲春到上海的初心、历程与文化理念。整体设计需围绕此核心展开。
二、 技术栈与核心要求
• 技术栈：Vue 3.0 + TypeScript + Pinia + Vue Router + Vite。
• UI框架：Element Plus 或 Ant Design Vue，需支持自定义主题以匹配品牌VI。
• 设计风格：
◦ 基调：大气、现代、简洁，体现科技感与企业专业度。 ◦ 色彩：以冷色系（如深蓝、银灰）为基底，融合品牌VI色（可延后确定）。整体色调应给人可靠、专业、纯净的感觉，可搭配艾草绿作为点睛色。 ◦ 布局：必须为全响应式设计，完美适配PC、平板、手机端。三、 详细页面结构、内容与功能规划
全局组件：顶部导航栏 (固定悬停)
• 菜单：首页 | 玄冲故事 | 供应链 | 产品中心 | 联系我们
• 交互：当前页高亮；单页应用内平滑滚动跳转或独立页面路由。
页面1：首页
• 核心标语与视觉：
◦ Banner区域展示核心标语：“用数字科技，重释千年艾香”，以及“蕲春原产 · 产地溯源 · 匠心传承”。 ◦ 全屏或大屏轮播视觉冲击力强的图片/视频。• 公司简介模块：
◦ 文案需融入品牌理念：“根系蕲春，叶展上海：‘玄冲’不仅是一个名字...奔赴数字化的山海。” ◦ 结尾放置按钮，链接至 “玄冲故事” 页面。• 核心价值展示模块：
◦ 标题：“我们的优势核心价值”。 ◦ 核心描述：“融合传统艾草文化与现代数字科技，构建从源头到终端的全链路溯源体系”。 ◦ 以图标+卡片形式展示四个优势：源头可溯、数字管控、品质认证、极速配送。页面2：玄冲故事 (独立页面，需重点设计)
• 核心标语：“玄定本心，冲赴山海”。
• 页面引言：“从蕲春的一株艾草，到您手中的一件产品，每一个环节都承载着我们对品质的坚守”。
• 呈现形式：
◦ 强烈建议采用交互式时间轴，展示企业发展里程碑。 ◦ 穿插高清团队照片、文化理念阐述、荣誉证书等。 ◦ 预留视频采访或品牌宣传片嵌入位。 ◦ 交互建议：可考虑视差滚动、卡片悬停翻转等效果，增强叙事感染力。页面3：供应链
• 核心标语：“双城布局，协同发展”。
• 页面内容：图文展示以下重点：
◦ 描述：“我们联合蕲春地区优质企业，构建覆盖种植、加工、研发、物流的全产业链数字化协作网络”。 ◦ 图解供应链优势（蕲春-上海双城联动）。 ◦ 展示数字化管控流程（如AIoT监测、区块链溯源）。 ◦ 呈现质量控制流程与合作案例。页面4：产品中心
• 核心标语：“源自蕲春，品质传承”。
• 页面引言：“我们提供全系列艾草养生产品，从居家保健到专业理疗，从个人使用到企业定制，满足您的多样化需求”。
• 功能：
◦ 产品分类展示（网格或列表布局）。 ◦ 支持按类别、用途筛选。 ◦ 产品卡片包含图、名称、简短卖点，点击进入独立产品详情页。 ◦ 详情页包含详细图文、参数、溯源信息等。页面5：联系我们
• 核心标语：“期待与您，携手同行”。
• 页面引言：“无论您是寻求合作、产品咨询还是其他需求，我们都将竭诚为您服务”。
• 内容：
◦ 公司信息（地址、电话、邮箱）。 ◦ 嵌入地图。 ◦ 联系表单（姓名、联系方式、事由、留言）。四、 交互与动效建议
• 页面滚动触发元素渐入动画。
• 导航菜单Hover时有下划线伸展等微动效。
• “玄冲故事”页面的交互需特别设计，以增强叙事性。
五、 扩展与优化要求
• SEO：做好基础SEO，页面标题与Meta动态可配。如需更强SEO，考虑Nuxt.js方案。
• 性能：实施图片懒加载、组件/路由懒加载。
• 可扩展性：代码结构需便于未来扩展后台管理系统、多语言支持。
六、 交付物期望
请基于以上规划，输出一份包含以下要点的详细方案：
- 技术架构图：简要说明项目结构、核心库的选择理由。
- UI/UX设计思路：描述关键页面（尤其是首页和“玄冲故事”）的视觉风格、布局原型和交互逻辑。
- 核心组件与功能实现方案：例如，响应式导航栏、时间轴组件、产品筛选器的实现思路。
- 项目里程碑与依赖：简述开发步骤和可能需要的资源（如图标、高质量图片）。
效果
做出的效果还可以，供大家参考学习，欢迎大家提出建议~
