简单对比了一下gpt-5.5和dsv4-pro审美
- 内容介绍
- 文章标签
- 相关推荐
叠甲，纯业余，纯兴趣测试
提示词
image388×794 88.2 KB
提示词由gemini-3.1-pro生成
你是一个顶尖的前端工程师与UI/UX设计师，深谙Google的Material You (Material Design 3) 设计规范。请帮我编写一个单文件HTML网页。
1. 主题与核心内容
主题：植树节（Arbor Day）—— 保护森林。
结构：首屏展示居中的引人入胜的标题（如“倾听地球的呼吸”）与副标题；下方放置一个醒目的Material风格“行动呼吁”按钮（例如文字为“探索绿色使命”）；底部预留一个文案展示卡片区域（初始状态隐藏）。
核心文案（请直接硬编码到隐藏的文案卡片区域中）：
“每一片森林，都是地球深呼吸的肺叶，是生命生生不息的绿色摇篮。在这颗湛蓝的星球上，树木以无声的坚韧，承载着数以万计的生灵，维系着伟大而脆弱的生态平衡。然而，当轰鸣的伐木声划破宁静，当地球的呼吸逐渐沉重，我们必须意识到：保护森林，不仅是守护飞禽走兽的家园，更是拯救人类自身的未来。种下一棵树，就是埋下一粒希望的种子，是我们对生态系统的郑重承诺。让我们敬畏自然，守护这片苍翠，让每一次呼吸都充满生机，让子孙后代依然能听见风穿过树冠的绿色低语。”
2. 视觉与交互规范 (Material You)
色彩系统（精准的莫奈取色/动态色彩映射）：严格手写CSS变量（:root）实现以下MD3 Tonal Palette，覆盖全局样式：
--md-sys-color-surface: #FDFDF5 （极微弱绿意的米白底色，用于全局背景）
--md-sys-color-primary-container: #B3F092 （生机勃勃的浅亮绿，用于隐藏的文案卡片背景）
--md-sys-color-on-primary-container: #042100 （极深绿，用于文案卡片内的文字，确保WCAG极高对比度）
--md-sys-color-primary: #386A20 （深沉的森林绿，用于主操作按钮）
--md-sys-color-on-primary: #FFFFFF （纯白，用于主操作按钮文字）
排版与形状：
采用极致的MD3大圆角风格：卡片使用 border-radius: 24px，按钮使用 border-radius: 100px。
字体：必须使用系统无衬线字体栈 system-ui, -apple-system, Roboto, sans-serif，建立清晰的字号阶梯（Display巨集标题, Headline副标题, Body正文）。
高度/阴影（MD3 Elevation）：使用柔和的分层 box-shadow 给按钮和卡片增加物理Z轴层级感。
交互逻辑（原生 JS + CSS 动画）：
主按钮需添加 Hover 态反馈（如阴影加深或亮度微调）与点击缩放反馈（transform: scale(0.98)）。
点击首屏强调按钮后，隐藏的文案卡片必须通过平滑的CSS过渡动画（如 grid-template-rows 或 max-height 配合 opacity 与 translateY 位移）向下优雅展开并渐显。
3. 技术约束
仅使用原生 HTML, CSS, JavaScript。绝对禁止引入任何外部CSS组件库（如Tailwind, Bootstrap等）或外部JS框架。
所有的样式（<style>）和交互逻辑（<script>）必须全部写在这一个 .html 文件内。
布局强制使用 Flexbox 或 CSS Grid，要求完美的响应式设计，确保在移动端（手机）和桌面PC端都必须绝对居中、留白合理、视觉现代化。
用的植树节主题
gpt-5.5
Screenshot From 2026-04-24 18-08-201920×1038 175 KB
Screenshot From 2026-04-24 18-08-321920×1038 245 KB
deepseek-v4-pro
Screenshot From 2026-04-24 18-12-351920×1038 115 KB
Screenshot From 2026-04-24 18-12-451920×1038 200 KB
开销
- GPT 5.5 (0.45 USD按照参考中转站0.35x的倍率花费0.1575人民币左右)
Screenshot From 2026-04-24 18-07-34963×307 36.2 KB - Deepseek-V4-Pro (1.59 - 0.33 = 1.26)
Screenshot From 2026-04-24 18-18-551805×968 56 KB
差距仍然存在，还需努力
网友解答：--【壹】--：
说实话我感觉deepseek的风格看着没有这么人机 其他ai做的页面太有ai味了
--【贰】--：
你还别说，我比较喜欢deepseek这种风格，颜色比较收敛，折叠效果也比gpt的文字变化感觉要好
--【叁】--：
有一说一在佬友你这个测试的题材下，我觉得deepseek的更好，但是好像deepseek都是这个风格
--【肆】--： Shus:
你是一个顶尖的前端工程师与UI/UX设计师，深谙Google的Material You (Material Design 3) 设计规范。请帮我编写一个单文件HTML网页。 1. 主题与核心内容 主题：植树节（Arbor Day）—— 保护森林。 结构：首屏展示居中的引人入胜的标题（如“倾听地球的呼吸”）与副标题；下方放置一个醒目的Material风格“行动呼吁”按钮（例如文字为“探索绿色使命”）；底部预留一个文案展示卡片区域（初始状态隐藏）。 核心文案（请直接硬编码到隐藏的文案卡片区域中）： “每一片森林，都是地球深呼吸的肺叶，是生命生生不息的绿色摇篮。在这颗湛蓝的星球上，树木以无声的坚韧，承载着数以万计的生灵，维系着伟大而脆弱的生态平衡。然而，当轰鸣的伐木声划破宁静，当地球的呼吸逐渐沉重，我们必须意识到：保护森林，不仅是守护飞禽走兽的家园，更是拯救人类自身的未来。种下一棵树，就是埋下一粒希望的种子，是我们对生态系统的郑重承诺。让我们敬畏自然，守护这片苍翠，让每一次呼吸都充满生机，让子孙后代依然能听见风穿过树冠的绿色低语。” 2. 视觉与交互规范 (Material You) 色彩系统（精准的莫奈取色/动态色彩映射）：严格手写CSS变量（:root）实现以下MD3 Tonal Palette，覆盖全局样式： --md-sys-color-surface: #FDFDF5 （极微弱绿意的米白底色，用于全局背景） --md-sys-color-primary-container: #B3F092 （生机勃勃的浅亮绿，用于隐藏的文案卡片背景） --md-sys-color-on-primary-container: #042100 （极深绿，用于文案卡片内的文字，确保WCAG极高对比度） --md-sys-color-primary: #386A20 （深沉的森林绿，用于主操作按钮） --md-sys-color-on-primary: #FFFFFF （纯白，用于主操作按钮文字） 排版与形状： 采用极致的MD3大圆角风格：卡片使用 border-radius: 24px，按钮使用 border-radius: 100px。 字体：必须使用系统无衬线字体栈 system-ui, -apple-system, Roboto, sans-serif，建立清晰的字号阶梯（Display巨集标题, Headline副标题, Body正文）。 高度/阴影（MD3 Elevation）：使用柔和的分层 box-shadow 给按钮和卡片增加物理Z轴层级感。 交互逻辑（原生 JS + CSS 动画）： 主按钮需添加 Hover 态反馈（如阴影加深或亮度微调）与点击缩放反馈（transform: scale(0.98)）。 点击首屏强调按钮后，隐藏的文案卡片必须通过平滑的CSS过渡动画（如 grid-template-rows 或 max-height 配合 opacity 与 translateY 位移）向下优雅展开并渐显。 3. 技术约束 仅使用原生 HTML, CSS, JavaScript。绝对禁止引入任何外部CSS组件库（如Tailwind, Bootstrap等）或外部JS框架。 所有的样式（<style>）和交互逻辑（<script>）必须全部写在这一个 .html 文件内。 布局强制使用 Flexbox 或 CSS Grid，要求完美的响应式设计，确保在移动端（手机）和桌面PC端都必须绝对居中、留白合理、视觉现代化。
image985×599 24.1 KB
这提示词的问题吧,一样好丑
叠甲，纯业余，纯兴趣测试
提示词
image388×794 88.2 KB
提示词由gemini-3.1-pro生成
你是一个顶尖的前端工程师与UI/UX设计师，深谙Google的Material You (Material Design 3) 设计规范。请帮我编写一个单文件HTML网页。
1. 主题与核心内容
主题：植树节（Arbor Day）—— 保护森林。
结构：首屏展示居中的引人入胜的标题（如“倾听地球的呼吸”）与副标题；下方放置一个醒目的Material风格“行动呼吁”按钮（例如文字为“探索绿色使命”）；底部预留一个文案展示卡片区域（初始状态隐藏）。
核心文案（请直接硬编码到隐藏的文案卡片区域中）：
“每一片森林，都是地球深呼吸的肺叶，是生命生生不息的绿色摇篮。在这颗湛蓝的星球上，树木以无声的坚韧，承载着数以万计的生灵，维系着伟大而脆弱的生态平衡。然而，当轰鸣的伐木声划破宁静，当地球的呼吸逐渐沉重，我们必须意识到：保护森林，不仅是守护飞禽走兽的家园，更是拯救人类自身的未来。种下一棵树，就是埋下一粒希望的种子，是我们对生态系统的郑重承诺。让我们敬畏自然，守护这片苍翠，让每一次呼吸都充满生机，让子孙后代依然能听见风穿过树冠的绿色低语。”
2. 视觉与交互规范 (Material You)
色彩系统（精准的莫奈取色/动态色彩映射）：严格手写CSS变量（:root）实现以下MD3 Tonal Palette，覆盖全局样式：
--md-sys-color-surface: #FDFDF5 （极微弱绿意的米白底色，用于全局背景）
--md-sys-color-primary-container: #B3F092 （生机勃勃的浅亮绿，用于隐藏的文案卡片背景）
--md-sys-color-on-primary-container: #042100 （极深绿，用于文案卡片内的文字，确保WCAG极高对比度）
--md-sys-color-primary: #386A20 （深沉的森林绿，用于主操作按钮）
--md-sys-color-on-primary: #FFFFFF （纯白，用于主操作按钮文字）
排版与形状：
采用极致的MD3大圆角风格：卡片使用 border-radius: 24px，按钮使用 border-radius: 100px。
字体：必须使用系统无衬线字体栈 system-ui, -apple-system, Roboto, sans-serif，建立清晰的字号阶梯（Display巨集标题, Headline副标题, Body正文）。
高度/阴影（MD3 Elevation）：使用柔和的分层 box-shadow 给按钮和卡片增加物理Z轴层级感。
交互逻辑（原生 JS + CSS 动画）：
主按钮需添加 Hover 态反馈（如阴影加深或亮度微调）与点击缩放反馈（transform: scale(0.98)）。
点击首屏强调按钮后，隐藏的文案卡片必须通过平滑的CSS过渡动画（如 grid-template-rows 或 max-height 配合 opacity 与 translateY 位移）向下优雅展开并渐显。
3. 技术约束
仅使用原生 HTML, CSS, JavaScript。绝对禁止引入任何外部CSS组件库（如Tailwind, Bootstrap等）或外部JS框架。
所有的样式（<style>）和交互逻辑（<script>）必须全部写在这一个 .html 文件内。
布局强制使用 Flexbox 或 CSS Grid，要求完美的响应式设计，确保在移动端（手机）和桌面PC端都必须绝对居中、留白合理、视觉现代化。
用的植树节主题
gpt-5.5
Screenshot From 2026-04-24 18-08-201920×1038 175 KB
Screenshot From 2026-04-24 18-08-321920×1038 245 KB
deepseek-v4-pro
Screenshot From 2026-04-24 18-12-351920×1038 115 KB
Screenshot From 2026-04-24 18-12-451920×1038 200 KB
开销
- GPT 5.5 (0.45 USD按照参考中转站0.35x的倍率花费0.1575人民币左右)
Screenshot From 2026-04-24 18-07-34963×307 36.2 KB - Deepseek-V4-Pro (1.59 - 0.33 = 1.26)
Screenshot From 2026-04-24 18-18-551805×968 56 KB
差距仍然存在，还需努力
网友解答：--【壹】--：
说实话我感觉deepseek的风格看着没有这么人机 其他ai做的页面太有ai味了
--【贰】--：
你还别说，我比较喜欢deepseek这种风格，颜色比较收敛，折叠效果也比gpt的文字变化感觉要好
--【叁】--：
有一说一在佬友你这个测试的题材下，我觉得deepseek的更好，但是好像deepseek都是这个风格
--【肆】--： Shus:
你是一个顶尖的前端工程师与UI/UX设计师，深谙Google的Material You (Material Design 3) 设计规范。请帮我编写一个单文件HTML网页。 1. 主题与核心内容 主题：植树节（Arbor Day）—— 保护森林。 结构：首屏展示居中的引人入胜的标题（如“倾听地球的呼吸”）与副标题；下方放置一个醒目的Material风格“行动呼吁”按钮（例如文字为“探索绿色使命”）；底部预留一个文案展示卡片区域（初始状态隐藏）。 核心文案（请直接硬编码到隐藏的文案卡片区域中）： “每一片森林，都是地球深呼吸的肺叶，是生命生生不息的绿色摇篮。在这颗湛蓝的星球上，树木以无声的坚韧，承载着数以万计的生灵，维系着伟大而脆弱的生态平衡。然而，当轰鸣的伐木声划破宁静，当地球的呼吸逐渐沉重，我们必须意识到：保护森林，不仅是守护飞禽走兽的家园，更是拯救人类自身的未来。种下一棵树，就是埋下一粒希望的种子，是我们对生态系统的郑重承诺。让我们敬畏自然，守护这片苍翠，让每一次呼吸都充满生机，让子孙后代依然能听见风穿过树冠的绿色低语。” 2. 视觉与交互规范 (Material You) 色彩系统（精准的莫奈取色/动态色彩映射）：严格手写CSS变量（:root）实现以下MD3 Tonal Palette，覆盖全局样式： --md-sys-color-surface: #FDFDF5 （极微弱绿意的米白底色，用于全局背景） --md-sys-color-primary-container: #B3F092 （生机勃勃的浅亮绿，用于隐藏的文案卡片背景） --md-sys-color-on-primary-container: #042100 （极深绿，用于文案卡片内的文字，确保WCAG极高对比度） --md-sys-color-primary: #386A20 （深沉的森林绿，用于主操作按钮） --md-sys-color-on-primary: #FFFFFF （纯白，用于主操作按钮文字） 排版与形状： 采用极致的MD3大圆角风格：卡片使用 border-radius: 24px，按钮使用 border-radius: 100px。 字体：必须使用系统无衬线字体栈 system-ui, -apple-system, Roboto, sans-serif，建立清晰的字号阶梯（Display巨集标题, Headline副标题, Body正文）。 高度/阴影（MD3 Elevation）：使用柔和的分层 box-shadow 给按钮和卡片增加物理Z轴层级感。 交互逻辑（原生 JS + CSS 动画）： 主按钮需添加 Hover 态反馈（如阴影加深或亮度微调）与点击缩放反馈（transform: scale(0.98)）。 点击首屏强调按钮后，隐藏的文案卡片必须通过平滑的CSS过渡动画（如 grid-template-rows 或 max-height 配合 opacity 与 translateY 位移）向下优雅展开并渐显。 3. 技术约束 仅使用原生 HTML, CSS, JavaScript。绝对禁止引入任何外部CSS组件库（如Tailwind, Bootstrap等）或外部JS框架。 所有的样式（<style>）和交互逻辑（<script>）必须全部写在这一个 .html 文件内。 布局强制使用 Flexbox 或 CSS Grid，要求完美的响应式设计，确保在移动端（手机）和桌面PC端都必须绝对居中、留白合理、视觉现代化。
image985×599 24.1 KB
这提示词的问题吧,一样好丑