b5447a9903
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.
333 lines
10 KiB
Markdown
333 lines
10 KiB
Markdown
完整 HTML（已内联企业级 CSS，可直接保存为 index.html 使用）
|
||
|
||
```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 -->
|
||
<style>
|
||
/* 0. 设计令牌 */
|
||
:root {
|
||
--clr-primary: #0052cc;
|
||
--clr-primary-dark: #003d99;
|
||
--clr-accent: #f5f7fa;
|
||
--clr-text: #172b4d;
|
||
--clr-muted: #5e6c84;
|
||
--clr-border: #dfe1e6;
|
||
--radius: 6px;
|
||
--max-width: 1200px;
|
||
--gap: 1.5rem;
|
||
--font-base: 16px;
|
||
--transition: .25s ease-in-out;
|
||
}
|
||
|
||
/* 1. 全局重置与排版 */
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||
font-size: var(--font-base);
|
||
line-height: 1.6;
|
||
color: var(--clr-text);
|
||
background: #fff;
|
||
}
|
||
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.3; font-weight: 600; }
|
||
h1 { font-size: 2rem; }
|
||
h2 { font-size: 1.5rem; }
|
||
h3 { font-size: 1.25rem; }
|
||
p { margin: 0 0 1em; }
|
||
a { color: var(--clr-primary); text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
img { max-width: 100%; display: block; }
|
||
|
||
/* 2. 布局骨架 */
|
||
header, main, aside, footer {
|
||
padding: 2rem 1rem;
|
||
}
|
||
.inner {
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
}
|
||
header .inner {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
header hgroup { flex: 1 1 300px; }
|
||
nav ul {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 1.5rem;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
nav a {
|
||
font-weight: 500;
|
||
padding: .5rem 0;
|
||
border-bottom: 2px solid transparent;
|
||
transition: border-color var(--transition);
|
||
}
|
||
nav a:hover { border-color: var(--clr-primary); text-decoration: none; }
|
||
|
||
/* 3. 区块样式 */
|
||
section {
|
||
margin-bottom: 3rem;
|
||
}
|
||
#features ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: var(--gap);
|
||
}
|
||
#features li {
|
||
background: var(--clr-accent);
|
||
border: 1px solid var(--clr-border);
|
||
border-radius: var(--radius);
|
||
padding: 1.5rem;
|
||
}
|
||
figure {
|
||
margin: 0 0 1.5rem;
|
||
border: 1px solid var(--clr-border);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
}
|
||
figcaption {
|
||
padding: .75rem 1rem;
|
||
background: var(--clr-accent);
|
||
font-size: .875rem;
|
||
color: var(--clr-muted);
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 1rem;
|
||
}
|
||
th, td {
|
||
padding: .75rem 1rem;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--clr-border);
|
||
}
|
||
th { background: var(--clr-accent); font-weight: 600; }
|
||
caption {
|
||
text-align: left;
|
||
font-weight: 600;
|
||
margin-bottom: .5rem;
|
||
}
|
||
|
||
/* 4. 表单 */
|
||
form {
|
||
max-width: 600px;
|
||
}
|
||
fieldset {
|
||
border: 1px solid var(--clr-border);
|
||
border-radius: var(--radius);
|
||
padding: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
legend {
|
||
font-weight: 600;
|
||
padding: 0 .5rem;
|
||
}
|
||
label {
|
||
display: block;
|
||
margin-bottom: 1rem;
|
||
font-weight: 500;
|
||
}
|
||
input, textarea {
|
||
width: 100%;
|
||
padding: .5rem .75rem;
|
||
border: 1px solid var(--clr-border);
|
||
border-radius: var(--radius);
|
||
font: inherit;
|
||
transition: border-color var(--transition);
|
||
}
|
||
input:focus, textarea:focus {
|
||
outline: none;
|
||
border-color: var(--clr-primary);
|
||
}
|
||
button {
|
||
background: var(--clr-primary);
|
||
color: #fff;
|
||
border: none;
|
||
padding: .75rem 1.75rem;
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
border-radius: var(--radius);
|
||
cursor: pointer;
|
||
transition: background var(--transition);
|
||
}
|
||
button:hover { background: var(--clr-primary-dark); }
|
||
|
||
/* 5. 侧边栏 & 页脚 */
|
||
aside {
|
||
background: var(--clr-accent);
|
||
border-top: 1px solid var(--clr-border);
|
||
}
|
||
footer {
|
||
text-align: center;
|
||
font-size: .875rem;
|
||
color: var(--clr-muted);
|
||
border-top: 1px solid var(--clr-border);
|
||
}
|
||
|
||
/* 6. 响应式：桌面左右 | 手机上下 */
|
||
@media (min-width: 1024px) {
|
||
body {
|
||
display: grid;
|
||
grid-template-columns: 1fr 320px;
|
||
grid-template-rows: auto 1fr auto;
|
||
grid-template-areas:
|
||
"hdr hdr"
|
||
"main side"
|
||
"ftr ftr";
|
||
}
|
||
header { grid-area: hdr; }
|
||
main { grid-area: main; padding-right: 2rem; }
|
||
aside { grid-area: side; padding-left: 2rem; border-top: none; border-left: 1px solid var(--clr-border); }
|
||
footer { grid-area: ftr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="inner">
|
||
<hgroup>
|
||
<h1>产品演示 — AI 美化基线</h1>
|
||
<p>这是一个用于不同生成式 AI 美化对比的基础 HTML 页面。页面不含任何样式或脚本。</p>
|
||
</hgroup>
|
||
<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>
|
||
</div>
|
||
</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">
|
||
<div class="inner">
|
||
<h2 id="note-title">测试说明</h2>
|
||
<p>你可以将此 HTML 原样提交给不同 AI，请求它们“美化”或“生成响应式 CSS 和设计说明”。在比较时请确保所有 AI 使用相同的任务描述与约束。</p>
|
||
</div>
|
||
</aside>
|
||
|
||
<footer>
|
||
<div class="inner">
|
||
<p>© 2025 示例组织。用于 AI 美化对比测试。</p>
|
||
<p><a href="#top">返回顶部</a></p>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
---
|
||
|
||
三条设计原则（美化思路）
|
||
|
||
1. 信息层级优先：通过字号、字重、留白与配色，把“标题-副标题-正文-辅助”逐层拉开，让用户一眼抓住核心内容。
|
||
2. 稳定中性配色：以深蓝为主色、浅灰作背景、低饱和文字降低视觉噪音，传递企业可靠、专业的品牌气质。
|
||
3. 响应式弹性布局：同一套 HTML，桌面自动左右分栏，移动端上下堆叠；所有元素使用相对单位与弹性容器，确保任意视口下都有舒适阅读宽度与触控尺寸。
|
||
|
||
---
|
||
|
||
五种可选色彩方案（仅调色板，无需全部实现）
|
||
|
||
1. 深海蓝 – #003366 / 科技蓝 – #0052cc / 浅雾灰 – #f5f7fa / 文字深青 – #172b4d / 点缀薄荷 – #36b37e
|
||
2. 石板灰 – #2d3748 / 亮钴蓝 – #3182ce / 极浅灰 – #f7fafc / 深石墨 – #1a202c / 点缀橙 – #ed8936
|
||
3. 藏青 – #1e3a8a / 天青 – #3b82f6 / 冷灰 – #e5e7eb / 墨黑 – #111827 / 点缀黄 – #f59e0b
|
||
4. 深岩蓝 – #0f172a / 澄澈蓝 – #2563eb / 雾银 – #f1f5f9 / 炭灰 – #1f2937 / 点缀青 – #10b981
|
||
5. 午夜蓝 – #001f3f / 亮靛 – #0074d9 / 烟灰 – #f6f8fa / 深靛 – #0b1426 / 点缀洋红 – #e91e63
|