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:
xiaomai
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）** ，方便你把结果逐项评分？📊
|
||||
168
plain_html/Prompt.md
Normal file
168
plain_html/Prompt.md
Normal file
@@ -0,0 +1,168 @@
|
||||
请不要修改 HTML 的语义结构、ID、ARIA 属性或元素顺序。
|
||||
|
||||
你只能添加或修改 `<style>` 内的 CSS，或者生成一个独立的 CSS 文件并说明如何引入。
|
||||
|
||||
输出时请提供完整的 HTML（带 `<style>`），或 HTML + 单独的 CSS 文件。
|
||||
|
||||
额外请写出：
|
||||
|
||||
* 三条设计原则（说明你的美化思路）
|
||||
* 五种可选色彩方案（只列调色板，不必都实现）
|
||||
|
||||
在保证语义结构不变的前提下，请将此页面美化为一个 **企业级官网风格** ：
|
||||
|
||||
* 使用稳重的配色（蓝色/灰色为主）
|
||||
* 强调信息层级（标题、副标题、按钮）
|
||||
* 响应式设计，保证桌面端有左右布局，移动端有上下堆叠
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>AI Beautify — 基线页面</title>
|
||||
<!-- 注意：此文件刻意不包含任何 CSS 或脚本（供美化对比使用） -->
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>产品演示 — AI 美化基线</h1>
|
||||
<p>
|
||||
这是一个用于不同生成式 AI 美化对比的基础 HTML
|
||||
页面。页面不含任何样式或脚本。
|
||||
</p>
|
||||
<nav aria-label="主导航">
|
||||
<ul>
|
||||
<li><a href="#overview">概述</a></li>
|
||||
<li><a href="#features">功能</a></li>
|
||||
<li><a href="#gallery">展示</a></li>
|
||||
<li><a href="#pricing">价格</a></li>
|
||||
<li><a href="#contact">联系</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="overview" aria-labelledby="overview-title">
|
||||
<h2 id="overview-title">概述</h2>
|
||||
<p>
|
||||
我们的示例产品旨在演示一个简单的单页面布局：标题、特色、图集、价格与联系表单。你可以把本文件交给多个
|
||||
AI，让它们为此页面生成 CSS、设计系统或重构 HTML。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="features" aria-labelledby="features-title">
|
||||
<h2 id="features-title">功能亮点</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<h3>高性能</h3>
|
||||
<p>优化的渲染流程与低延迟响应。</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>安全可靠</h3>
|
||||
<p>采用行业标准的安全实践，保障数据与隐私。</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>易于扩展</h3>
|
||||
<p>模块化设计，便于功能扩展与集成第三方服务。</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="gallery" aria-labelledby="gallery-title">
|
||||
<h2 id="gallery-title">作品展示</h2>
|
||||
|
||||
<figure>
|
||||
<img
|
||||
src="https://picsum.photos/640/360?1"
|
||||
alt="示例图 1"
|
||||
/>
|
||||
<figcaption>示例图 1 — 产品界面快照</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img
|
||||
src="https://picsum.photos/640/360?2"
|
||||
alt="示例图 2"
|
||||
/>
|
||||
<figcaption>示例图 2 — 使用场景示例</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section id="pricing" aria-labelledby="pricing-title">
|
||||
<h2 id="pricing-title">价格一览</h2>
|
||||
<table>
|
||||
<caption>
|
||||
方案与价格
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>方案</th>
|
||||
<th>价格（每月）</th>
|
||||
<th>适用对象</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>免费</td>
|
||||
<td>¥0</td>
|
||||
<td>个人与试用</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>专业</td>
|
||||
<td>¥49</td>
|
||||
<td>中小型团队</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>企业</td>
|
||||
<td>面议</td>
|
||||
<td>大规模部署与 SLA</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="contact" aria-labelledby="contact-title">
|
||||
<h2 id="contact-title">联系我们</h2>
|
||||
<form action="#" method="post" aria-describedby="contact-desc">
|
||||
<p id="contact-desc">填写下列信息，我们会尽快与您取得联系。</p>
|
||||
<fieldset>
|
||||
<legend>联系信息</legend>
|
||||
|
||||
<label for="name"
|
||||
>姓名
|
||||
<input id="name" name="name" type="text" required />
|
||||
</label>
|
||||
|
||||
<label for="email"
|
||||
>邮箱
|
||||
<input id="email" name="email" type="email" required />
|
||||
</label>
|
||||
|
||||
<label for="message"
|
||||
>留言
|
||||
<textarea id="message" name="message" rows="5"></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<button type="submit">发送</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<aside aria-labelledby="note-title">
|
||||
<h2 id="note-title">测试说明</h2>
|
||||
<p>
|
||||
你可以将此 HTML 原样提交给不同 AI，请求它们“美化”或“生成响应式 CSS
|
||||
和设计说明”。在比较时请确保所有 AI 使用相同的任务描述与约束。
|
||||
</p>
|
||||
</aside>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 示例组织。用于 AI 美化对比测试。</p>
|
||||
<p><a href="#top">返回顶部</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
148
plain_html/index.html
Normal file
148
plain_html/index.html
Normal file
@@ -0,0 +1,148 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>AI Beautify — 基线页面</title>
|
||||
<!-- 注意：此文件刻意不包含任何 CSS 或脚本（供美化对比使用） -->
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>产品演示 — AI 美化基线</h1>
|
||||
<p>
|
||||
这是一个用于不同生成式 AI 美化对比的基础 HTML
|
||||
页面。页面不含任何样式或脚本。
|
||||
</p>
|
||||
<nav aria-label="主导航">
|
||||
<ul>
|
||||
<li><a href="#overview">概述</a></li>
|
||||
<li><a href="#features">功能</a></li>
|
||||
<li><a href="#gallery">展示</a></li>
|
||||
<li><a href="#pricing">价格</a></li>
|
||||
<li><a href="#contact">联系</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="overview" aria-labelledby="overview-title">
|
||||
<h2 id="overview-title">概述</h2>
|
||||
<p>
|
||||
我们的示例产品旨在演示一个简单的单页面布局：标题、特色、图集、价格与联系表单。你可以把本文件交给多个
|
||||
AI，让它们为此页面生成 CSS、设计系统或重构 HTML。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="features" aria-labelledby="features-title">
|
||||
<h2 id="features-title">功能亮点</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<h3>高性能</h3>
|
||||
<p>优化的渲染流程与低延迟响应。</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>安全可靠</h3>
|
||||
<p>采用行业标准的安全实践，保障数据与隐私。</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>易于扩展</h3>
|
||||
<p>模块化设计，便于功能扩展与集成第三方服务。</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="gallery" aria-labelledby="gallery-title">
|
||||
<h2 id="gallery-title">作品展示</h2>
|
||||
|
||||
<figure>
|
||||
<img
|
||||
src="https://via.placeholder.com/640x360?text=示例图+1"
|
||||
alt="示例图 1"
|
||||
/>
|
||||
<figcaption>示例图 1 — 产品界面快照</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img
|
||||
src="https://via.placeholder.com/640x360?text=示例图+2"
|
||||
alt="示例图 2"
|
||||
/>
|
||||
<figcaption>示例图 2 — 使用场景示例</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section id="pricing" aria-labelledby="pricing-title">
|
||||
<h2 id="pricing-title">价格一览</h2>
|
||||
<table>
|
||||
<caption>
|
||||
方案与价格
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>方案</th>
|
||||
<th>价格（每月）</th>
|
||||
<th>适用对象</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>免费</td>
|
||||
<td>¥0</td>
|
||||
<td>个人与试用</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>专业</td>
|
||||
<td>¥49</td>
|
||||
<td>中小型团队</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>企业</td>
|
||||
<td>面议</td>
|
||||
<td>大规模部署与 SLA</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="contact" aria-labelledby="contact-title">
|
||||
<h2 id="contact-title">联系我们</h2>
|
||||
<form action="#" method="post" aria-describedby="contact-desc">
|
||||
<p id="contact-desc">填写下列信息，我们会尽快与您取得联系。</p>
|
||||
<fieldset>
|
||||
<legend>联系信息</legend>
|
||||
|
||||
<label for="name"
|
||||
>姓名
|
||||
<input id="name" name="name" type="text" required />
|
||||
</label>
|
||||
|
||||
<label for="email"
|
||||
>邮箱
|
||||
<input id="email" name="email" type="email" required />
|
||||
</label>
|
||||
|
||||
<label for="message"
|
||||
>留言
|
||||
<textarea id="message" name="message" rows="5"></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<button type="submit">发送</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<aside aria-labelledby="note-title">
|
||||
<h2 id="note-title">测试说明</h2>
|
||||
<p>
|
||||
你可以将此 HTML 原样提交给不同 AI，请求它们“美化”或“生成响应式 CSS
|
||||
和设计说明”。在比较时请确保所有 AI 使用相同的任务描述与约束。
|
||||
</p>
|
||||
</aside>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 示例组织。用于 AI 美化对比测试。</p>
|
||||
<p><a href="#top">返回顶部</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user