modern-web-design

现代网页设计创作

运用现代设计原则、Tailwind CSS 和当代 UI 模式，构建美观且响应式的网站。生成可用于生产环境的代码，包含动画、响应式布局和无障碍功能。

何时使用此技能

适用于：

• 落地页和营销网站
• 作品集和个人品牌网站
• 企业和公司网站
• SaaS 应用界面
• 电商产品页面
• 博客和内容网站
• 仪表板和管理界面

设计系统基础

核心原则

• 移动优先的响应式设计，并针对断点进行优化
• 使用设计令牌统一间距、颜色和字体
• 采用基于组件的架构，便于维护代码
• 无障碍优先，使用 ARIA 标签和语义化 HTML
• 性能优化，尽量减少 CSS 并使用高效动画

风格类别

完整的风格规范请参阅 references/design-systems.md：

极简专业风格

• 清晰的字体排版和充足的留白
• 中性色调搭配恰到好处的强调色
• 细腻的阴影和简约的动画
• 注重内容层级和可读性

现代 SaaS 风格

• 醒目的渐变和鲜艳的色彩
• 具有纵深效果的卡片式布局
• 微交互和悬停状态
• 仪表板风格的组件

创意作品集风格

• 实验性布局和网格系统
• 醒目的字体排版和富有创意的配色方案
• 高级动画和滚动效果
• 以图片为核心的设计模式

电商优化风格

• 以产品为核心的布局
• 信任标识和社会认同元素
• 针对转化率优化的行动号召
• 购物和结账流程

实施工作流

1. 分析需求：确定网站用途、目标受众和功能需求
2. 选择设计类别：从参考资料中选择合适的风格系统
3. 生成结构：创建语义化 HTML，并设置恰当的标题层级
4. 应用样式：使用设计系统令牌实现 Tailwind CSS 类
5. 添加交互：加入动画、悬停状态和微交互
6. 优化响应式布局：确保移动优先的响应式表现
7. 增强无障碍性：添加 ARIA 标签、替代文本和键盘导航

代码生成规范

HTML 结构

• 使用语义化 HTML5 元素（<header>、<main>、<section>、<article>）
• 设置恰当的标题层级（h1 → h6）
• 添加无障碍属性（ARIA、替代文本、角色）
• 添加用于 SEO 和响应式设计的元标签

CSS 框架

• 使用 Tailwind CSS 实用类快速开发
• 使用自定义 CSS 实现复杂动画和独特效果
• 使用 CSS 变量确保设计令牌的一致性
• 使用移动优先的媒体查询

JavaScript 功能

• 使用原生 JavaScript 实现轻量级交互
• 使用 Intersection Observer 实现滚动动画
• 处理表单验证和提交
• 实现移动端菜单和导航切换

组件库

加载 assets/component-templates.html 以使用可复用组件：

导航组件

• 带移动端菜单的响应式页眉
• 带滚动效果的粘性导航
• 面包屑导航
• 带社交链接的页脚

内容区块

• 多种布局的主视觉区块
• 功能网格和对比表格
• 推荐语轮播
• FAQ 手风琴
• 联系表单

交互元素

• 动画按钮和行动号召
• 图片画廊和灯箱
• 进度条和计数器
• 模态对话框和工具提示

高级功能

动画系统

• 使用 CSS 过渡实现流畅交互
• 使用关键帧动画实现复杂动作
• 使用 Intersection Observer 实现滚动触发效果
• 优化动画性能

性能优化

• 采用实用类优先的方法，尽量减少 CSS 体积
• 对图片和大型内容进行延迟加载
• 为首屏内容内联关键 CSS
• 采用渐进增强策略

SEO 基础

• 语义化 HTML 结构
• Meta 标签和 Open Graph
• JSON-LD 结构化数据
• 针对 Core Web Vitals 的性能优化

支持资源

• references/design-systems.md：完整的样式指南和调色板
• assets/component-templates.html：可复用的 HTML 组件库
• scripts/build-tools.js：优化和构建工具