modern-web-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Modern Web Design Creator

现代网页设计生成器

Build beautiful, responsive websites using modern design principles, Tailwind CSS, and contemporary UI patterns. Creates production-ready code with animations, responsive layouts, and accessibility features.

使用现代设计原则、Tailwind CSS和当代UI模式构建美观的响应式网站。生成具备动画、响应式布局和可访问性功能的生产就绪代码。

When to Use This Skill

何时使用此技能

Use this skill for:

Landing pages and marketing websites
Portfolio and personal brand sites
Business and company websites
SaaS application interfaces
E-commerce product pages
Blog and content sites
Dashboard and admin interfaces

在以下场景使用此技能：

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

Design System Foundation

设计系统基础

Core Principles

核心原则

Mobile-first responsive design with breakpoint optimization
Design tokens for consistent spacing, colors, and typography
Component-based architecture for maintainable code
Accessibility-first development with ARIA labels and semantic HTML
Performance optimization with minimal CSS and efficient animations

具备断点优化的移动优先响应式设计
用于保持间距、颜色和排版一致性的设计令牌
便于代码维护的基于组件的架构
包含ARIA标签和语义化HTML的可访问性优先开发
采用极简CSS和高效动画的性能优化

Style Categories

风格分类

Reference

references/design-systems.md

for complete style specifications:

参考

references/design-systems.md

获取完整的样式规范：

Minimalist Professional

极简专业风

Clean typography with generous whitespace
Neutral color palette with strategic accent colors
Subtle shadows and minimal animations
Focus on content hierarchy and readability

简洁排版搭配充足留白
中性色调搭配策略性强调色
柔和阴影与极简动画
注重内容层级与可读性

Modern SaaS

现代SaaS风

Bold gradients and vibrant colors
Card-based layouts with elevation
Micro-interactions and hover states
Dashboard-style components

大胆渐变与鲜艳色彩
带层次感的卡片式布局
微交互与悬停状态
仪表盘风格组件

Creative Portfolio

创意作品集风

Experimental layouts and grid systems
Bold typography and creative color schemes
Advanced animations and scroll effects
Image-focused design patterns

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

E-commerce Optimized

电商优化风

Product-focused layouts
Trust signals and social proof elements
Conversion-optimized CTAs
Shopping and checkout flows

以产品为核心的布局
信任标识与社交证明元素
优化转化率的CTA（号召性用语）
购物与结账流程

Implementation Workflow

实施工作流

Analyze Requirements: Determine site purpose, target audience, and functionality needs
Select Design Category: Choose appropriate style system from references
Generate Structure: Create semantic HTML with proper heading hierarchy
Apply Styling: Implement Tailwind CSS classes with design system tokens
Add Interactions: Include animations, hover states, and micro-interactions
Optimize Responsive: Ensure mobile-first responsive behavior
Enhance Accessibility: Add ARIA labels, alt text, and keyboard navigation

需求分析：确定网站用途、目标受众与功能需求
选择设计分类：从参考文档中选择合适的样式系统
生成结构：创建具备正确标题层级的语义化HTML
应用样式：使用设计系统令牌实现Tailwind CSS类
添加交互：包含动画、悬停状态与微交互
优化响应式：确保移动优先的响应式表现
增强可访问性：添加ARIA标签、替代文本与键盘导航

Code Generation Standards

代码生成标准

HTML Structure

HTML结构

Semantic HTML5 elements (
```
<header>
```
,
```
<main>
```
,
```
<section>
```
,
```
<article>
```
)
Proper heading hierarchy (h1 → h6)
Accessibility attributes (ARIA, alt text, roles)
Meta tags for SEO and responsive design

语义化HTML5元素（
```
<header>
```
,
```
<main>
```
,
```
<section>
```
,
```
<article>
```
）
正确的标题层级（h1 → h6）
可访问性属性（ARIA、替代文本、角色）
用于SEO和响应式设计的元标签

CSS Framework

CSS框架

Tailwind CSS utility classes for rapid development
Custom CSS for complex animations and unique effects
CSS variables for design token consistency
Mobile-first media queries

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

JavaScript Features

JavaScript功能

Vanilla JavaScript for lightweight interactions
Intersection Observer for scroll animations
Form validation and submission handling
Mobile menu and navigation toggles

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

Component Library

组件库

Load

assets/component-templates.html

for reusable components:

加载

assets/component-templates.html

获取可复用组件：

Navigation Components

导航组件

Responsive header with mobile menu
Sticky navigation with scroll effects
Breadcrumb navigation
Footer with social links

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

Content Sections

内容区块

Hero sections with various layouts
Feature grids and comparison tables
Testimonial carousels
FAQ accordions
Contact forms

多种布局的英雄区块
功能网格与对比表格
推荐语轮播
FAQ手风琴
联系表单

Interactive Elements

交互元素

Animated buttons and CTAs
Image galleries and lightboxes
Progress bars and counters
Modal dialogs and tooltips

带动画的按钮与CTA
图片画廊与灯箱效果
进度条与计数器
模态对话框与工具提示

Advanced Features

高级功能

Animation System

动画系统

CSS transitions for smooth interactions
Keyframe animations for complex movements
Intersection Observer for scroll-triggered effects
Performance-optimized animations

用于平滑交互的CSS过渡
用于复杂运动的关键帧动画
用于滚动触发效果的Intersection Observer
性能优化的动画

Performance Optimization

性能优化

Minimal CSS footprint with utility-first approach
Lazy loading for images and heavy content
Critical CSS inlining for above-fold content
Progressive enhancement strategies

采用工具优先方法实现极简CSS体积
图片与大体积内容的懒加载
首屏内容的关键CSS内联
渐进式增强策略

SEO Foundation

SEO基础

Semantic HTML structure
Meta tags and Open Graph
JSON-LD structured data
Performance optimization for Core Web Vitals

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

Supporting Resources

支持资源

```
references/design-systems.md
```
: Complete style guides and color palettes
```
assets/component-templates.html
```
: Reusable HTML component library
```
scripts/build-tools.js
```
: Optimization and build utilities

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