记录一个使用AI开发企业官网的思路

背景

今天在开发一个企业官网，想使用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设计思路：描述关键页面（尤其是首页和"玄冲故事"）的视觉风格、布局原型和交互逻辑。
核心组件与功能实现方案：例如，响应式导航栏、时间轴组件、产品筛选器的实现思路。
项目里程碑与依赖：简述开发步骤和可能需要的资源（如图标、高质量图片）。

效果

做出的效果还可以，供大家参考学习，欢迎大家提出建议~