用途
Modern Web Design Creator 用于构建美观、响应式的网站，采用现代设计原则、Tailwind CSS 和当代 UI 模式，生成可直接用于生产的代码，包含动画、响应式布局和无障碍特性。
适用场景包括：
- 落地页和营销网站
- 作品集和个人品牌网站
- 企业和公司网站
- SaaS 应用界面
- 电商产品页
- 博客和内容网站
- 仪表盘和管理界面
设计系统基础
核心原则：
- 移动优先的响应式设计，带断点优化
- 使用设计令牌保证间距、颜色和排版的一致性
- 基于组件的架构，便于代码维护
- 无障碍优先开发，使用 ARIA 标签和语义化 HTML
- 性能优化，最小化 CSS 并采用高效动画
风格类别（详见 references/design-systems.md）：
- 极简专业：干净的排版与充足留白，中性色调配策略性强调色，细微阴影与极简动画，注重内容层级与可读性。
- 现代 SaaS：大胆渐变与鲜明色彩，带层次的卡片式布局，微交互与悬停状态，仪表盘风格组件。
- 创意作品集：实验性布局与网格系统，大胆排版与创意配色，高级动画与滚动效果，以图像为核心的设计模式。
- 电商优化：以产品为核心的布局，信任信号与社会证明元素，转化优化的 CTA，购物与结账流程。
实施工作流
- 分析需求：确定网站用途、目标受众和功能需求
- 选择设计类别：从参考中选择合适的风格系统
- 生成结构：创建语义化 HTML，具备正确的标题层级
- 应用样式：使用设计系统令牌实现 Tailwind CSS 类
- 添加交互：包含动画、悬停状态和微交互
- 优化响应式：确保移动优先的响应式行为
- 增强无障碍：添加 ARIA 标签、替代文本和键盘导航
代码生成标准
HTML 结构：
- 语义化 HTML5 元素（<header>、<main>、<section>、<article>）
- 正确的标题层级（h1 → h6）
- 无障碍属性（ARIA、替代文本、角色）
- 用于 SEO 和响应式设计的元标签
CSS 框架：
- 使用 Tailwind CSS 工具类进行快速开发
- 复杂动画和独特效果使用自定义 CSS
- 使用 CSS 变量保证设计令牌一致性
- 移动优先的媒体查询
JavaScript 特性：
- 使用原生 JavaScript 实现轻量交互
- 使用 Intersection Observer 实现滚动动画
- 表单验证和提交处理
- 移动菜单和导航切换
组件库
加载 assets/component-templates.html 获取可复用组件：
导航组件：
- 带移动菜单的响应式页头
- 带滚动效果的粘性导航
- 面包屑导航
- 带社交链接的页脚
内容区块：
- 多种布局的 Hero 区块
- 功能网格和对比表格
- 推荐语轮播
- FAQ 手风琴
- 联系表单
交互元素：
- 动画按钮和 CTA
- 图片画廊和灯箱
- 进度条和计数器
- 模态对话框和工具提示
高级特性
动画系统：
- 使用 CSS 过渡实现平滑交互
- 使用关键帧动画实现复杂运动
- 使用 Intersection Observer 实现滚动触发效果
- 性能优化的动画
性能优化：
- 采用工具优先方法最小化 CSS 体积
- 对图片和重型内容进行懒加载
- 首屏内容的关键 CSS 内联
- 渐进增强策略
SEO 基础：
- 语义化 HTML 结构
- 元标签和 Open Graph
- JSON-LD 结构化数据
- 针对 Core Web Vitals 的性能优化
配套资源
- references/design-systems.md：完整风格指南和调色板
- assets/component-templates.html：可复用 HTML 组件库
- scripts/build-tools.js：优化和构建工具
限制
资料未提供该技能的具体收费、价格、平台支持范围、实际效果数据或详细使用步骤，以上内容暂未提供。