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.
169 lines
5.2 KiB
Markdown
169 lines
5.2 KiB
Markdown
请不要修改 HTML 的语义结构、ID、ARIA 属性或元素顺序。
|
||
|
||
你只能添加或修改 `<style>` 内的 CSS，或者生成一个独立的 CSS 文件并说明如何引入。
|
||
|
||
输出时请提供完整的 HTML（带 `<style>`），或 HTML + 单独的 CSS 文件。
|
||
|
||
额外请写出：
|
||
|
||
* 三条设计原则（说明你的美化思路）
|
||
* 五种可选色彩方案（只列调色板，不必都实现）
|
||
|
||
在保证语义结构不变的前提下，请将此页面美化为一个 **企业级官网风格** ：
|
||
|
||
* 使用稳重的配色（蓝色/灰色为主）
|
||
* 强调信息层级（标题、副标题、按钮）
|
||
* 响应式设计，保证桌面端有左右布局，移动端有上下堆叠
|
||
|
||
```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 或脚本（供美化对比使用） -->
|
||
</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>
|
||
|
||
```
|