side_projects/ai-beautify
1
0
Fork 0
Code Pull Requests Activity

feat(ai-test): add baseline and results for AI beautification test

Browse Source 
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
2025-09-26 14:00:03 +08:00
parent 310a5da94f
commit b5447a9903
15 changed files with 5154 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

322
chatgpt/Professional/index.html Normal file
View File

@@ -0,0 +1,322 @@
<!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>
<style>
/* ===== Reset & 基础样式 ===== */
body {
margin: 0;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #374151;
background: #f9fafb;
}
h1,
h2,
h3 {
margin: 0.5em 0;
font-weight: 600;
}
h1 {
font-size: 2rem;
color: #1e3a8a;
}
h2 {
font-size: 1.5rem;
color: #2563eb;
}
h3 {
font-size: 1.2rem;
color: #374151;
}
p {
margin: 0.5em 0;
}
ul {
padding-left: 1.2em;
}
/* ===== Header ===== */
header {
background: #1e3a8a;
color: #fff;
padding: 1.5rem;
}
header h1 {
color: #fff;
}
header p {
max-width: 600px;
}
nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 1rem 0 0;
padding: 0;
}
nav a {
color: #fff;
text-decoration: none;
font-weight: 500;
}
nav a:hover {
text-decoration: underline;
}
/* ===== Main Sections ===== */
main {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 2rem;
padding: 2rem;
}
section {
background: #fff;
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
figure {
margin: 1rem 0;
}
figure img {
max-width: 100%;
border-radius: 6px;
}
figcaption {
font-size: 0.9rem;
color: #6b7280;
}
/* ===== 表格 (Pricing) ===== */
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
th,
td {
border: 1px solid #e5e7eb;
padding: 0.75rem;
text-align: left;
}
thead {
background: #2563eb;
color: #fff;
}
tbody tr:nth-child(even) {
background: #f3f4f6;
}
/* ===== 表单 (Contact) ===== */
form {
display: flex;
flex-direction: column;
gap: 1rem;
}
label {
display: flex;
flex-direction: column;
font-weight: 500;
}
input,
textarea {
margin-top: 0.25rem;
padding: 0.5rem;
border: 1px solid #d1d5db;
border-radius: 4px;
}
button {
align-self: flex-start;
padding: 0.6rem 1.2rem;
background: #2563eb;
color: #fff;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
}
button:hover {
background: #1e40af;
}
/* ===== Aside ===== */
aside {
background: #f3f4f6;
padding: 1rem;
border-radius: 8px;
font-size: 0.95rem;
}
/* ===== Footer ===== */
footer {
background: #1e3a8a;
color: #fff;
text-align: center;
padding: 1.5rem;
margin-top: 2rem;
}
footer a {
color: #93c5fd;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
main {
grid-template-columns: 1fr;
}
nav ul {
flex-direction: column;
}
}
</style>
</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>

386
chatgpt/Professional/respond.md Normal file
View File

@@ -0,0 +1,386 @@
好的 👍 我会保持 **HTML 语义结构完全不变** ，仅通过 CSS 来实现企业级官网风格的美化。以下是结果：
---
## 🎨 三条设计原则
1. **稳重专业感** ：采用深蓝 + 中性灰为主色，保证页面在企业级场景下的正式氛围。
2. **清晰的信息层级** ：标题、副标题、正文和按钮分别使用不同字号、粗细和颜色层次，突出重点。
3. **响应式优先** ：桌面端采用左右分栏（内容与导航、图文对齐），移动端自动堆叠，保证在不同设备下都有舒适体验。
---
## 🌈 五种可选色彩方案（调色板）
1. **蓝灰稳重型** （推荐，用于演示）：
- 深蓝 `#1e3a8a`
- 中蓝 `#2563eb`
- 浅灰 `#f3f4f6`
- 深灰 `#374151`
- 白色 `#ffffff`
1. **黑金奢华型** ：
- 黑色 `#111827`
- 金色 `#d97706`
- 深灰 `#374151`
- 银灰 `#9ca3af`
- 白色 `#ffffff`
1. **绿灰科技型** ：
- 墨绿 `#065f46`
- 青绿 `#10b981`
- 浅灰 `#f9fafb`
- 石墨灰 `#4b5563`
- 白色 `#ffffff`
1. **红黑极简型** ：
- 深红 `#b91c1c`
- 亮红 `#ef4444`
- 黑色 `#111111`
- 灰色 `#6b7280`
- 白色 `#ffffff`
1. **紫蓝未来型** ：
- 深紫 `#4c1d95`
- 亮紫 `#8b5cf6`
- 蓝紫 `#3b82f6`
- 浅灰 `#e5e7eb`
- 白色 `#ffffff`
---
## 💻 完整 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>
<style>
/* ===== Reset & 基础样式 ===== */
body {
margin: 0;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #374151;
background: #f9fafb;
}
h1,
h2,
h3 {
margin: 0.5em 0;
font-weight: 600;
}
h1 {
font-size: 2rem;
color: #1e3a8a;
}
h2 {
font-size: 1.5rem;
color: #2563eb;
}
h3 {
font-size: 1.2rem;
color: #374151;
}
p {
margin: 0.5em 0;
}
ul {
padding-left: 1.2em;
}
/* ===== Header ===== */
header {
background: #1e3a8a;
color: #fff;
padding: 1.5rem;
}
header h1 {
color: #fff;
}
header p {
max-width: 600px;
}
nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 1rem 0 0;
padding: 0;
}
nav a {
color: #fff;
text-decoration: none;
font-weight: 500;
}
nav a:hover {
text-decoration: underline;
}
/* ===== Main Sections ===== */
main {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 2rem;
padding: 2rem;
}
section {
background: #fff;
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
figure {
margin: 1rem 0;
}
figure img {
max-width: 100%;
border-radius: 6px;
}
figcaption {
font-size: 0.9rem;
color: #6b7280;
}
/* ===== 表格 (Pricing) ===== */
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
th,
td {
border: 1px solid #e5e7eb;
padding: 0.75rem;
text-align: left;
}
thead {
background: #2563eb;
color: #fff;
}
tbody tr:nth-child(even) {
background: #f3f4f6;
}
/* ===== 表单 (Contact) ===== */
form {
display: flex;
flex-direction: column;
gap: 1rem;
}
label {
display: flex;
flex-direction: column;
font-weight: 500;
}
input,
textarea {
margin-top: 0.25rem;
padding: 0.5rem;
border: 1px solid #d1d5db;
border-radius: 4px;
}
button {
align-self: flex-start;
padding: 0.6rem 1.2rem;
background: #2563eb;
color: #fff;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
}
button:hover {
background: #1e40af;
}
/* ===== Aside ===== */
aside {
background: #f3f4f6;
padding: 1rem;
border-radius: 8px;
font-size: 0.95rem;
}
/* ===== Footer ===== */
footer {
background: #1e3a8a;
color: #fff;
text-align: center;
padding: 1.5rem;
margin-top: 2rem;
}
footer a {
color: #93c5fd;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
main {
grid-template-columns: 1fr;
}
nav ul {
flex-direction: column;
}
}
</style>
</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>
```
---
要不要我帮你把 **黑金奢华型** 或 **绿灰科技型** 配色版本也做出来，方便横向对比？