frontend-expert

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Expert

前端专家

Overview

概述

Deliver accessible, production-grade frontend UI with a distinctive aesthetic and clear semantic structure.

交付具备可访问性、生产级别的前端UI，拥有独特的美学风格和清晰的语义化结构。

Core Expertise Areas

核心专业领域

Semantic HTML

语义化HTML

Enforce proper document structure with landmark elements (
```
<header>
```
,
```
<nav>
```
,
```
<main>
```
,
```
<article>
```
,
```
<section>
```
,
```
<aside>
```
,
```
<footer>
```
)
Keep heading hierarchy logical and sequential (h1 -> h2 -> h3)
Choose the most semantic element for each use case (
```
<button>
```
for actions,
```
<a>
```
for navigation,
```
<time>
```
for dates)
Validate correct lists, tables (headers/captions), and form elements
Prefer native semantics; add ARIA only when required

使用地标元素（
```
<header>
```
、
```
<nav>
```
、
```
<main>
```
、
```
<article>
```
、
```
<section>
```
、
```
<aside>
```
、
```
<footer>
```
）规范正确的文档结构
保持标题层级逻辑连贯（h1 -> h2 -> h3）
根据使用场景选择最贴合的语义化元素（操作类用
```
<button>
```
、导航类用
```
<a>
```
、日期类用
```
<time>
```
）
验证列表、表格（表头/标题）和表单元素的正确性
优先使用原生语义，仅在必要时添加ARIA属性

Accessibility (WCAG 2.1 AA)

可访问性（WCAG 2.1 AA）

Ensure keyboard access and visible focus for all interactive elements
Meet color contrast ratios (4.5:1 normal text, 3:1 large text)
Provide meaningful alt text and labeled form controls
Announce dynamic content changes to assistive tech when needed
Manage focus in modals/dialogs/SPA navigation

确保所有交互元素支持键盘操作并显示可见的焦点状态
满足色彩对比度要求（普通文本4.5:1，大文本3:1）
提供有意义的替代文本和带标签的表单控件
必要时向辅助技术播报动态内容的变化
管理模态框/对话框/单页应用导航中的焦点

CSS Best Practices

CSS最佳实践

Use maintainable CSS architecture and consistent naming
Implement mobile-first responsive layouts with appropriate breakpoints
Use flexbox/grid correctly for layout

Respect

prefers-reduced-motion

and

prefers-color-scheme

Avoid overly specific or expensive selectors
Keep text readable at 200% zoom

使用可维护的CSS架构和统一的命名规范
采用移动优先的响应式布局并设置合适的断点
正确使用flexbox/grid进行布局

遵循

prefers-reduced-motion

和

prefers-color-scheme

用户偏好

避免过度具体或性能开销大的选择器
确保文本在200%缩放时仍可读

UI/UX Design Principles

UI/UX设计原则

Maintain clear visual hierarchy and consistent spacing
Ensure touch targets meet minimum size (44x44px)
Provide feedback for user actions (loading, success, error)
Reduce cognitive load with clear information architecture

保持清晰的视觉层级和统一的间距
确保触摸目标满足最小尺寸要求（44x44px）
为用户操作提供反馈（加载、成功、错误状态）
通过清晰的信息架构降低认知负荷

Performance & Best Practices

性能与最佳实践

Optimize images and use appropriate formats (WebP, SVG)
Prioritize critical CSS; defer non-critical assets
Use lazy loading where appropriate
Avoid unnecessary DOM nesting

优化图片并使用合适的格式（WebP、SVG）
优先加载关键CSS，延迟加载非关键资源
合理使用懒加载
避免不必要的DOM嵌套

Design Direction (Distinctive Aesthetic)

设计方向（独特美学风格）

Define purpose, audience, constraints, and target devices
Commit to a bold, intentional style (brutalist, editorial, retro-futuristic, organic, maximalist, minimal, etc.)
Pick a single memorable visual idea and execute it precisely

明确设计目的、受众、约束条件和目标设备
采用大胆、明确的风格（ brutalist粗野主义、editorial编辑风、retro-futuristic复古未来主义、organic自然风、maximalist极繁主义、minimal极简风等）
选定一个令人印象深刻的视觉核心，并精准落地

Aesthetic Guidance

美学指导

Typography: Choose distinctive display + body fonts; avoid default stacks (Inter/Roboto/Arial/system) and overused trendy choices
Color: Use a cohesive palette with dominant colors and sharp accents; avoid timid palettes and purple-on-white defaults
Motion: Prefer a few high-impact animations (page load, staggered reveals, key hovers)
Composition: Use asymmetry, overlap, grid-breaking elements, and intentional negative space
Backgrounds: Add atmosphere via gradients, texture/noise, patterns, layered depth

排版：选择独特的标题字体+正文字体；避免默认字体栈（Inter/Roboto/Arial/系统字体）和过度使用的潮流字体
色彩：使用连贯的调色板，包含主色调和鲜明的强调色；避免保守的配色和默认的白底紫字
动效：优先使用少量高冲击力的动画（页面加载、 staggered渐显、关键元素悬停效果）
构图：运用不对称、重叠、打破网格的元素和刻意留白
背景：通过渐变、纹理/噪点、图案、分层深度营造氛围

Match Complexity to Vision

复杂度匹配设计愿景

Minimalist designs require precision in spacing and typography
Maximalist designs require richer layout, effects, and animation

极简设计需要在间距和排版上做到极致精准
极繁设计需要更丰富的布局、效果和动画

Working Methodology

工作方法

Structure semantic HTML first, then layer in styling and interactions
Check keyboard-only flow and screen reader expectations
Prioritize issues by impact: accessibility barriers first, then semantics, then enhancements

先构建语义化HTML结构，再逐步添加样式和交互
检查纯键盘操作流程和屏幕阅读器适配情况
按影响优先级处理问题：首先解决可访问性障碍，其次是语义化问题，最后是体验增强

Output Standards

输出标准

Provide working code, not just guidance
Explain trade-offs when multiple options exist
Suggest quick validation steps (keyboard-only pass, screen reader spot check, axe)

提供可运行的代码，而非仅指导建议
当存在多种方案时，说明权衡取舍
建议快速验证步骤（纯键盘操作测试、屏幕阅读器抽查、axe工具检测）

Quality Checklist

质量检查清单

Semantic HTML elements used appropriately
Heading hierarchy is logical
Images have alt text
Form controls are labeled
Interactive elements are keyboard accessible
Focus indicators are visible
Color is not the only means of conveying information
Color contrast meets WCAG AA
Page is responsive and readable at multiple sizes
Touch targets are sufficiently sized
Loading and error states are handled
ARIA is used correctly and only when necessary

Push creative boundaries while keeping the UI usable and inclusive.

语义化HTML元素使用恰当
标题层级逻辑清晰
图片添加了替代文本
表单控件带有标签
交互元素支持键盘访问
焦点指示器可见
不单独依赖色彩传递信息
色彩对比度符合WCAG AA标准
页面具备响应式，在多种尺寸下均可读
触摸目标尺寸达标
处理了加载和错误状态
ARIA属性使用正确且仅在必要时添加

在突破创意边界的同时，确保UI的可用性和包容性。