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

468
gemini/Professional/index.html Normal file
View File

@@ -0,0 +1,468 @@
<!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>
/* --- 1. 全局与变量定义 --- */
:root {
--primary-color: #0d47a1; /* 深邃蓝，用于标题和重要元素 */
--accent-color: #1976d2; /* 活力蓝，用于链接和按钮 */
--text-color: #343a40; /* 深灰，用于标题 */
--secondary-text-color: #6c757d; /* 中性灰，用于段落 */
--background-color: #f8f9fa; /* 淡灰色背景 */
--card-background-color: #ffffff; /* 卡片背景 */
--border-color: #dee2e6; /* 边框颜色 */
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
--box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
--border-radius: 8px;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-family);
background-color: var(--background-color);
color: var(--secondary-text-color);
line-height: 1.6;
}
/* --- 2. 响应式布局 --- */
/* 桌面端：主区域与侧边栏左右布局 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-areas:
"header header"
"main aside"
"footer footer";
gap: 2rem;
}
header {
grid-area: header;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
/* 移动端：所有内容垂直堆叠 */
@media (max-width: 992px) {
.container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"aside"
"footer";
padding: 1rem;
}
}
/* --- 3. 排版与通用元素 --- */
h1,
h2,
h3 {
color: var(--text-color);
font-weight: 600;
line-height: 1.3;
}
h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
text-align: center;
}
h2 {
font-size: 2rem;
margin-top: 0;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--border-color);
}
h3 {
font-size: 1.25rem;
color: var(--primary-color);
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
a {
color: var(--accent-color);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--primary-color);
text-decoration: underline;
}
ul {
padding-left: 0;
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
border-radius: var(--border-radius);
}
/* --- 4. 模块样式 --- */
/* Header */
header {
text-align: center;
margin-bottom: 1rem;
}
header p {
font-size: 1.1rem;
max-width: 60ch;
margin: 0 auto 1.5rem auto;
}
header nav ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin: 0;
}
header nav a {
font-weight: 500;
padding: 0.5rem 0;
border-bottom: 2px solid transparent;
transition: border-color 0.2s ease, color 0.2s ease;
}
header nav a:hover {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
text-decoration: none;
}
/* 通用卡片样式 (应用于 Section, Aside) */
section,
aside {
background-color: var(--card-background-color);
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
@media (max-width: 768px) {
section,
aside {
padding: 1.5rem;
}
}
/* Features Section */
#features ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
#features li {
padding: 1.5rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#features li:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
#features h3 {
margin: 0 0 0.5rem 0;
}
#features p {
margin-bottom: 0;
}
/* Gallery Section */
#gallery {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
#gallery > div {
/* For wrapping figures if needed, though direct styling is fine */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
#gallery figure {
margin: 0;
text-align: center;
}
#gallery figcaption {
margin-top: 0.5rem;
font-style: italic;
font-size: 0.9rem;
color: var(--secondary-text-color);
}
/* Pricing Table */
#pricing table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
#pricing caption {
font-weight: bold;
caption-side: bottom;
text-align: center;
margin-top: 1rem;
font-size: 0.9rem;
color: var(--secondary-text-color);
}
#pricing th,
#pricing td {
padding: 1rem;
border-bottom: 1px solid var(--border-color);
}
#pricing thead {
background-color: var(--background-color);
}
#pricing th {
color: var(--text-color);
font-weight: 600;
}
#pricing tbody tr:hover {
background-color: #f1f3f5;
}
/* Contact Form */
#contact form {
display: grid;
gap: 1.5rem;
}
#contact fieldset {
border: none;
padding: 0;
margin: 0;
display: grid;
gap: 1rem;
}
#contact legend {
font-weight: bold;
font-size: 1.1rem;
margin-bottom: 0.5rem;
padding: 0;
}
#contact label {
display: flex;
flex-direction: column;
gap: 0.5rem;
font-weight: 500;
}
#contact input,
#contact textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: calc(var(--border-radius) / 2);
font-family: inherit;
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box; /* Ensures padding doesn't affect width */
}
#contact input:focus,
#contact textarea:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2);
}
#contact button {
background-color: var(--accent-color);
color: white;
border: none;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 600;
border-radius: calc(var(--border-radius) / 2);
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
justify-self: start; /* Align button to the left */
}
#contact button:hover {
background-color: var(--primary-color);
transform: translateY(-2px);
}
/* Aside */
aside {
background-color: #e9ecef; /* Slightly different background for distinction */
border-left: 4px solid var(--accent-color);
}
/* Footer */
footer {
text-align: center;
padding: 2rem;
margin-top: 1rem;
background-color: var(--text-color);
color: var(--background-color);
border-radius: var(--border-radius);
}
footer p {
margin: 0.5rem 0;
}
footer a {
color: #ffffff;
font-weight: 500;
}
footer a:hover {
color: #ced4da;
}
</style>
</head>
<body>
<div class="container">
<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>
<div>
<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>
</div>
</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>
</div>
</body>
</html>

475
gemini/Professional/respond.md Normal file
View File

@@ -0,0 +1,475 @@
好的，遵照您的要求，在不修改 HTML 语义结构、ID、ARIA 属性或元素顺序的前提下，我将为您美化这个页面，使其呈现出稳重、专业的企业级官网风格。
以下是我的设计思路、可选色彩方案，以及包含嵌入式 CSS 的完整 HTML 代码。
---
### 三条设计原则
1. **结构化布局与视觉引导 (Structured Layout & Visual Guidance)**
* **思路** : 为了营造企业官网的专业感，我采用了一种清晰的内容分区策略。在桌面端，通过一个 `2fr 1fr` 的网格布局，将主要内容 (`<main>`) 和次要说明 (`<aside>`) 左右区分，使用户视线聚焦于核心信息。大量的留白（`padding` 和 `margin`）用于分隔各个内容板块，避免信息拥挤，引导用户自然地从上到下阅读。
2. **清晰的信息层级与品牌一致性 (Clear Information Hierarchy & Brand Consistency)**
* **思路** : 通过精心设计的排版系统来强化信息层级。`<h1>` 作为最醒目的主标题，`<h2>` 作为清晰的章节标题，并配有下划线以示强调。正文、链接和按钮使用统一的字体和颜色规范。主色调（专业蓝）被策略性地应用在导航链接、按钮和标题上，不仅统一了视觉风格，也为用户提供了明确的交互指引，构筑了可靠的品牌感。
3. **响应式设计与现代感细节 (Responsive Design & Modern Details)**
* **思路** : 移动优先，优雅降级。页面在小于 992px 的设备上会自动切换为单栏垂直布局，确保在手机和平板上拥有最佳的阅读体验。同时，通过为卡片、按钮和图片添加 subtle 的圆角（`border-radius`）和阴影（`box-shadow`），并为可交互元素（如链接、按钮）设置平滑的过渡动画（`transition`），在细节处提升了页面的现代感和用户体验的细腻度。
---
### 五种可选色彩方案
这里提供五种不同的调色板，您可以根据品牌定位选择替换。
**1. 科技蓝 (Modern Tech Blue - 已实现)**
* `#0D47A1` (深邃蓝 - 主色)
* `#1976D2` (活力蓝 - 强调/链接)
* `#343A40` (深灰黑 - 标题文字)
* `#6C757D` (中性灰 - 正文/副标题)
* `#F8F9FA` (淡灰白 - 背景)
**2. 商务绿 (Trustworthy Green)**
* `#1B5E20` (森林绿)
* `#4CAF50` (活力绿)
* `#333333` (近黑色)
* `#555555` (石墨灰)
* `#F5F5F5` (极淡灰)
**3. 典雅紫 (Elegant Slate)**
* `#4A148C` (深茄紫)
* `#7B1FA2` (丁香紫)
* `#263238` (蓝灰)
* `#546E7A` (浅蓝灰)
* `#ECEFF1` (冰川白)
**4. 活力橙 (Vibrant & Professional Orange)**
* `#E65100` (深橙)
* `#FB8C00` (亮橙)
* `#37474F` (碳灰色)
* `#607D8B` (灰蓝色)
* `#FAFAFA` (雪花白)
**5. 暗色模式 (Modern Dark Mode)**
* `#121212` (背景黑)
* `#1E1E1E` (卡片黑)
* `#BB86FC` (淡紫色 - 强调)
* `#03DAC6` (青色 - 链接)
* `#E1E1E1` (白色文字)
---
### 完整代码 (HTML + 内联 CSS)
这是包含了所有美化样式的完整 HTML 文件。您只需复制全部代码并保存为一个 `.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>
<style>
/* --- 1. 全局与变量定义 --- */
:root {
--primary-color: #0d47a1; /* 深邃蓝，用于标题和重要元素 */
--accent-color: #1976d2; /* 活力蓝，用于链接和按钮 */
--text-color: #343a40; /* 深灰，用于标题 */
--secondary-text-color: #6c757d; /* 中性灰，用于段落 */
--background-color: #f8f9fa; /* 淡灰色背景 */
--card-background-color: #ffffff; /* 卡片背景 */
--border-color: #dee2e6; /* 边框颜色 */
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
--box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
--border-radius: 8px;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-family);
background-color: var(--background-color);
color: var(--secondary-text-color);
line-height: 1.6;
}
/* --- 2. 响应式布局 --- */
/* 桌面端：主区域与侧边栏左右布局 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-areas:
"header header"
"main aside"
"footer footer";
gap: 2rem;
}
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
/* 移动端：所有内容垂直堆叠 */
@media (max-width: 992px) {
.container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"aside"
"footer";
padding: 1rem;
}
}
/* --- 3. 排版与通用元素 --- */
h1, h2, h3 {
color: var(--text-color);
font-weight: 600;
line-height: 1.3;
}
h1 { font-size: 2.5rem; margin-bottom: 0.5rem; text-align: center; }
h2 {
font-size: 2rem;
margin-top: 0;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--border-color);
}
h3 { font-size: 1.25rem; color: var(--primary-color); }
p { margin-top: 0; margin-bottom: 1rem; }
a {
color: var(--accent-color);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--primary-color);
text-decoration: underline;
}
ul { padding-left: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; border-radius: var(--border-radius); }
/* --- 4. 模块样式 --- */
/* Header */
header { text-align: center; margin-bottom: 1rem; }
header p { font-size: 1.1rem; max-width: 60ch; margin: 0 auto 1.5rem auto; }
header nav ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin: 0;
}
header nav a {
font-weight: 500;
padding: 0.5rem 0;
border-bottom: 2px solid transparent;
transition: border-color 0.2s ease, color 0.2s ease;
}
header nav a:hover {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
text-decoration: none;
}
/* 通用卡片样式 (应用于 Section, Aside) */
section, aside {
background-color: var(--card-background-color);
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
@media (max-width: 768px) {
section, aside { padding: 1.5rem; }
}
/* Features Section */
#features ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
#features li {
padding: 1.5rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#features li:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}
#features h3 { margin: 0 0 0.5rem 0; }
#features p { margin-bottom: 0; }
/* Gallery Section */
#gallery {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
#gallery > div { /* For wrapping figures if needed, though direct styling is fine */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
#gallery figure {
margin: 0;
text-align: center;
}
#gallery figcaption {
margin-top: 0.5rem;
font-style: italic;
font-size: 0.9rem;
color: var(--secondary-text-color);
}
/* Pricing Table */
#pricing table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
#pricing caption {
font-weight: bold;
caption-side: bottom;
text-align: center;
margin-top: 1rem;
font-size: 0.9rem;
color: var(--secondary-text-color);
}
#pricing th, #pricing td {
padding: 1rem;
border-bottom: 1px solid var(--border-color);
}
#pricing thead {
background-color: var(--background-color);
}
#pricing th {
color: var(--text-color);
font-weight: 600;
}
#pricing tbody tr:hover {
background-color: #f1f3f5;
}
/* Contact Form */
#contact form { display: grid; gap: 1.5rem; }
#contact fieldset { border: none; padding: 0; margin: 0; display: grid; gap: 1rem;}
#contact legend { font-weight: bold; font-size: 1.1rem; margin-bottom: 0.5rem; padding: 0; }
#contact label { display: flex; flex-direction: column; gap: 0.5rem; font-weight: 500; }
#contact input, #contact textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: calc(var(--border-radius) / 2);
font-family: inherit;
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box; /* Ensures padding doesn't affect width */
}
#contact input:focus, #contact textarea:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2);
}
#contact button {
background-color: var(--accent-color);
color: white;
border: none;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 600;
border-radius: calc(var(--border-radius) / 2);
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
justify-self: start; /* Align button to the left */
}
#contact button:hover {
background-color: var(--primary-color);
transform: translateY(-2px);
}
/* Aside */
aside {
background-color: #e9ecef; /* Slightly different background for distinction */
border-left: 4px solid var(--accent-color);
}
/* Footer */
footer {
text-align: center;
padding: 2rem;
margin-top: 1rem;
background-color: var(--text-color);
color: var(--background-color);
border-radius: var(--border-radius);
}
footer p { margin: 0.5rem 0; }
footer a { color: #ffffff; font-weight: 500; }
footer a:hover { color: #ced4da; }
</style>
</head>
<body>
<div class="container">
<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>
<div>
<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>
</div>
</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>
</div>
</body>
</html>
```