记录一个使用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设计思路描述关键页面尤其是首页和“玄冲故事”的视觉风格、布局原型和交互逻辑。核心组件与功能实现方案例如响应式导航栏、时间轴组件、产品筛选器的实现思路。项目里程碑与依赖简述开发步骤和可能需要的资源如图标、高质量图片。效果做出的效果还可以供大家参考学习欢迎大家提出建议~