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.
476 lines
15 KiB
Markdown
476 lines
15 KiB
Markdown
好的，遵照您的要求，在不修改 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>
|
||
```
|