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
322
chatgpt/Professional/index.html
Normal file
322
chatgpt/Professional/index.html
Normal file
@@ -0,0 +1,322 @@
|
||||
<!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>
|
||||
/* ===== Reset & 基础样式 ===== */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #374151;
|
||||
background: #f9fafb;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin: 0.5em 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
color: #1e3a8a;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
color: #2563eb;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
color: #374151;
|
||||
}
|
||||
p {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
ul {
|
||||
padding-left: 1.2em;
|
||||
}
|
||||
|
||||
/* ===== Header ===== */
|
||||
header {
|
||||
background: #1e3a8a;
|
||||
color: #fff;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
header h1 {
|
||||
color: #fff;
|
||||
}
|
||||
header p {
|
||||
max-width: 600px;
|
||||
}
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin: 1rem 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
nav a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ===== Main Sections ===== */
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
gap: 2rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
section {
|
||||
background: #fff;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
figure {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
figure img {
|
||||
max-width: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
figcaption {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* ===== 表格 (Pricing) ===== */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #e5e7eb;
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
thead {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
}
|
||||
tbody tr:nth-child(even) {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
/* ===== 表单 (Contact) ===== */
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: 500;
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
margin-top: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
}
|
||||
button {
|
||||
align-self: flex-start;
|
||||
padding: 0.6rem 1.2rem;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background: #1e40af;
|
||||
}
|
||||
|
||||
/* ===== Aside ===== */
|
||||
aside {
|
||||
background: #f3f4f6;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* ===== Footer ===== */
|
||||
footer {
|
||||
background: #1e3a8a;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
footer a {
|
||||
color: #93c5fd;
|
||||
text-decoration: none;
|
||||
}
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ===== 响应式设计 ===== */
|
||||
@media (max-width: 768px) {
|
||||
main {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
nav ul {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
386
chatgpt/Professional/respond.md
Normal file
386
chatgpt/Professional/respond.md
Normal file
@@ -0,0 +1,386 @@
|
||||
好的 👍 我会保持 **HTML 语义结构完全不变** ，仅通过 CSS 来实现企业级官网风格的美化。以下是结果：
|
||||
|
||||
---
|
||||
|
||||
## 🎨 三条设计原则
|
||||
|
||||
1. **稳重专业感** ：采用深蓝 + 中性灰为主色，保证页面在企业级场景下的正式氛围。
|
||||
2. **清晰的信息层级** ：标题、副标题、正文和按钮分别使用不同字号、粗细和颜色层次，突出重点。
|
||||
3. **响应式优先** ：桌面端采用左右分栏（内容与导航、图文对齐），移动端自动堆叠，保证在不同设备下都有舒适体验。
|
||||
|
||||
---
|
||||
|
||||
## 🌈 五种可选色彩方案（调色板）
|
||||
|
||||
1. **蓝灰稳重型** （推荐，用于演示）：
|
||||
|
||||
- 深蓝 `#1e3a8a`
|
||||
- 中蓝 `#2563eb`
|
||||
- 浅灰 `#f3f4f6`
|
||||
- 深灰 `#374151`
|
||||
- 白色 `#ffffff`
|
||||
|
||||
1. **黑金奢华型** ：
|
||||
|
||||
- 黑色 `#111827`
|
||||
- 金色 `#d97706`
|
||||
- 深灰 `#374151`
|
||||
- 银灰 `#9ca3af`
|
||||
- 白色 `#ffffff`
|
||||
|
||||
1. **绿灰科技型** ：
|
||||
|
||||
- 墨绿 `#065f46`
|
||||
- 青绿 `#10b981`
|
||||
- 浅灰 `#f9fafb`
|
||||
- 石墨灰 `#4b5563`
|
||||
- 白色 `#ffffff`
|
||||
|
||||
1. **红黑极简型** ：
|
||||
|
||||
- 深红 `#b91c1c`
|
||||
- 亮红 `#ef4444`
|
||||
- 黑色 `#111111`
|
||||
- 灰色 `#6b7280`
|
||||
- 白色 `#ffffff`
|
||||
|
||||
1. **紫蓝未来型** ：
|
||||
|
||||
- 深紫 `#4c1d95`
|
||||
- 亮紫 `#8b5cf6`
|
||||
- 蓝紫 `#3b82f6`
|
||||
- 浅灰 `#e5e7eb`
|
||||
- 白色 `#ffffff`
|
||||
|
||||
---
|
||||
|
||||
## 💻 完整 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>
|
||||
<style>
|
||||
/* ===== Reset & 基础样式 ===== */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #374151;
|
||||
background: #f9fafb;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin: 0.5em 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
color: #1e3a8a;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
color: #2563eb;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
color: #374151;
|
||||
}
|
||||
p {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
ul {
|
||||
padding-left: 1.2em;
|
||||
}
|
||||
|
||||
/* ===== Header ===== */
|
||||
header {
|
||||
background: #1e3a8a;
|
||||
color: #fff;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
header h1 {
|
||||
color: #fff;
|
||||
}
|
||||
header p {
|
||||
max-width: 600px;
|
||||
}
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin: 1rem 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
nav a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ===== Main Sections ===== */
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
gap: 2rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
section {
|
||||
background: #fff;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
figure {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
figure img {
|
||||
max-width: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
figcaption {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* ===== 表格 (Pricing) ===== */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #e5e7eb;
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
thead {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
}
|
||||
tbody tr:nth-child(even) {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
/* ===== 表单 (Contact) ===== */
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: 500;
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
margin-top: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
}
|
||||
button {
|
||||
align-self: flex-start;
|
||||
padding: 0.6rem 1.2rem;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background: #1e40af;
|
||||
}
|
||||
|
||||
/* ===== Aside ===== */
|
||||
aside {
|
||||
background: #f3f4f6;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* ===== Footer ===== */
|
||||
footer {
|
||||
background: #1e3a8a;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
footer a {
|
||||
color: #93c5fd;
|
||||
text-decoration: none;
|
||||
}
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ===== 响应式设计 ===== */
|
||||
@media (max-width: 768px) {
|
||||
main {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
nav ul {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</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://via.placeholder.com/640x360?text=示例图+1"
|
||||
alt="示例图 1"
|
||||
/>
|
||||
<figcaption>示例图 1 — 产品界面快照</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img
|
||||
src="https://via.placeholder.com/640x360?text=示例图+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>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
要不要我帮你把 **黑金奢华型** 或 **绿灰科技型** 配色版本也做出来，方便横向对比？
|
||||
450
deepseek/Professional/index.html
Normal file
450
deepseek/Professional/index.html
Normal file
@@ -0,0 +1,450 @@
|
||||
<!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>
|
||||
473
deepseek/Professional/respond.md
Normal file
473
deepseek/Professional/respond.md
Normal file
@@ -0,0 +1,473 @@
|
||||
# 企业级官网风格美化
|
||||
|
||||
我将按照要求，在不修改HTML结构的前提下，通过CSS将页面美化为企业级官网风格。
|
||||
|
||||
## 完整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>
|
||||
<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>
|
||||
```
|
||||
|
||||
## 设计原则
|
||||
|
||||
1. **信息层级清晰**：通过字体大小、颜色、间距和视觉权重区分不同层级的内容，确保用户能够快速识别重要信息。
|
||||
2. **专业稳重**：采用蓝色和灰色为主色调，蓝色代表专业和信任，灰色提供中性背景，整体设计简洁大方，符合企业形象。
|
||||
3. **响应式设计**：使用CSS Grid和Flexbox布局，结合媒体查询，确保在不同设备上都能提供良好的用户体验。
|
||||
|
||||
## 五种可选色彩方案
|
||||
|
||||
1. **科技蓝调**：主色 #2563EB，辅色 #1E40AF，中性色 #6B7280
|
||||
2. **商务灰蓝**：主色 #374151，辅色 #1E40AF，强调色 #10B981
|
||||
3. **深蓝海洋**：主色 #1E3A8A，辅色 #3B82F6，中性色 #9CA3AF
|
||||
4. **稳重靛蓝**：主色 #4F46E5，辅色 #3730A3，中性色 #6B7280
|
||||
5. **专业深灰**：主色 #111827，辅色 #374151，强调色 #3B82F6
|
||||
|
||||
这些色彩方案都保持了企业级网站所需的专业感和稳重感，可以根据品牌形象选择适合的配色。
|
||||
366
doubao/Professional/index.html
Normal file
366
doubao/Professional/index.html
Normal file
@@ -0,0 +1,366 @@
|
||||
<!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>
|
||||
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 (白色)
|
||||
|
||||
希望这个设计符合您的要求！
|
||||
468
gemini/Professional/index.html
Normal file
468
gemini/Professional/index.html
Normal file
@@ -0,0 +1,468 @@
|
||||
<!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>
|
||||
475
gemini/Professional/respond.md
Normal file
475
gemini/Professional/respond.md
Normal file
@@ -0,0 +1,475 @@
|
||||
好的，遵照您的要求，在不修改 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>
|
||||
```
|
||||
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
|
||||
63
plain_html/4 designs.md
Normal file
63
plain_html/4 designs.md
Normal file
@@ -0,0 +1,63 @@
|
||||
👌太好了～那我给你准备几套 **统一的 Prompt 模板** ，你可以直接复制粘贴给各家 AI，看看它们的美化能力差异。每个 Prompt 保证 **同样的约束条件** （不改语义、不删结构），只是目标风格不同。🎨✨
|
||||
|
||||
---
|
||||
|
||||
## 🎯 基础约束（四个 Prompt 都相同部分）
|
||||
|
||||
> 请不要修改 HTML 的语义结构、ID、ARIA 属性或元素顺序。
|
||||
>
|
||||
> 你只能添加或修改 `<style>` 内的 CSS，或者生成一个独立的 CSS 文件并说明如何引入。
|
||||
>
|
||||
> 输出时请提供完整的 HTML（带 `<style>`），或 HTML + 单独的 CSS 文件。
|
||||
>
|
||||
> 额外请写出：
|
||||
>
|
||||
> * 三条设计原则（说明你的美化思路）
|
||||
> * 五种可选色彩方案（只列调色板，不必都实现）
|
||||
|
||||
---
|
||||
|
||||
## 🟢 Prompt 1 — 极简风 Minimalist
|
||||
|
||||
> 在保证语义结构不变的前提下，请将此页面美化为一个 **极简风** 网站：
|
||||
>
|
||||
> * 使用大量留白、细线条和轻量字体
|
||||
> * 强调排版和间距，而不是装饰
|
||||
> * 响应式适配移动端与桌面端
|
||||
|
||||
---
|
||||
|
||||
## 🔵 Prompt 2 — 企业级 Professional
|
||||
|
||||
> 在保证语义结构不变的前提下，请将此页面美化为一个 **企业级官网风格** ：
|
||||
>
|
||||
> * 使用稳重的配色（蓝色/灰色为主）
|
||||
> * 强调信息层级（标题、副标题、按钮）
|
||||
> * 响应式设计，保证桌面端有左右布局，移动端有上下堆叠
|
||||
|
||||
---
|
||||
|
||||
## 🟡 Prompt 3 — 卡通 / 轻松 Cartoon
|
||||
|
||||
> 在保证语义结构不变的前提下，请将此页面美化为一个 **卡通风格** 网站：
|
||||
>
|
||||
> * 使用明亮活泼的配色（如黄色、橙色、粉色）
|
||||
> * 圆角、阴影、手绘感元素
|
||||
> * 字体更亲切，按钮更大更好点
|
||||
|
||||
---
|
||||
|
||||
## ⚫ Prompt 4 — 暗黑风 Dark Mode
|
||||
|
||||
> 在保证语义结构不变的前提下，请将此页面美化为一个 **暗黑风网站** ：
|
||||
>
|
||||
> * 默认深色背景，浅色文字
|
||||
> * 高对比度按钮与链接
|
||||
> * 响应式下保持良好的阅读体验
|
||||
> * 可以额外提供一套浅色主题的切换方案（可选）
|
||||
|
||||
---
|
||||
|
||||
这样你就能用同一个 **基线 HTML** + **四个 Prompt** ，把结果交给 OpenAI、Anthropic、Google、Meta 或其他 AI，对比大家在 **排版/配色/层次/可维护性** 上的差异了。🔍✨
|
||||
|
||||
要不要我再帮你写一份 **对比打分表模板（Excel/Markdown）** ，方便你把结果逐项评分？📊
|
||||
168
plain_html/Prompt.md
Normal file
168
plain_html/Prompt.md
Normal file
@@ -0,0 +1,168 @@
|
||||
请不要修改 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>
|
||||
|
||||
```
|
||||
148
plain_html/index.html
Normal file
148
plain_html/index.html
Normal file
@@ -0,0 +1,148 @@
|
||||
<!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://via.placeholder.com/640x360?text=示例图+1"
|
||||
alt="示例图 1"
|
||||
/>
|
||||
<figcaption>示例图 1 — 产品界面快照</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img
|
||||
src="https://via.placeholder.com/640x360?text=示例图+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>
|
||||
372
yuanbao/Professional/index.html
Normal file
372
yuanbao/Professional/index.html
Normal file
@@ -0,0 +1,372 @@
|
||||
<!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;
|
||||
font-family: "微软雅黑", "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary-blue: #0052cc; /* 主品牌蓝 */
|
||||
--secondary-gray: #f5f7fa; /* 辅助浅灰 */
|
||||
--text-dark: #1a1a1a; /* 正文深灰 */
|
||||
--text-light: #666; /* 次要文本 */
|
||||
--border-color: #e5e7eb; /* 边框浅灰 */
|
||||
--white: #ffffff; /* 纯白 */
|
||||
--shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 轻阴影 */
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.6;
|
||||
color: var(--text-dark);
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
/* 头部与导航 */
|
||||
header {
|
||||
padding: 2rem 1rem;
|
||||
background-color: var(--white);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2rem;
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
header p {
|
||||
color: var(--text-light);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: var(--text-dark);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
/* 主内容容器 */
|
||||
main {
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
main {
|
||||
grid-template-columns: 2fr 1fr; /* 桌面端左右布局 */
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid var(--primary-blue);
|
||||
}
|
||||
|
||||
/* 功能列表 */
|
||||
#features ul {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#features li {
|
||||
padding: 1rem;
|
||||
background: var(--secondary-gray);
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
#features h3 {
|
||||
font-size: 1.1rem;
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* 图集 */
|
||||
#gallery {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
#gallery figure {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
#gallery img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#gallery figcaption {
|
||||
padding: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-light);
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
/* 价格表格 */
|
||||
#pricing table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--white);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
#pricing th,
|
||||
#pricing td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
#pricing th {
|
||||
background: var(--secondary-gray);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#pricing tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#pricing tr:hover {
|
||||
background: var(--secondary-gray);
|
||||
}
|
||||
|
||||
/* 联系表单 */
|
||||
#contact fieldset {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#contact legend {
|
||||
padding: 0 0.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
#contact label {
|
||||
display: block;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#contact input,
|
||||
#contact textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#contact button {
|
||||
background: var(--primary-blue);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
#contact button:hover {
|
||||
background: #0040a3;
|
||||
}
|
||||
|
||||
/* 侧边栏与页脚 */
|
||||
aside {
|
||||
padding: 2rem 1rem;
|
||||
background: var(--secondary-gray);
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
color: var(--text-light);
|
||||
border-top: 1px solid var(--border-color);
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto 0;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--primary-blue);
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 原HTML结构完全保留，仅通过CSS美化 -->
|
||||
<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>
|
||||
332
yuanbao/Professional/respond.md
Normal file
332
yuanbao/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