AI提示词

请通过以下方式帮我完成易优论AI智能生成平台原型图片的设计。
1、思考用户需要易优论平台实现哪些功能
2、作为产品经理规划这些界面
3、作为设计师思考这些原型界面的设计
4、使用html在一个界面上生成所有的原型界面,可以使用FontAwesome等开源图标库,让原型显得更精美和接近真实我希望这些界面是需要能直接拿去进行开发的
。- 模拟真实用户使用易优论平台的真实场景和需求;

  • 结合用户需求,以产品经理的视角去规划易优论平台的功能、页面和交互;- 结合产品规划,以设计师的视角去输出完整的UI/UX;
  • 引入tailwindcss来完成,而不是变成style样式,图片使用unsplash,用Material Design风格
  • 以上全部页面都在同一个html文件中展示。

易优论平台主要是为了方便即将毕业的毕业生,它具备以下功能:
1.图表生成模块:

核心功能模块

  1. 可视化生成控制台

    • 头部导航区
      • 显示”图表生成”主标题和”快速生成各类数据可视化图表”副标题
      • 实时显示生成消耗点数(每次2点)
      • 使用Material Design折线图图标(i-mdi:chart-line)
  2. 多维数据输入系统

    • 基础数据操作
      • 添加数据按钮(支持原始数据导入)
      • 表格插入功能(支持结构化数据输入)
    • 高级数据接口
      • Word原生图表集成(支持数据编辑和折线/条形/散点/雷达/饼/柱状图生成)
      • 代码插入功能(支持Java/PHP/Python等语言标注)
  3. 全栈图表生成体系

    • 专业图表引擎
      • Matplotlib引擎(生成散点图/柱状图/热力图等)
      • Mermaid引擎(生成流程图/时序图/类图/状态图)
    • 学术图表系统
      • E-R图生成(支持实体关系描述)
      • 架构图生成(支持系统架构可视化)
      • 时序图生成(支持时间序列可视化)
    • 商业图表组件
      • 饼图生成器
      • XY坐标系图表(折线/柱状混合)
      • 思维导图生成器
  4. 智能交互系统

    • 需求输入面板
      • 多行文本输入框支持自然语言描述(”请输入您的图表要求…”)
      • 支持复杂参数配置(图表样式、数据维度等)
    • 实时预览系统
      • 右侧独立预览面板(最小高度500px)
      • 自适应布局支持(lg:grid-cols-[1fr_1fr]响应式设计)

技术特性

  1. 跨平台兼容

    • 原生支持Word图表格式(可编辑数据表)
    • 代码生成与图表生成分离架构(防止Matplotlib/Mermaid引擎冲突)
  2. 交互增强

    • 横向滚动操作栏(隐藏滚动条设计)
    • 按钮悬停状态反馈(阴影变化和背景色过渡)
    • 屏幕阅读器优化(sr-only提示信息)
  3. 生成规则

    • 明确禁止混合使用不同生成引擎(”两种请勿混用”提示)
    • 强制参数标注规则(如语言类型、图表方向要求)

辅助系统

  1. 点数管理系统

    • 独立点数消耗提示(与其他系统不互通)
    • 生成前预校验机制(生成按钮初始禁用状态)
  2. 帮助提示系统

    • 常驻提示面板(”尽可能多的要求生成数据”)
    • 错误警示框架预留(红色警示框结构)

该平台面向科研论文、商业报告、系统设计等多场景需求,提供从数据录入、图表配置到可视化输出的全流程解决方案,支持14种专业图表类型生成,满足学术写作和技术文档制作的专业化需求。

我提交的任务

注意

查重系统的点数与其他功能的点数不通用,查重系统的点数只能用于查重系统。

CheckPass检测

1点 / 万字

硕博内部定稿

160点 / 每篇

维普大学生版

2.7点 / 千字

维普AIGC检测

20点 / 每篇

维普编辑部版

2.7点 / 千字

维普研究生版

2.7点 / 千字

维普职称版

27点 / 万字

Grammarly语法检测

2.5点 / 千字

Ithenticate

30点 / 每篇

PaperPass检测

1.5点 / 千字

PaperYY检测

3点 / 万字

文本改写

0.5点 / 千字

降AI改写

3点 / 千字

Turnitin 国际版

3点 / 千字

Turnitin-UK版

4点 / 千字

万方AIGC检测

1.8点 / 千字

万方本科版

2.7点 / 千字

万方通用版

2.7点 / 千字

万方硕博版

2.7点 / 千字

万方期刊版

2.7点 / 千字

源文鉴本科

30点 / 每篇

源文鉴硕博

90点 / 每篇

源文鉴期刊

40点 / 每篇

早检测

2点 / 千字

早降重降AIGC率

5点 / 千字

早降重

2.5点 / 千字

3.格式调整

格式调整

调整文档的页边距、标题样式和正文格式,创建和管理格式模板

                content: ‘你是一个专业的毕业论文可视化助手,通过用户输入内容判断你要生成的可视化类型,最符合毕业论文需要的【Word原生图表插入 Word 原生图表到文档中,可编辑数据。可指定要求折线图/条形图/散点图/雷达图/饼图/柱状图Matplotlib图表使用Matplotlib生成数据可视化图表 [散点图、柱状图、折线图、热力图等] 两种请勿混用Mermaid图表使用Mermaid生成各类图表 [流程图、时序图、类图、状态图等] 生成成功率高 两种请勿混用插入代码是否添加代码 [请标注需要的语言类型 java、php、python等]插入流程图是否添加流程图 [可加入流程相关的说明,例如是否要连通图、水平排序还是垂直排序]E-R图是否添加 E-R 图 [请说明需要的实体名称,也可以描述关系,要求]插入类图是否添加类图 [请说明类名,也可附加属性、方法等 / E-R图或时序图等等也可以用该类型]插入架构图是否添加架构图 [可加入相关的说明]插入时序图时序图插入饼图使用Mermaid生成饼图插入XY图生成XY图 [折线图、柱状图] (请备注需要折线还是柱状图)插入思维导图】,然后返回对应的HTML代码。使用html在一个界面上生成所有的可视化的原型界面,可以使用FontAwesome等开源图标库,让原型显得更精美和接近真实我希望这些图表是需要能直接拿去进行使用的- 模拟真实用户使用图表的真实场景和需求;直接返回HTML代码,不要有任何解释,确保代码完整可用。模拟真实用户使用可视化内容的真实场景和需求;- 结合用户需求,以内容可视化助手的视角去规划图表的功能、页面和交互;- 结合产品规划,以设计师的视角去输出完整的UI/UX;- 引入tailwindcss来完成,而不是变成style样式,图片使用unsplash- 以上全部页面都在同一个html【需要的依赖什么的都用远程地址,页面包含样式JavaScript等等需要的东西】文件中展示。’

我想开发一个 {短视频类型的 App},现在需要输出高保真的原型图,请通过以下方式帮我完成所有界面的原型设计,并确保这些原型界面可以直接用于开发:用户体验分析:先分析这个 App 的主要功能和用户需求,确定核心交互逻辑。进行用户调研,了解目标用户的需求与痛点。对竞品进行分析,研究其他类似类型的 App(如 {短视频类型的 App})功能和设计的优缺点。产品界面规划:作为产品经理,定义关键界面,确保信息架构合理。根据功能优先级定义 MVP(最小可行产品)的核心功能,确保重要功能优先实现。制定迭代计划,确保开发进度可控,并逐步实现其他功能。高保真 UI 设计:作为 UI 设计师,设计贴近真实 iOS/Android 设计规范的界面,使用现代化的 UI 元素,确保视觉体验良好。构建设计系统,规范颜色、字体、按钮等元素的样式。提供详细的风格指南,确保界面元素一致性。HTML 原型实现:使用 HTML + Tailwind CSS(或 Bootstrap)生成所有原型界面,并使用 FontAwesome(或其他 UI 组件)让界面更加精美,接近真实 App 设计。将每个界面作为独立 HTML 文件(如 home.html、profile.html、settings.html 等),并通过 iframe 嵌入到 index.html,便于整体展示,将所有页面直接平铺展示在 index 页面中真实感增强:界面尺寸应模拟 iPhone 15,圆角化,使其更像真实的手机界面。使用真实的 UI 图片,而非占位符图片(可从 Unsplash、Pexels、Apple 官方 UI 资源中选择)。添加顶部状态栏(模拟 iOS 状态栏),并包含 App 导航栏(类似 iOS 底部 Tab Bar)。交互设计与动画效果:展示主要交互逻辑(如页面切换、按钮点击、滑动列表等)。在原型中加入简化的动画效果,帮助更好地传达交互体验。无障碍设计:确保 UI 元素有足够的对比度,文本可放大,按钮和链接可用屏幕阅读器识别。确保键盘和触控支持良好,交互体验流畅自然。请按照以上要求生成完整的 HTML 代码,并确保其可用于实际开发。

我想开发一个{易优评【AI创新创业评审系统】}App,现在需要输出极致美观的高保真原型图,请通过以下方式帮我完成所有界面的原型设计,确保设计既具创意又可直接用于开发:

用户体验与设计思考

  • 深入分析App核心功能与目标用户心理需求,确定独特交互体验

  • 进行情感化用户调研,捕捉用户隐性需求与审美偏好

  • 研究全球领先同类产品的设计亮点,提取可借鉴的创新元素

  • 定义产品设计差异化优势,打造令人印象深刻的品牌体验

先锋产品界面规划

  • 运用”情感化设计”原则构建信息架构,注重用户情感连接

  • 定义富有前瞻性的核心功能与交互逻辑,超越用户期待

  • 设计独特的导航系统,创造流畅直觉的操作体验

  • 规划渐进式功能展示,引导用户探索产品深度

视觉设计突破

  • 融合最新设计趋势(新拟态/玻璃态/流体设计)创造前卫视觉语言

  • 设计独特的品牌色彩系统,包含大胆渐变与微妙色调变化

  • 运用精心设计的阴影、光效与质感,营造虚实结合的视觉层次

  • 创造独特排版系统,使用动态字体与创意网格布局

  • 定制专属图标与微插画,提升品牌识别度与情感共鸣

HTML原型高级实现

  • 使用HTML5 + Tailwind CSS构建响应式界面,结合CSS变量实现一致设计系统

  • 整合高品质UI组件库与FontAwesome Pro图标,打造精致视觉体验

  • 每个界面创建独立HTML文件,通过优雅的iframe嵌套展示于index.html

  • 运用CSS Grid与Flexbox创建流畅自适应布局,支持多设备预览

  • 添加适量JavaScript交互,实现关键功能演示

超真实设备模拟

  • 精确复刻最新iPhone/Android设备尺寸与物理特性(圆角/刘海/边距)

  • 使用高质量真实内容与图像,避免任何占位符元素

  • 完美还原操作系统原生UI元素(状态栏/导航栏/手势区域)

  • 添加设备边框与物理按键,提升原型真实感

  • 模拟系统级动效与过渡,如应用启动与切换效果

沉浸式交互与动效

  • 设计情感化微交互(触感反馈/声效提示/形变动画)

  • 实现流畅的过渡效果与页面切换动画,强化空间感

  • 创建独特的手势操作与交互模式,提升使用愉悦感

  • 设计富有创意的状态转换动画,使每个操作都成为视觉享受

  • 添加细腻的反馈动效,增强用户与界面的情感连接

创新体验元素

  • 融入轻量级3D元素与视差效果,创造深度感

  • 设计智能化的深色/浅色主题系统,支持自动/手动切换

  • 创造独特的空状态与加载动画,让等待也成为体验

  • 设计情境感知式UI,根据用户使用场景智能调整界面

  • 加入令人惊喜的界面彩蛋与互动元素,提升产品记忆点

体验优化与无障碍

  • 确保超高对比度与清晰可读性,适应各种光线环境

  • 优化触控区域与交互目标,提供舒适操作体验

  • 支持全面的无障碍特性,确保普遍可用性

  • 设计流畅的多任务切换与中断恢复体验

请生成符合以上要求的完整HTML代码,确保视觉效果极具现代感与创造力,同时保持卓越的用户体验与开发可行性。每个界面都应当成为设计艺术品,展现未来感与品牌独特性。

成功的版本:
我需要为易优评【AI创新创业评审系统】创建极致设计的高保真原型,请按以下框架完成设计,确保结果既富创意又可直接转化为代码:

1. 战略设计思考

提炼{应用类型}核心用户痛点与情感诉求,定义差异化体验机会

分析全球设计标杆产品,提取可借鉴的创新元素与交互模式

构建独特的产品设计哲学,确立令人难忘的品牌体验基调

2. 体验架构设计

设计”零学习成本”的直觉化信息架构,优化关键用户旅程

创建以情感连接为核心的界面层级与功能流程

运用行为心理学原理,设计引导性强且令人愉悦的交互路径

规划渐进式功能展示逻辑,实现功能探索与即时满足的平衡

3. 视觉设计突破

融合前沿设计趋势(液态设计/微动效/3D元素)创建独特视觉语言

构建富有层次的色彩系统,运用微妙渐变与光影创造空间感

设计专属排版系统与图形语言,建立强烈品牌识别度

应用精致质感与细节处理,实现”可触摸”的界面体验

平衡简约与丰富,确保视觉冲击力不牺牲可用性

4. 代码级原型实现

使用HTML5+TailwindCSS+AlpineJS构建响应式高保真界面

实现基于CSS变量的设计系统,确保界面一致性与可维护性

为每个关键界面创建独立HTML文件,通过优雅布局展示于index页面

运用最新Web技术(CSS Grid/Flexbox/动画API)实现流畅布局与交互

优化资源加载与渲染性能,确保原型运行流畅

5. 沉浸式设备体验

精确还原最新设备物理特性(尺寸/圆角/刘海屏/动态岛)

无缝融合系统UI元素(状态栏/手势区/底部导航),增强真实感

使用高质量真实内容替代占位符,创造”已完成产品”的体验

模拟真实使用场景与环境光效,展示界面适应性

6. 微交互与动效系统

设计情感化微交互,为每个关键操作赋予独特反馈

创建流畅自然的界面转场与状态变化动画

运用细腻的触感动效与视觉提示,增强操作确认感

设计一致且有意义的动效语言,提升界面连贯性

通过CSS动画与轻量级JS实现关键动效,确保性能优良

7. 创新体验元素

融入适量视差效果与空间层次,创造沉浸感

设计智能化的环境感知UI,适应不同使用情境

创造令人惊喜的互动元素与界面彩蛋,增强情感连接

设计优雅的空状态与加载体验,转化等待为愉悦

实现无缝的深浅色模式切换,优化各种光线环境下的可用性

8. 体验完善与品质保障

确保卓越的可读性与触控舒适度,适应各种使用场景

优化关键路径的视觉层级与引导性,减少认知负担

融入无障碍设计原则,确保普遍可用性

关注细节完善度,打造精致的专业级设计体验

请基于以上框架生成完整HTML代码,创造一套既有未来感又实用的高保真原型,使其成为设计艺术品的同时保持开发可行性。每个界面应当既能打动用户又能满足业务目标,展现卓越设计思考与品牌独特性。

现在需要输出高保真的原型图,并确保这些原型界面可以直接用于开发:用户体验分析:先分析这个 易优评【某县的水资源、农田、森林资源以及文物资源进行可视化大屏】的主要功能和用户需求,确定核心交互逻辑。进行用户调研,了解目标用户的需求与痛点。对竞品进行分析,研究其他类似类型的 易优评【某县的水资源、农田、森林资源以及文物资源进行可视化大屏】(如 创新创业评审类型的 网站})功能和设计的优缺点。产品界面规划:作为产品经理,定义关键界面,确保信息架构合理。根据功能优先级定义 MVP(最小可行产品)的核心功能,确保重要功能优先实现。制定迭代计划,确保开发进度可控,并逐步实现其他功能。高保真 UI 设计:作为 UI 设计师,设计贴近真实 iOS/Android 设计规范的界面,使用现代化的 UI 元素,确保视觉体验良好。构建设计系统,规范颜色、字体、按钮等元素的样式。提供详细的风格指南,确保界面元素一致性。HTML 原型实现:使用 HTML + Tailwind CSS(或 Bootstrap)生成所有原型界面,并使用 FontAwesome(或其他 UI 组件)让界面更加精美,接近真实 web可视化大屏 设计。将每个界面作为独立 HTML 文件(如 home.html、profile.html、settings.html 等),并通过 iframe 嵌入到 index.html,便于整体展示,将所有页面直接平铺展示在 index 页面中真实感增强。使用真实的 UI 图片,而非占位符图片(可从 Unsplash、Pexels、Apple 官方 UI 资源中选择)。。交互设计与动画效果:展示主要交互逻辑(如页面切换、按钮点击、滑动列表等)。在原型中加入简化的动画效果,帮助更好地传达交互体验。无障碍设计:确保 UI 元素有足够的对比度,文本可放大,按钮和链接可用屏幕阅读器识别。确保键盘和触控支持良好,交互体验流畅自然。请按照以上要求生成完整的 HTML 代码,并确保其可用于实际开发。.

将某县的水资源、农田、森林资源以及文物资源进行可视化大屏展示,可视化效果重点需求如下:
1.实现县全域的三维地形渲染,不同类别资源可以有单独展示页面,精度尽量高一些。
2.利用热力图形式直观展现
县内不同区域的污染指数分布情况
3.以动态光带效果来模拟水流方向。
4.在主地图界面周围显示相关统计数据、监测结果以及精选案例图片等内容。
5.文物古迹可以支持地图上点位标记展示。