即刻App年轻人的同好社区
下载
置顶最近大家都在问的提示词（先大模型生成网页后截图）
## 吉卜力动画
基于提供的文本或者网站等关键信息，帮我用类似苹果发布会 PPT 的 Hybrid Layout 风格的视觉设计结合吉卜力动画色系生成一个中文动态网页展示，具体要求为：
1. 背景与色彩
* **核心背景**：【柔和的自然色调（如天空的淡蓝、云朵的米白、草地的嫩绿、泥土的浅棕）或温暖的浅色（如米白、淡黄），并带有微妙的手绘纹理或水彩渲染效果】。
* **文字与常规UI颜色**：与背景和谐的【深色（如深棕、墨绿、炭黑，避免纯黑的生硬感）或在较深背景上使用柔和的白色/米色】。
2. 强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
3. 网页需要以响应式兼容更大的显示器宽度比如1920px及以上
4. 中英文混用，中文大字体粗体，英文小字作为点缀
5. 简洁的勾线图形化作为数据可视化或者配图元素
6. 运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
7. 数据可以引用在线的图表组件，样式需要跟主题一致
8. 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
9. 使用专业图标库如Font Awesome或Material Icons（通过CDN引入）
10. 避免使用emoji作为主要图标
11. 不要省略内容要点
12. 默认尽量在一页内展示全部信息（允许纵向滚动显示）
13. 否则，如果明确指定PPT分页，那么才按照PPT演讲需要切分内容（也就是一页一页展示信息，且有分页指示器在底部；另外，要求可以4个方向箭头和空格翻页，其中箭头不可见）
CSS 样式严格参考如下实现方式：
```css
<style>
body {
font-family: 'Open Sans', 'Noto Sans SC', sans-serif;
background-color: #FDF6E3; /* 吉卜力米白底色 */
background-image: linear-gradient(45deg, rgba(210, 180, 140, 0.03) 25%, transparent 25%),
linear-gradient(-45deg, rgba(210, 180, 140, 0.03) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(210, 180, 140, 0.03) 75%),
linear-gradient(-45deg, transparent 75%, rgba(210, 180, 140, 0.03) 75%);
background-size: 20px 20px;
color: #3A2E2C; /* 主文字颜色 深棕 */
}
.font-noto-sans-sc {
font-family: 'Noto Sans SC', sans-serif;
}
.highlight-text, .highlight-stat {
color: #FFB300; /* 温暖的琥珀黄高亮 - 移除了 text-shadow */
}
.card {
background-color: rgba(255, 255, 255, 0.75); /* 半透明白色卡片 */
backdrop-filter: blur(12px);
border-radius: 1.5rem; /* 苹果风格圆角 */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 4px 10px rgba(0,0,0,0.03);
padding: 1.5rem; /* 24px */
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
position: relative;
overflow: hidden; /* For glow effects */
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.08), 0 8px 15px rgba(0,0,0,0.05);
}
.card-alt-bg {
background-color: rgba(224, 242, 247, 0.75); /* 淡天蓝色半透明 */
}
.card-darker-alt-bg {
background-color: rgba(206, 229, 234, 0.8); /* 稍深一点的淡天蓝色 */
}
.tech-glow::before { /* 卡片背景光晕效果保留 */
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 250%;
height: 250%;
background-image: radial-gradient(circle, rgba(255,179,0,0.15) 0%, rgba(255,179,0,0.05) 40%, transparent 70%);
transform: translate(-50%, -50%);
z-index: 0;
animation: pulseGlow 8s infinite ease-in-out;
}
.content-z {
position: relative;
z-index: 1;
}
@keyframes pulseGlow {
0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.95); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
.ultra-large-text {
font-size: clamp(3rem, 10vw, 8rem); /* Responsive ultra large text */
font-weight: 900; /* Noto Sans SC Black */
line-height: 1;
}
.large-stat-text {
font-size: clamp(2.5rem, 6vw, 5rem); /* For large stats like subscriber count */
font-weight: 700;
}
.list-icon {
color: #FFB300; /* Highlight color for list icons */
margin-right: 0.5rem; /* Space between icon and text */
}
</style>
```
## 吉卜力动画
基于提供的文本或者网站等关键信息，帮我用类似苹果发布会 PPT 的 Hybrid Layout 风格的视觉设计结合吉卜力动画色系生成一个中文动态网页展示，具体要求为：
1. 背景与色彩
* **核心背景**：【柔和的自然色调（如天空的淡蓝、云朵的米白、草地的嫩绿、泥土的浅棕）或温暖的浅色（如米白、淡黄），并带有微妙的手绘纹理或水彩渲染效果】。
* **文字与常规UI颜色**：与背景和谐的【深色（如深棕、墨绿、炭黑，避免纯黑的生硬感）或在较深背景上使用柔和的白色/米色】。
2. 强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
3. 网页需要以响应式兼容更大的显示器宽度比如1920px及以上
4. 中英文混用，中文大字体粗体，英文小字作为点缀
5. 简洁的勾线图形化作为数据可视化或者配图元素
6. 运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
7. 数据可以引用在线的图表组件，样式需要跟主题一致
8. 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
9. 使用专业图标库如Font Awesome或Material Icons（通过CDN引入）
10. 避免使用emoji作为主要图标
11. 不要省略内容要点
12. 默认尽量在一页内展示全部信息（允许纵向滚动显示）
13. 否则，如果明确指定PPT分页，那么才按照PPT演讲需要切分内容（也就是一页一页展示信息，且有分页指示器在底部；另外，要求可以4个方向箭头和空格翻页，其中箭头不可见）
CSS 样式严格参考如下实现方式：
```css
<style>
body {
font-family: 'Open Sans', 'Noto Sans SC', sans-serif;
background-color: #FDF6E3; /* 吉卜力米白底色 */
background-image: linear-gradient(45deg, rgba(210, 180, 140, 0.03) 25%, transparent 25%),
linear-gradient(-45deg, rgba(210, 180, 140, 0.03) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(210, 180, 140, 0.03) 75%),
linear-gradient(-45deg, transparent 75%, rgba(210, 180, 140, 0.03) 75%);
background-size: 20px 20px;
color: #3A2E2C; /* 主文字颜色 深棕 */
}
.font-noto-sans-sc {
font-family: 'Noto Sans SC', sans-serif;
}
.highlight-text, .highlight-stat {
color: #FFB300; /* 温暖的琥珀黄高亮 - 移除了 text-shadow */
}
.card {
background-color: rgba(255, 255, 255, 0.75); /* 半透明白色卡片 */
backdrop-filter: blur(12px);
border-radius: 1.5rem; /* 苹果风格圆角 */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 4px 10px rgba(0,0,0,0.03);
padding: 1.5rem; /* 24px */
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
position: relative;
overflow: hidden; /* For glow effects */
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.08), 0 8px 15px rgba(0,0,0,0.05);
}
.card-alt-bg {
background-color: rgba(224, 242, 247, 0.75); /* 淡天蓝色半透明 */
}
.card-darker-alt-bg {
background-color: rgba(206, 229, 234, 0.8); /* 稍深一点的淡天蓝色 */
}
.tech-glow::before { /* 卡片背景光晕效果保留 */
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 250%;
height: 250%;
background-image: radial-gradient(circle, rgba(255,179,0,0.15) 0%, rgba(255,179,0,0.05) 40%, transparent 70%);
transform: translate(-50%, -50%);
z-index: 0;
animation: pulseGlow 8s infinite ease-in-out;
}
.content-z {
position: relative;
z-index: 1;
}
@keyframes pulseGlow {
0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.95); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
.ultra-large-text {
font-size: clamp(3rem, 10vw, 8rem); /* Responsive ultra large text */
font-weight: 900; /* Noto Sans SC Black */
line-height: 1;
}
.large-stat-text {
font-size: clamp(2.5rem, 6vw, 5rem); /* For large stats like subscriber count */
font-weight: 700;
}
.list-icon {
color: #FFB300; /* Highlight color for list icons */
margin-right: 0.5rem; /* Space between icon and text */
}
</style>
```
21 1612
Nano Banana Pro 这美感绝了
你是一位专家级UI UX演示设计师，请生成高保真、具有物理质感与动态光学的16比9演示文稿幻灯片。请根据视觉平衡美学，自动在封面、网格布局或数据可视化中选择一种最完美的构图。
全局视觉语言方面，风格要无缝融合拟态玻璃工艺、物理光线追踪与现代数字界面的虚实交织感。整体氛围需要呈现出极致的水润通透感与沉浸式空间感。光照模拟真实的光线折射与焦散效果，强调材质的厚度与透光性。配色方案摒弃传统的纯色填充，转而采用动态环境融合策略：浅色模式下基底为60%-70%透明度的磨砂白，深色模式下为35%透明度的灰黑，利用实时高斯模糊（Blur）吸收并柔化环境主色，形成无边框的自然晕染。
关于画面内容模块，请智能整合以下元素：
1. 排版引擎采用Bento便当盒网格系统，但容器材质升级为高级液态玻璃面板。面板具有极高的背景模糊度（Blur 24px），边缘带有微妙的流体光泽描边。内部文字处理必须模拟蚀刻玻璃工艺，通过精细的微阴影与高光边缘（Text Shadow）展现立体雕刻感，而非平面的印刷文字。
2. 核心高亮与修饰采用动态光学特性。关键文本或数据的高亮不使用静态颜色，而是模拟镜面高光随角度流动的物理效果，或强光折射产生的彩虹光谱（如CSS中流动的线性渐变）。这些高光仿佛具有生命，在玻璃表面缓缓流淌。
3. 插入具有高度折射率的3D物体作为视觉锚点。外观材质应像光学棱镜、透明水滴或软体玻璃。形状圆润、流动，能够扭曲背后的背景图像（透镜畸变），并反射出环境中的光谱色彩，强化液态与流动的物理反馈。
要处理的内容：用最适合的方式排布这首词：
点绛唇·与卿软语
灯昏欲烬，
被窝里只剩你呼吸。
指尖偷系，
一缕青丝绕我腕里。
心跳贴心跳，
像糖化在齿比。
卿若不信，
我便化作胚，
蜷进你最软最暖处，
再也不离。
你是一位专家级UI UX演示设计师，请生成高保真、具有物理质感与动态光学的16比9演示文稿幻灯片。请根据视觉平衡美学，自动在封面、网格布局或数据可视化中选择一种最完美的构图。
全局视觉语言方面，风格要无缝融合拟态玻璃工艺、物理光线追踪与现代数字界面的虚实交织感。整体氛围需要呈现出极致的水润通透感与沉浸式空间感。光照模拟真实的光线折射与焦散效果，强调材质的厚度与透光性。配色方案摒弃传统的纯色填充，转而采用动态环境融合策略：浅色模式下基底为60%-70%透明度的磨砂白，深色模式下为35%透明度的灰黑，利用实时高斯模糊（Blur）吸收并柔化环境主色，形成无边框的自然晕染。
关于画面内容模块，请智能整合以下元素：
1. 排版引擎采用Bento便当盒网格系统，但容器材质升级为高级液态玻璃面板。面板具有极高的背景模糊度（Blur 24px），边缘带有微妙的流体光泽描边。内部文字处理必须模拟蚀刻玻璃工艺，通过精细的微阴影与高光边缘（Text Shadow）展现立体雕刻感，而非平面的印刷文字。
2. 核心高亮与修饰采用动态光学特性。关键文本或数据的高亮不使用静态颜色，而是模拟镜面高光随角度流动的物理效果，或强光折射产生的彩虹光谱（如CSS中流动的线性渐变）。这些高光仿佛具有生命，在玻璃表面缓缓流淌。
3. 插入具有高度折射率的3D物体作为视觉锚点。外观材质应像光学棱镜、透明水滴或软体玻璃。形状圆润、流动，能够扭曲背后的背景图像（透镜畸变），并反射出环境中的光谱色彩，强化液态与流动的物理反馈。
要处理的内容：用最适合的方式排布这首词：
点绛唇·与卿软语
灯昏欲烬，
被窝里只剩你呼吸。
指尖偷系，
一缕青丝绕我腕里。
心跳贴心跳，
像糖化在齿比。
卿若不信，
我便化作胚，
蜷进你最软最暖处，
再也不离。
1 00
