好的,这是美化后的 HTML 代码,以及设计原则和色彩方案。 ```html AI Beautify — 基线页面

产品演示 — AI 美化基线

这是一个用于不同生成式 AI 美化对比的基础 HTML 页面。页面不含任何样式或脚本。

概述

我们的示例产品旨在演示一个简单的单页面布局:标题、特色、图集、价格与联系表单。你可以把本文件交给多个 AI,让它们为此页面生成 CSS、设计系统或重构 HTML。

功能亮点

价格一览

方案与价格
方案 价格(每月) 适用对象
免费 ¥0 个人与试用
专业 ¥49 中小型团队
企业 面议 大规模部署与 SLA

联系我们

填写下列信息,我们会尽快与您取得联系。

联系信息
``` ### 设计原则 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 (白色) 希望这个设计符合您的要求!