feat(ai-test): add baseline and results for AI beautification test
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
417
doubao/Professional/respond.md
Normal file
417
doubao/Professional/respond.md
Normal file
@@ -0,0 +1,417 @@
|
||||
好的，这是美化后的 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>
|
||||
/* 全局样式 */
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
header,
|
||||
main,
|
||||
aside,
|
||||
footer {
|
||||
padding: 20px;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #0056b3;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 8px 12px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
main > section {
|
||||
margin-bottom: 30px;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
||||
width: 100%; /* 默认宽度，移动端全宽 */
|
||||
}
|
||||
|
||||
/* 桌面端布局 */
|
||||
@media (min-width: 768px) {
|
||||
main > section {
|
||||
width: 70%; /* 桌面端主内容区域 */
|
||||
}
|
||||
|
||||
aside {
|
||||
width: 28%; /* 桌面端侧边栏 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: #0056b3;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 2px solid #0056b3;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #0056b3;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* 功能亮点 */
|
||||
#features ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#features li {
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 作品展示 */
|
||||
#gallery figure {
|
||||
margin: 0 0 20px 0;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#gallery img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#gallery figcaption {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
/* 价格一览 */
|
||||
#pricing table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#pricing th,
|
||||
#pricing td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
#pricing th {
|
||||
background-color: #f0f0f0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#pricing caption {
|
||||
font-weight: bold;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 联系我们 */
|
||||
#contact fieldset {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#contact legend {
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#contact label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#contact input[type="text"],
|
||||
#contact input[type="email"],
|
||||
#contact textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#contact textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
#contact button {
|
||||
background-color: #0056b3;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#contact button:hover {
|
||||
background-color: #003d82;
|
||||
}
|
||||
|
||||
/* 侧边栏 */
|
||||
aside {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* 页脚 */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #777;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #0056b3;
|
||||
}
|
||||
</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>
|
||||
```
|
||||
|
||||
### 设计原则
|
||||
|
||||
1. **信息层级清晰**：通过标题、副标题、颜色和字体大小等视觉元素，突出页面的信息层级，引导用户快速找到关键信息。
|
||||
2. **稳重配色方案**：采用蓝色和灰色作为主色调，营造专业、信任的企业级官网氛围。
|
||||
3. **响应式布局**：针对不同屏幕尺寸进行优化，保证在桌面端和移动端都有良好的用户体验。桌面端采用左右布局，移动端采用上下堆叠布局。
|
||||
|
||||
### 色彩方案
|
||||
|
||||
1. **经典蓝灰**：
|
||||
* 主色：#0056b3 (蓝色)
|
||||
* 辅助色：#6c757d (灰色)
|
||||
* 背景色：#f4f4f4 (浅灰)
|
||||
* 文本色：#333 (深灰)
|
||||
* 强调色：#fff (白色)
|
||||
2. **深蓝沉稳**：
|
||||
* 主色：#2e3192 (深蓝色)
|
||||
* 辅助色：#4c516d (深灰色)
|
||||
* 背景色：#e9ecef (淡灰)
|
||||
* 文本色：#343a40 (黑色)
|
||||
* 强调色：#f8f9fa (亮白)
|
||||
3. **科技蓝绿**：
|
||||
* 主色：#007bff (亮蓝色)
|
||||
* 辅助色：#28a745 (绿色)
|
||||
* 背景色：#f0f8ff (浅蓝)
|
||||
* 文本色：#495057 (深灰)
|
||||
* 强调色：#fff (白色)
|
||||
4. **简约灰白**：
|
||||
* 主色：#343a40 (深灰)
|
||||
* 辅助色：#6c757d (灰色)
|
||||
* 背景色：#f8f9fa (亮白)
|
||||
* 文本色：#212529 (黑色)
|
||||
* 强调色：#fff (白色)
|
||||
5. **海洋蓝调**：
|
||||
* 主色：#004a7c (深海蓝)
|
||||
* 辅助色：#5f9ea0 (海蓝)
|
||||
* 背景色：#e0f2f7 (淡蓝)
|
||||
* 文本色：#343a40 (黑色)
|
||||
* 强调色：#fff (白色)
|
||||
|
||||
希望这个设计符合您的要求！
|
||||
Reference in New Issue
Block a user