跳到正文
进群
交流
进群交流

扫码进群交流

进群交流二维码

提示词 · 提示词

新世纪福音战士Bento风格介绍

简介

基于下面苹果 WWDC2025发布会关键信息,帮我用类似苹果发布会PPT的Bento Grid风格的视觉设计生成一个新世纪福音战士全方面通俗易懂的介绍,在线引用背景图片,背景图片为:https://i.ibb. co/xtN61cRf/Comfy-UI-Output-4-1.png 具体要求为: 1. 使用Bento…

免费

你是一位专业的UI设计师和前端开发专家,精通苹果风格设计和Bento Grid布局。请根据以下要求创建一个新世纪福音战士的现代化介绍页面:

角色定义

你是一位融合了苹果设计美学与动漫视觉表达的跨界设计师,擅长将复杂概念转化为直观的视觉呈现。

任务描述

使用HTML5、TailwindCSS 3.0+和JavaScript创建一个响应式的Bento Grid布局页面,介绍新世纪福音战士的核心内容。具体要求包括:

输出约束

  • 视觉风格:苹果WWDC风格的Bento Grid布局
  • 色彩方案:白色文字+苹果渐变高亮色
  • 字体系统:Google Fonts主标题粗体中文+点缀英文
  • 图标系统:Font Awesome 5图标
  • 数据可视化:Apache ECharts 5图表
  • 背景图片:使用指定URL的EVA主题图
  • 交互效果:玻璃质感卡片悬停动画

质量标准

  1. 严格实现提供的liquidGlass卡片效果
  2. 保持1920px及以上宽屏兼容性
  3. 超大视觉元素与小元素形成3:1以上比例差
  4. 所有技术引用通过CDN引入
  5. 完整包含EVA的核心要素介绍
  6. 渐变效果仅应用单一高亮色自身透明度变化

示例元素

  • 超大数字:显示"2003"(TV版首播年份)
  • 核心角色:使用简洁勾线图标表示
  • 数据图表:展示NERV组织架构
  • 高亮短语:"人类补完计划"使用苹果渐变

技术规范

原文与分段复制
第 1 段
### ?? 新世纪福音战士Bento风格介绍
```
你是一位专业的UI设计师和前端开发专家,精通苹果风格设计和Bento Grid布局。请根据以下要求创建一个新世纪福音战士的现代化介绍页面:
第 2 段
#### 角色定义
你是一位融合了苹果设计美学与动漫视觉表达的跨界设计师,擅长将复杂概念转化为直观的视觉呈现。
第 3 段
#### 任务描述
使用HTML5、TailwindCSS 3.0+和JavaScript创建一个响应式的Bento Grid布局页面,介绍新世纪福音战士的核心内容。具体要求包括:
第 4 段
#### 输出约束
- 视觉风格:苹果WWDC风格的Bento Grid布局
- 色彩方案:白色文字+苹果渐变高亮色
- 字体系统:Google Fonts主标题粗体中文+点缀英文
- 图标系统:Font Awesome 5图标
- 数据可视化:Apache ECharts 5图表
- 背景图片:使用指定URL的EVA主题图
- 交互效果:玻璃质感卡片悬停动画
第 5 段
#### 质量标准
1. 严格实现提供的liquidGlass卡片效果
2. 保持1920px及以上宽屏兼容性
3. 超大视觉元素与小元素形成3:1以上比例差
4. 所有技术引用通过CDN引入
5. 完整包含EVA的核心要素介绍
6. 渐变效果仅应用单一高亮色自身透明度变化
第 6 段
#### 示例元素
- 超大数字:显示"2003"(TV版首播年份)
- 核心角色:使用简洁勾线图标表示
- 数据图表:展示NERV组织架构
- 高亮短语:"人类补完计划"使用苹果渐变
第 7 段
#### 技术规范
<!-- 必须包含的CDN引用 -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css">
<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js">
<link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
```
第 8 段
### ?? 使用建议
- **适用场景**:动漫主题展示网站、科技产品风格演示
- **优化方向**:可添加EVA机体3D旋转展示组件

相关资源

资源信息

分类
提示词
类型
提示词
费用
免费
更新

标签