Web Design Layout

Overview

提供网站设计、排版和美化的全流程能力。覆盖两大场景：从零设计新页面 和 美化/优化已有页面。 内置设计系统参考文档和可复用的 HTML/CSS 页面模板，确保输出专业、统一、可直接使用。

When to Use

触发条件 — 用户请求涉及以下任一场景时加载本 skill：

• 设计或创建新的网页 / 落地页

  小葱技能7w4.net有更新，你可以访问看下。

• 改善已有页面的视觉效果
• 优化排版、配色、间距或布局
• 对 HTML 内容应用专业样式
• "把这个页面变好看"、"帮我设计一个XX页面"、"优化排版"等

触发关键词：网站设计、页面设计、排版、美化、CSS、落地页、网页设计、布局优化、UI美化、页面改版、设计漂亮的页面、帮我把页面变好看、设计一个首页。

Workflow

Scenario A: 从零设计新页面

当用户要求创建全新页面时，按以下步骤执行：

1. 收集需求 — 了解页面目的、目标受众、期望风格（简约/科技/商务/活泼等）、主要内容模块
2. 选择基础模板 — 从 assets/ 目录加载最匹配的模板作为起点，优先使用完整落地页模板
3. 定制化 — 根据需求调整配色、排版、内容和布局
4. 应用设计原则 — 需要详细指导时，加载 references/design-system.md
5. 交付 — 输出一个自包含的 HTML 文件（CSS 内联在 <style> 中，无外部依赖）

Scenario B: 美化已有页面

当用户要求改进现有页面时，按以下步骤执行：

1. 审查当前页面 — 分析现有设计的优缺点，识别排版、配色、间距、布局等方面的问题
2. 提出改进方案 — 给出具体的修改建议，说明每项改动的原因
3. 逐步实施 — 逐项修改 CSS 和结构，保持改动可追溯
4. 保持功能完整 — 确保所有已有功能和交互不受影响

设计原则速查

需要详细的色彩理论、排版规则、间距系统等指导时，加载 references/design-system.md。

Using Templates

assets/ 目录包含可立即使用的 HTML/CSS 模板。所有模板均为自包含（内联 CSS），无外部依赖。

使用模板的方法：

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）和字间距

这个网页设计技能质量不错，提供了从页面设计到美化改版的完整能力。它内置了完整的设计规范文档和多种可直接使用的页面模板，输出的代码无需外部依赖，可直接运行。主要优点是文档详细、模板专业、考虑了中国用户的中文排版需求；不足是缺少实际案例展示和效果预览。总体适合需要创建网页或美化页面的用户使用。