Back to Details

frontend-ui-ux-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend UI/UX Design

前端UI/UX设计

Overview

概述

This skill enables creation of production-ready frontend UI/UX designs from research through implementation. Follow a structured design process that balances user needs, business goals, technical constraints, and accessibility requirements.
该技能支持从调研到落地的全流程可投产前端UI/UX设计。遵循结构化设计流程，平衡用户需求、业务目标、技术限制与无障碍要求。

Design Workflow

设计流程

1. Understand Requirements

1. 需求理解

Gather Context:
  • Project goals and success metrics
  • Target audience and user personas
  • Technical constraints (frameworks, browsers, devices)
  • Brand guidelines and design language
  • Accessibility requirements (WCAG level)
Clarify Scope:
  • Type of deliverable (wireframes, mockups, design system, component library)
  • Fidelity level (low, medium, high)
  • Responsive breakpoints needed
  • Browser and device support
收集背景信息：
  • 项目目标与成功指标
  • 目标受众与用户画像
  • 技术限制（框架、浏览器、设备）
  • 品牌规范与设计语言
  • 无障碍要求（WCAG等级）
明确范围：
  • 交付物类型（线框图、高保真原型、设计系统、组件库）
  • 原型保真度（低、中、高）
  • 所需响应式断点
  • 浏览器与设备支持范围

2. Research & Strategy

2. 调研与策略

User Research:
  • Analyze user needs, goals, and pain points
  • Review existing analytics or user feedback
  • Identify key user journeys and scenarios
  • Define information architecture
For complete research process: See uiux-design-process.md for detailed research, personas, journey mapping, and information architecture guidelines.
用户调研：
  • 分析用户需求、目标与痛点
  • 复盘现有数据分析结果或用户反馈
  • 梳理核心用户旅程与场景
  • 定义信息架构
完整调研流程参考：查看uiux-design-process.md获取调研、用户画像、旅程地图与信息架构的详细指南。

3. Design & Prototype

3. 设计与原型制作

Create Wireframes:
  • Start with low-fidelity layouts
  • Focus on content hierarchy and structure
  • Define user flows for key tasks
  • Iterate based on feedback
Apply Visual Design:
  • Define color palette (primary, secondary, semantic colors)
  • Establish typography scale and spacing system
  • Design components with variants and states
  • Ensure visual hierarchy and consistency
For design principles: See design-principles.md for visual hierarchy, consistency, simplicity, feedback, and error prevention guidelines.
For design systems: See design-systems.md when building comprehensive design systems with design tokens, governance, and documentation.
创建线框图：
  • 从低保真布局开始
  • 聚焦内容层级与结构
  • 定义核心任务的用户流程
  • 根据反馈迭代优化
视觉设计落地：
  • 定义调色板（主色、辅助色、语义色）
  • 建立字体层级与间距系统
  • 设计带变体与状态的组件
  • 确保视觉层级与一致性
设计原则参考：查看design-principles.md获取视觉层级、一致性、简洁性、反馈机制与错误预防的相关指南。
设计系统参考：构建包含设计令牌、治理规则与文档的完整设计系统时，查看design-systems.md。

4. Ensure Accessibility

4. 无障碍保障

WCAG Compliance:
  • Minimum contrast ratios (4.5:1 for text, 3:1 for large text/UI)
  • Keyboard navigation support
  • Screen reader compatibility (semantic HTML, ARIA labels)
  • Focus indicators and skip links
  • Alternative text for images
For complete accessibility guidance: See accessibility-guide.md for WCAG 2.1/2.2 standards, ARIA patterns, keyboard navigation, testing tools, and compliance checklists.
WCAG合规要求：
  • 最低对比度（文本4.5:1，大文本/UI元素3:1）
  • 支持键盘导航
  • 屏幕阅读器兼容性（语义化HTML、ARIA标签）
  • 焦点指示器与跳转链接
  • 图片替代文本
完整无障碍指南参考：查看accessibility-guide.md获取WCAG 2.1/2.2标准、ARIA模式、键盘导航、测试工具与合规检查表。

5. Design Responsive Layouts

5. 响应式布局设计

Mobile-First Approach:
  • Start with mobile design (320px minimum)
  • Progressively enhance for tablets (768px+)
  • Optimize for desktop (1024px+, 1440px+)
  • Use fluid grids and flexible images
  • Apply appropriate layout patterns
For responsive patterns: See responsive-design.md for breakpoints, layout patterns (fluid grid, column drop, off-canvas), responsive navigation, typography, images, tables, forms, and container queries.
移动优先方法：
  • 从移动端设计开始（最小320px）
  • 逐步适配平板设备（768px+）
  • 优化桌面端体验（1024px+、1440px+）
  • 使用流式网格与弹性图片
  • 应用合适的布局模式
响应式模式参考：查看responsive-design.md获取断点设置、布局模式（流式网格、列折叠、画布外导航）、响应式导航、字体、图片、表格、表单与容器查询的相关内容。

6. Build Component Libraries

6. 组件库构建

Component Design:
  • Design atomic components (buttons, inputs, icons)
  • Create molecule components (form fields, cards, menus)
  • Build organism components (headers, forms, sections)
  • Define component variants, states, and props
  • Document component usage patterns
For component details: See component-library.md and component-patterns.md for comprehensive component catalogs with specifications, variants, states, and usage guidelines.
组件设计：
  • 设计原子组件（按钮、输入框、图标）
  • 创建分子组件（表单域、卡片、菜单）
  • 构建有机体组件（页头、表单、区块）
  • 定义组件变体、状态与属性
  • 文档化组件使用模式
组件细节参考：查看component-library.md与component-patterns.md获取包含规范、变体、状态与使用指南的完整组件目录。

7. Optimize Performance

7. 性能优化

Performance Considerations:
  • Optimize images (WebP/AVIF, lazy loading, responsive images)
  • Minimize CSS/JS bundle sizes
  • Implement critical CSS for above-the-fold content
  • Use efficient animations (transform, opacity)
  • Monitor Core Web Vitals (LCP, FID, CLS)
For optimization details: See performance-optimization.md for image optimization, code splitting, caching strategies, and performance budgets.
性能考量要点：
  • 图片优化（WebP/AVIF格式、懒加载、响应式图片）
  • 最小化CSS/JS包体积
  • 为首屏内容实现关键CSS
  • 使用高效动画（transform、opacity属性）
  • 监控Core Web Vitals指标（LCP、FID、CLS）
优化细节参考：查看performance-optimization.md获取图片优化、代码分割、缓存策略与性能预算的相关内容。

8. Document & Handoff

8. 文档与交付

Design Deliverables:
  • Design specifications (colors, typography, spacing)
  • Component documentation with variants
  • Responsive breakpoint designs
  • Accessibility report and compliance checklist
  • Implementation guidelines and design tokens
For output format: See output-format.md for structured deliverable formats including design briefs, wireframes, visual designs, component libraries, and developer handoff materials.
设计交付物：
  • 设计规范（颜色、字体、间距）
  • 带变体的组件文档
  • 响应式断点设计方案
  • 无障碍报告与合规检查表
  • 实施指南与设计令牌
输出格式参考：查看output-format.md获取结构化交付物格式，包括设计 brief、线框图、视觉设计、组件库与开发者交付材料。

Quick Reference

快速参考

When to Load References

何时加载参考文档

  • uiux-design-process.md - Full design process from research through prototyping and user testing
  • design-principles.md - Core design principles (hierarchy, consistency, simplicity, feedback)
  • design-systems.md - Building comprehensive design systems with tokens and governance
  • accessibility-guide.md - WCAG compliance, ARIA patterns, keyboard navigation, testing
  • responsive-design.md - Breakpoints, layout patterns, responsive components
  • component-library.md - Atomic/molecular component catalog with specifications
  • component-patterns.md - Component patterns (forms, navigation, data display, feedback)
  • performance-optimization.md - Image optimization, code splitting, Core Web Vitals
  • design-tools-and-resources.md - Design tools, frameworks, icon libraries, resources
  • output-format.md - Structured deliverable formats for handoff
  • examples.md - Real-world design examples and patterns
  • design-checklist.md - Quality checklist before finalizing designs
  • uiux-design-process.md - 从调研到原型制作与用户测试的完整设计流程
  • design-principles.md - 核心设计原则（层级、一致性、简洁性、反馈）
  • design-systems.md - 构建包含令牌与治理规则的完整设计系统
  • accessibility-guide.md - WCAG合规、ARIA模式、键盘导航、测试
  • responsive-design.md - 断点、布局模式、响应式组件
  • component-library.md - 原子/分子组件目录与规范
  • component-patterns.md - 组件模式（表单、导航、数据展示、反馈）
  • performance-optimization.md - 图片优化、代码分割、Core Web Vitals
  • design-tools-and-resources.md - 设计工具、框架、图标库、资源
  • output-format.md - 结构化交付物格式
  • examples.md - 真实世界设计案例与模式
  • design-checklist.md - 最终定稿前的质量检查表

Key Principles

核心原则

1. User-Centered Design
  • Always start with user needs and goals
  • Validate assumptions through research and testing
  • Prioritize usability over aesthetics
2. Accessibility First
  • Design for all users, including those with disabilities
  • Follow WCAG 2.1 AA standards minimum
  • Test with keyboard navigation and screen readers
3. Mobile-First Responsive
  • Start with smallest screen sizes
  • Progressively enhance for larger screens
  • Ensure touch-friendly interactions (44x44px minimum)
4. Design System Thinking
  • Build reusable, consistent components
  • Document patterns and usage guidelines
  • Maintain design token systems
5. Performance Matters
  • Optimize images and assets
  • Keep bundle sizes small
  • Monitor and improve Core Web Vitals
6. Iterative Process
  • Start with low-fidelity, iterate to high-fidelity
  • Gather feedback early and often
  • Refine based on user testing and metrics
1. 用户中心设计
  • 始终从用户需求与目标出发
  • 通过调研与测试验证假设
  • 可用性优先于美观性
2. 无障碍优先
  • 为所有用户设计，包括残障用户
  • 至少遵循WCAG 2.1 AA标准
  • 通过键盘导航与屏幕阅读器测试
3. 移动优先的响应式设计
  • 从最小屏幕尺寸开始
  • 逐步增强适配大屏幕
  • 确保触控友好的交互（最小44x44px）
4. 设计系统思维
  • 构建可复用、一致性的组件
  • 文档化模式与使用指南
  • 维护设计令牌系统
5. 性能至关重要
  • 优化图片与资源
  • 保持包体积精简
  • 监控并优化Core Web Vitals
6. 迭代式流程
  • 从低保真开始，逐步迭代到高保真
  • 尽早并频繁收集反馈
  • 根据用户测试与数据指标优化