web-design

1# 网页设计与部署
2 
3生成精美单页 HTML 并部署到 Cloudflare Pages。
4 
5## 设计规范
6 
7### 设计语言
8 
9根据用户需求自由设计，每次生成的页面应有独特的视觉风格，避免千篇一律。
10 
11设计约束：
12- 不使用紫色渐变配色
13- 不使用 Emoji 表情符号，统一使用 Font Awesome 图标代替
14- 布局：灵活运用 Tailwind CSS 的 Grid / Flex 布局，根据内容量和类型选择合适的排版
15- 卡片组件：圆角、阴影、悬停动效等可根据风格调整
16- 图标：使用 Font Awesome 6.x `<i class="fa-solid fa-xxx">`
17- 图表：使用 Chart.js，支持 bar / line / doughnut / radar / polarArea 等
18- 响应式：确保移动端和桌面端都有良好的展示效果
19 
20### 推荐在线资源（CDN）
21 
22```html
23<!-- 核心 -->
24<script src="https://cdn.tailwindcss.com"></script>
25<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
26<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
27 
28<!-- 动画 -->
29<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
30<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
31<link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css">
32 
33<!-- 字体 -->
34<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
35<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap">
36 
37<!-- 图表增强 -->
38<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
39 
40<!-- 轮播 -->
41<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
42<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
43 
44<!-- 代码高亮（技术类页面） -->
45…