用途
Frontend Designer 是一个面向前端设计师与开发者的综合技能，目标是帮助构建美观、可访问且高性能的用户界面，并遵循现代前端最佳实践。它适用于组件设计与开发、设计系统落地、响应式设计、无障碍设计、现代 CSS 应用、性能优化、框架模式以及从设计到代码的工作流。
主要能力
该技能覆盖以下方面：
- 组件设计与开发：构建可复用、可访问的组件。
- 设计系统：实现设计令牌、模式与文档。
- 响应式设计：移动优先、流式布局。
- 无障碍（WCAG 2.1）：包容性设计模式。
- 现代 CSS：Flexbox、Grid、自定义属性。
- 性能优化：快速、高效的前端。
- 框架模式：React、Vue、Svelte 最佳实践。
- 设计到代码：Figma 到生产工作流。
核心原则
- 无障碍优先：WCAG 2.1 AA 最低标准、语义化 HTML、键盘导航、屏幕阅读器支持、焦点管理、颜色对比度。
- 移动优先响应式：从移动端（320px）开始、渐进增强、流式排版、灵活布局、适合触摸的目标尺寸。
- 性能默认：最小化 CSS/JS、懒加载、优化图片、关键 CSS、tree shaking。
- 组件驱动：原子设计方法论、可复用组件、基于 props 的定制、组合优于继承。
- 设计系统对齐：设计令牌、一致的间距、排版比例、调色板、组件库。
使用方式
资料中提供了若干脚本命令用于辅助工作流：
- 生成组件：
./scripts/generate_component.sh Button，会创建 TypeScript/JSX 文件、CSS 模块、测试文件、Storybook 故事和无障碍检查。 - 设计系统初始化：
./scripts/setup_design_system.sh，会创建设计令牌（CSS 自定义属性）、基础样式、组件模板和文档结构。 - 无障碍审计：
./scripts/audit_accessibility.sh，检查颜色对比度、键盘导航、ARIA 属性、语义化 HTML 和焦点管理。
组件模式示例
资料中给出了按钮、卡片、表单输入等组件的实现模式，均包含 TypeScript 接口定义与配套 CSS。例如按钮组件支持 variant（primary/secondary/ghost）、size（sm/md/lg）、disabled、loading 等属性，并使用设计令牌控制样式，同时设置最小高度 44px 以满足 WCAG 触摸目标要求，并提供 focus-visible 焦点样式。卡片组件支持 elevated/outlined/filled 变体、padding 选项和 interactive 交互模式。表单输入组件包含 label、error、hint、required 等属性，并通过 aria-describedby、aria-invalid、role="alert" 等实现无障碍。
设计令牌
资料提供了一套完整的 CSS 自定义属性设计令牌，包括：颜色（主色、表面色、边框色、语义色）、间距比例（基于 8px）、排版比例、字体族、行高、圆角、阴影、焦点环和过渡。同时包含深色模式支持（通过 prefers-color-scheme 媒体查询覆盖表面色、边框色等）。
响应式与无障碍模式
响应式方面包含移动优先断点（48rem、64rem）、流式排版（clamp）、响应式网格（auto-fit、12 列网格）。无障碍方面包含跳转链接（Skip Link）、模态框焦点陷阱与焦点恢复、图标按钮的 aria-label、加载按钮的 aria-busy 与 aria-live 等模式。
性能与现代 CSS
性能优化涵盖关键 CSS 内联、图片懒加载（loading="lazy"、decoding="async"）、代码分割（React lazy + Suspense）。现代 CSS 技术涵盖容器查询（container queries）、Grid auto-fit、自定义属性主题切换。
组件库结构
资料给出了推荐的目录结构，包含 components（每个组件含 tsx、css、test、stories 文件）、tokens（colors、spacing、typography 等 CSS）、utils（a11y、responsive）和入口文件。
适用场景
适合需要系统化构建前端组件库、落地设计系统、提升无障碍合规性、优化响应式表现和前端性能的设计师与开发者团队。
限制
资料未提供该技能的收费、价格、平台支持范围、具体安装方式或版本信息，这些内容暂未提供。