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
382
kimi/Professional/index.html
Normal file
382
kimi/Professional/index.html
Normal file
@@ -0,0 +1,382 @@
|
||||
<!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 -->
|
||||
<style>
|
||||
/* 0. 设计令牌 */
|
||||
:root {
|
||||
--clr-primary: #0052cc;
|
||||
--clr-primary-dark: #003d99;
|
||||
--clr-accent: #f5f7fa;
|
||||
--clr-text: #172b4d;
|
||||
--clr-muted: #5e6c84;
|
||||
--clr-border: #dfe1e6;
|
||||
--radius: 6px;
|
||||
--max-width: 1200px;
|
||||
--gap: 1.5rem;
|
||||
--font-base: 16px;
|
||||
--transition: 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
/* 1. 全局重置与排版 */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||
font-size: var(--font-base);
|
||||
line-height: 1.6;
|
||||
color: var(--clr-text);
|
||||
background: #fff;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin: 0 0 0.5em;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
a {
|
||||
color: var(--clr-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 2. 布局骨架 */
|
||||
header,
|
||||
main,
|
||||
aside,
|
||||
footer {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.inner {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
header .inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
header hgroup {
|
||||
flex: 1 1 300px;
|
||||
}
|
||||
nav ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
nav a {
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
nav a:hover {
|
||||
border-color: var(--clr-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 3. 区块样式 */
|
||||
section {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
#features ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: var(--gap);
|
||||
}
|
||||
#features li {
|
||||
background: var(--clr-accent);
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
figure {
|
||||
margin: 0 0 1.5rem;
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
figcaption {
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--clr-accent);
|
||||
font-size: 0.875rem;
|
||||
color: var(--clr-muted);
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--clr-border);
|
||||
}
|
||||
th {
|
||||
background: var(--clr-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
caption {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* 4. 表单 */
|
||||
form {
|
||||
max-width: 600px;
|
||||
}
|
||||
fieldset {
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
legend {
|
||||
font-weight: 600;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: var(--radius);
|
||||
font: inherit;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--clr-primary);
|
||||
}
|
||||
button {
|
||||
background: var(--clr-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 0.75rem 1.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
button:hover {
|
||||
background: var(--clr-primary-dark);
|
||||
}
|
||||
|
||||
/* 5. 侧边栏 & 页脚 */
|
||||
aside {
|
||||
background: var(--clr-accent);
|
||||
border-top: 1px solid var(--clr-border);
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
color: var(--clr-muted);
|
||||
border-top: 1px solid var(--clr-border);
|
||||
}
|
||||
|
||||
/* 6. 响应式：桌面左右 | 手机上下 */
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 320px;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-areas:
|
||||
"hdr hdr"
|
||||
"main side"
|
||||
"ftr ftr";
|
||||
}
|
||||
header {
|
||||
grid-area: hdr;
|
||||
}
|
||||
main {
|
||||
grid-area: main;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
aside {
|
||||
grid-area: side;
|
||||
padding-left: 2rem;
|
||||
border-top: none;
|
||||
border-left: 1px solid var(--clr-border);
|
||||
}
|
||||
footer {
|
||||
grid-area: ftr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="inner">
|
||||
<hgroup>
|
||||
<h1>产品演示 — AI 美化基线</h1>
|
||||
<p>
|
||||
这是一个用于不同生成式 AI 美化对比的基础 HTML
|
||||
页面。页面不含任何样式或脚本。
|
||||
</p>
|
||||
</hgroup>
|
||||
<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>
|
||||
</div>
|
||||
</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">
|
||||
<div class="inner">
|
||||
<h2 id="note-title">测试说明</h2>
|
||||
<p>
|
||||
你可以将此 HTML 原样提交给不同 AI，请求它们“美化”或“生成响应式 CSS
|
||||
和设计说明”。在比较时请确保所有 AI 使用相同的任务描述与约束。
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<footer>
|
||||
<div class="inner">
|
||||
<p>© 2025 示例组织。用于 AI 美化对比测试。</p>
|
||||
<p><a href="#top">返回顶部</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
332
kimi/Professional/respond.md
Normal file
332
kimi/Professional/respond.md
Normal file
@@ -0,0 +1,332 @@
|
||||
完整 HTML（已内联企业级 CSS，可直接保存为 index.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>
|
||||
|
||||
<!-- 企业级官网风格 CSS -->
|
||||
<style>
|
||||
/* 0. 设计令牌 */
|
||||
:root {
|
||||
--clr-primary: #0052cc;
|
||||
--clr-primary-dark: #003d99;
|
||||
--clr-accent: #f5f7fa;
|
||||
--clr-text: #172b4d;
|
||||
--clr-muted: #5e6c84;
|
||||
--clr-border: #dfe1e6;
|
||||
--radius: 6px;
|
||||
--max-width: 1200px;
|
||||
--gap: 1.5rem;
|
||||
--font-base: 16px;
|
||||
--transition: .25s ease-in-out;
|
||||
}
|
||||
|
||||
/* 1. 全局重置与排版 */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||
font-size: var(--font-base);
|
||||
line-height: 1.6;
|
||||
color: var(--clr-text);
|
||||
background: #fff;
|
||||
}
|
||||
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.3; font-weight: 600; }
|
||||
h1 { font-size: 2rem; }
|
||||
h2 { font-size: 1.5rem; }
|
||||
h3 { font-size: 1.25rem; }
|
||||
p { margin: 0 0 1em; }
|
||||
a { color: var(--clr-primary); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
img { max-width: 100%; display: block; }
|
||||
|
||||
/* 2. 布局骨架 */
|
||||
header, main, aside, footer {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.inner {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
header .inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
header hgroup { flex: 1 1 300px; }
|
||||
nav ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
nav a {
|
||||
font-weight: 500;
|
||||
padding: .5rem 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
nav a:hover { border-color: var(--clr-primary); text-decoration: none; }
|
||||
|
||||
/* 3. 区块样式 */
|
||||
section {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
#features ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: var(--gap);
|
||||
}
|
||||
#features li {
|
||||
background: var(--clr-accent);
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
figure {
|
||||
margin: 0 0 1.5rem;
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
figcaption {
|
||||
padding: .75rem 1rem;
|
||||
background: var(--clr-accent);
|
||||
font-size: .875rem;
|
||||
color: var(--clr-muted);
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
th, td {
|
||||
padding: .75rem 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--clr-border);
|
||||
}
|
||||
th { background: var(--clr-accent); font-weight: 600; }
|
||||
caption {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
/* 4. 表单 */
|
||||
form {
|
||||
max-width: 600px;
|
||||
}
|
||||
fieldset {
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
legend {
|
||||
font-weight: 600;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
padding: .5rem .75rem;
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: var(--radius);
|
||||
font: inherit;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
input:focus, textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--clr-primary);
|
||||
}
|
||||
button {
|
||||
background: var(--clr-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: .75rem 1.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
button:hover { background: var(--clr-primary-dark); }
|
||||
|
||||
/* 5. 侧边栏 & 页脚 */
|
||||
aside {
|
||||
background: var(--clr-accent);
|
||||
border-top: 1px solid var(--clr-border);
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
font-size: .875rem;
|
||||
color: var(--clr-muted);
|
||||
border-top: 1px solid var(--clr-border);
|
||||
}
|
||||
|
||||
/* 6. 响应式：桌面左右 | 手机上下 */
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 320px;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-areas:
|
||||
"hdr hdr"
|
||||
"main side"
|
||||
"ftr ftr";
|
||||
}
|
||||
header { grid-area: hdr; }
|
||||
main { grid-area: main; padding-right: 2rem; }
|
||||
aside { grid-area: side; padding-left: 2rem; border-top: none; border-left: 1px solid var(--clr-border); }
|
||||
footer { grid-area: ftr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="inner">
|
||||
<hgroup>
|
||||
<h1>产品演示 — AI 美化基线</h1>
|
||||
<p>这是一个用于不同生成式 AI 美化对比的基础 HTML 页面。页面不含任何样式或脚本。</p>
|
||||
</hgroup>
|
||||
<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>
|
||||
</div>
|
||||
</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">
|
||||
<div class="inner">
|
||||
<h2 id="note-title">测试说明</h2>
|
||||
<p>你可以将此 HTML 原样提交给不同 AI，请求它们“美化”或“生成响应式 CSS 和设计说明”。在比较时请确保所有 AI 使用相同的任务描述与约束。</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<footer>
|
||||
<div class="inner">
|
||||
<p>© 2025 示例组织。用于 AI 美化对比测试。</p>
|
||||
<p><a href="#top">返回顶部</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
三条设计原则（美化思路）
|
||||
|
||||
1. 信息层级优先：通过字号、字重、留白与配色，把“标题-副标题-正文-辅助”逐层拉开，让用户一眼抓住核心内容。
|
||||
2. 稳定中性配色：以深蓝为主色、浅灰作背景、低饱和文字降低视觉噪音，传递企业可靠、专业的品牌气质。
|
||||
3. 响应式弹性布局：同一套 HTML，桌面自动左右分栏，移动端上下堆叠；所有元素使用相对单位与弹性容器，确保任意视口下都有舒适阅读宽度与触控尺寸。
|
||||
|
||||
---
|
||||
|
||||
五种可选色彩方案（仅调色板，无需全部实现）
|
||||
|
||||
1. 深海蓝 – #003366 / 科技蓝 – #0052cc / 浅雾灰 – #f5f7fa / 文字深青 – #172b4d / 点缀薄荷 – #36b37e
|
||||
2. 石板灰 – #2d3748 / 亮钴蓝 – #3182ce / 极浅灰 – #f7fafc / 深石墨 – #1a202c / 点缀橙 – #ed8936
|
||||
3. 藏青 – #1e3a8a / 天青 – #3b82f6 / 冷灰 – #e5e7eb / 墨黑 – #111827 / 点缀黄 – #f59e0b
|
||||
4. 深岩蓝 – #0f172a / 澄澈蓝 – #2563eb / 雾银 – #f1f5f9 / 炭灰 – #1f2937 / 点缀青 – #10b981
|
||||
5. 午夜蓝 – #001f3f / 亮靛 – #0074d9 / 烟灰 – #f6f8fa / 深靛 – #0b1426 / 点缀洋红 – #e91e63
|
||||
Reference in New Issue
Block a user