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.
12 KiB
12 KiB
企业级官网风格美化
我将按照要求，在不修改HTML结构的前提下，通过CSS将页面美化为企业级官网风格。
完整HTML代码（包含内嵌CSS）
<!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>
/* 重置和基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
}
/* 容器布局 */
body {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
background: linear-gradient(135deg, #1e3c72, #2a5298);
color: white;
padding: 2rem 1.5rem;
border-radius: 0 0 10px 10px;
margin-bottom: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
header h1 {
font-size: 2.2rem;
margin-bottom: 0.5rem;
font-weight: 600;
}
header p {
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 1.5rem;
max-width: 600px;
}
/* 导航样式 */
nav ul {
display: flex;
list-style: none;
flex-wrap: wrap;
gap: 1rem;
}
nav a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 4px;
transition: background-color 0.3s;
font-weight: 500;
}
nav a:hover {
background-color: rgba(255, 255, 255, 0.2);
}
/* 主要内容区域 */
main {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
margin-bottom: 2.5rem;
}
section {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
section h2 {
color: #2a5298;
font-size: 1.8rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #eaeaea;
}
section p {
margin-bottom: 1rem;
line-height: 1.7;
}
/* 功能列表样式 */
#features ul {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
#features li {
background: #f8f9fa;
padding: 1.5rem;
border-radius: 6px;
border-left: 4px solid #2a5298;
}
#features h3 {
color: #2a5298;
margin-bottom: 0.5rem;
font-size: 1.3rem;
}
/* 图集样式 */
#gallery {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
figure {
border: 1px solid #eaeaea;
border-radius: 6px;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
figure:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
figure img {
width: 100%;
height: auto;
display: block;
}
figcaption {
padding: 1rem;
background: #f8f9fa;
font-style: italic;
color: #666;
}
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
caption {
font-weight: bold;
margin-bottom: 1rem;
text-align: left;
color: #2a5298;
}
th, td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid #eaeaea;
}
th {
background-color: #f1f5fd;
font-weight: 600;
color: #2a5298;
}
tr:hover {
background-color: #f8f9fa;
}
/* 表单样式 */
fieldset {
border: 1px solid #eaeaea;
border-radius: 6px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
legend {
padding: 0 0.5rem;
font-weight: 600;
color: #2a5298;
}
label {
display: block;
margin-bottom: 1rem;
font-weight: 500;
}
input, textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
font-family: inherit;
font-size: 1rem;
margin-top: 0.25rem;
transition: border-color 0.3s;
}
input:focus, textarea:focus {
border-color: #2a5298;
outline: none;
box-shadow: 0 0 0 2px rgba(42, 82, 152, 0.2);
}
button {
background: linear-gradient(135deg, #1e3c72, #2a5298);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 4px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* 侧边栏样式 */
aside {
background: #f1f5fd;
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 2rem;
border-left: 4px solid #2a5298;
}
aside h2 {
color: #2a5298;
margin-bottom: 0.5rem;
}
/* 页脚样式 */
footer {
background: #2a5298;
color: white;
text-align: center;
padding: 1.5rem;
border-radius: 8px 8px 0 0;
margin-top: 2rem;
}
footer a {
color: #a8c6ff;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
/* 响应式设计 */
@media (min-width: 768px) {
main {
grid-template-columns: 2fr 1fr;
}
#overview, #features, #gallery, #pricing, #contact {
grid-column: 1 / span 2;
}
aside {
grid-column: 2;
grid-row: 5;
}
#gallery {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
body {
padding: 0 2rem;
}
header {
padding: 3rem 2rem;
}
section {
padding: 2.5rem;
}
#features ul {
grid-template-columns: repeat(3, 1fr);
}
}
</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>
设计原则
- 信息层级清晰：通过字体大小、颜色、间距和视觉权重区分不同层级的内容，确保用户能够快速识别重要信息。
- 专业稳重：采用蓝色和灰色为主色调，蓝色代表专业和信任，灰色提供中性背景，整体设计简洁大方，符合企业形象。
- 响应式设计：使用CSS Grid和Flexbox布局，结合媒体查询，确保在不同设备上都能提供良好的用户体验。
五种可选色彩方案
- 科技蓝调：主色 #2563EB，辅色 #1E40AF，中性色 #6B7280
- 商务灰蓝：主色 #374151，辅色 #1E40AF，强调色 #10B981
- 深蓝海洋：主色 #1E3A8A，辅色 #3B82F6，中性色 #9CA3AF
- 稳重靛蓝：主色 #4F46E5，辅色 #3730A3，中性色 #6B7280
- 专业深灰：主色 #111827，辅色 #374151，强调色 #3B82F6
这些色彩方案都保持了企业级网站所需的专业感和稳重感，可以根据品牌形象选择适合的配色。