feat(ai-test): add baseline and results for AI beautification test
This commit introduces a new test suite for evaluating the HTML/CSS beautification capabilities of different AI models. The suite includes: - A baseline unstyled HTML file (`plain_html/index.html`) to be used as the common input. - Standardized prompts for various design aesthetics (e.g., Professional, Minimalist). - Initial results for the 'Professional' style from several models, including ChatGPT, Kimi, Gemini, Doubao, Deepseek, and Yuanbao.
This commit is contained in:
63
plain_html/4 designs.md
Normal file
63
plain_html/4 designs.md
Normal file
@@ -0,0 +1,63 @@
|
||||
👌太好了~那我给你准备几套 **统一的 Prompt 模板** ,你可以直接复制粘贴给各家 AI,看看它们的美化能力差异。每个 Prompt 保证 **同样的约束条件** (不改语义、不删结构),只是目标风格不同。🎨✨
|
||||
|
||||
---
|
||||
|
||||
## 🎯 基础约束(四个 Prompt 都相同部分)
|
||||
|
||||
> 请不要修改 HTML 的语义结构、ID、ARIA 属性或元素顺序。
|
||||
>
|
||||
> 你只能添加或修改 `<style>` 内的 CSS,或者生成一个独立的 CSS 文件并说明如何引入。
|
||||
>
|
||||
> 输出时请提供完整的 HTML(带 `<style>`),或 HTML + 单独的 CSS 文件。
|
||||
>
|
||||
> 额外请写出:
|
||||
>
|
||||
> * 三条设计原则(说明你的美化思路)
|
||||
> * 五种可选色彩方案(只列调色板,不必都实现)
|
||||
|
||||
---
|
||||
|
||||
## 🟢 Prompt 1 — 极简风 Minimalist
|
||||
|
||||
> 在保证语义结构不变的前提下,请将此页面美化为一个 **极简风** 网站:
|
||||
>
|
||||
> * 使用大量留白、细线条和轻量字体
|
||||
> * 强调排版和间距,而不是装饰
|
||||
> * 响应式适配移动端与桌面端
|
||||
|
||||
---
|
||||
|
||||
## 🔵 Prompt 2 — 企业级 Professional
|
||||
|
||||
> 在保证语义结构不变的前提下,请将此页面美化为一个 **企业级官网风格** :
|
||||
>
|
||||
> * 使用稳重的配色(蓝色/灰色为主)
|
||||
> * 强调信息层级(标题、副标题、按钮)
|
||||
> * 响应式设计,保证桌面端有左右布局,移动端有上下堆叠
|
||||
|
||||
---
|
||||
|
||||
## 🟡 Prompt 3 — 卡通 / 轻松 Cartoon
|
||||
|
||||
> 在保证语义结构不变的前提下,请将此页面美化为一个 **卡通风格** 网站:
|
||||
>
|
||||
> * 使用明亮活泼的配色(如黄色、橙色、粉色)
|
||||
> * 圆角、阴影、手绘感元素
|
||||
> * 字体更亲切,按钮更大更好点
|
||||
|
||||
---
|
||||
|
||||
## ⚫ Prompt 4 — 暗黑风 Dark Mode
|
||||
|
||||
> 在保证语义结构不变的前提下,请将此页面美化为一个 **暗黑风网站** :
|
||||
>
|
||||
> * 默认深色背景,浅色文字
|
||||
> * 高对比度按钮与链接
|
||||
> * 响应式下保持良好的阅读体验
|
||||
> * 可以额外提供一套浅色主题的切换方案(可选)
|
||||
|
||||
---
|
||||
|
||||
这样你就能用同一个 **基线 HTML** + **四个 Prompt** ,把结果交给 OpenAI、Anthropic、Google、Meta 或其他 AI,对比大家在 **排版/配色/层次/可维护性** 上的差异了。🔍✨
|
||||
|
||||
要不要我再帮你写一份 **对比打分表模板(Excel/Markdown)** ,方便你把结果逐项评分?📊
|
||||
Reference in New Issue
Block a user