Web Design Layout
Overview
提供网站设计、排版和美化的全流程能力。覆盖两大场景：从零设计新页面 和 美化/优化已有页面。
内置设计系统参考文档和可复用的 HTML/CSS 页面模板，确保输出专业、统一、可直接使用。
When to Use
触发条件 — 用户请求涉及以下任一场景时加载本 skill：
- 设计或创建新的网页 / 落地页
- 改善已有页面的视觉效果
- 优化排版、配色、间距或布局
- 对 HTML 内容应用专业样式
- "把这个页面变好看"、"帮我设计一个XX页面"、"优化排版"等
触发关键词：网站设计、页面设计、排版、美化、CSS、落地页、网页设计、布局优化、UI美化、页面改版、设计漂亮的页面、帮我把页面变好看、设计一个首页。
Workflow
Scenario A: 从零设计新页面
当用户要求创建全新页面时，按以下步骤执行：
- 收集需求 — 了解页面目的、目标受众、期望风格（简约/科技/商务/活泼等）、主要内容模块
- 选择基础模板 — 从
assets/目录加载最匹配的模板作为起点，优先使用完整落地页模板 - 定制化 — 根据需求调整配色、排版、内容和布局
- 应用设计原则 — 需要详细指导时，加载
references/design-system.md - 交付 — 输出一个自包含的 HTML 文件（CSS 内联在
<style>中，无外部依赖）
Scenario B: 美化已有页面
当用户要求改进现有页面时，按以下步骤执行：
- 审查当前页面 — 分析现有设计的优缺点，识别排版、配色、间距、布局等方面的问题
- 提出改进方案 — 给出具体的修改建议，说明每项改动的原因
- 逐步实施 — 逐项修改 CSS 和结构，保持改动可追溯
- 保持功能完整 — 确保所有已有功能和交互不受影响
设计原则速查
需要详细的色彩理论、排版规则、间距系统等指导时，加载 references/design-system.md。
Using Templates
assets/ 目录包含可立即使用的 HTML/CSS 模板。所有模板均为自包含（内联 CSS），无外部依赖。
| 模板 | 说明 | 适用场景 |
|---|---|---|
hero-basic.html |
Hero 区：标题、副标题、CTA 按钮 | 页面首屏主视觉 |
navbar.html |
响应式导航栏 | 网站导航 |
cards-grid.html |
卡片网格布局 | 功能展示、服务、产品列表 |
features-section.html |
图文交替的特性展示区 | 产品亮点、服务优势 |
cta-section.html |
行动号召区域 | 转化引导 |
footer.html |
页脚（含链接和信息） | 页面底部 |
full-landing-page.html |
完整落地页（组合以上所有组件） | 端到端页面搭建 |
使用模板的方法：
1. 读取 assets/ 中对应的模板文件
2. 将其作为基础结构
3. 根据用户需求定制配色、内容、图片
4. 最终交付一个自包含的 HTML 文件
Code Standards
所有生成的 HTML 文件必须遵循以下规范：
- 自包含 — 所有 CSS 内联在
<style>标签中，不引入外部依赖（CDN 字体除外） - 移动优先 — 使用 CSS media query 实现响应式设计，优先考虑移动端体验
- 语义化 HTML5 — 使用
<header>、<nav>、<main>、<section>、<footer>等语义元素 - CSS 自定义属性 — 用 CSS 变量统一管理主题色、间距、字号
- 无障碍 — 合理的标题层级、alt 文本、必要的 ARIA 标签
- 浏览器兼容 — 避免使用兼容性差的实验性特性，必要时提供 fallback
- 中文优化 — 中文字体栈优先，合适的行高（1.6-1.8）和字间距
