frontend-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Design

前端设计

Orchestrator for creating distinctive, production-grade interfaces.

用于创建特色鲜明的生产级界面的协调工具。

Skill Routing

技能路由

Based on needs, invoke specialized skills:

Need	Skill	Content
Design direction	`frontend-design-philosophy`	Aesthetic extremes, anti-patterns
CSS implementation	`frontend-css-patterns`	Typography, color, motion, spatial
React/Vue patterns	See `references/react-vue.md`	Framer Motion, Vue Transitions
Rails/Hotwire	See `references/rails-hotwire.md`	ViewComponent, Stimulus, Turbo

根据需求调用专属技能：

需求	技能	内容
设计方向	`frontend-design-philosophy`	美学风格极值、反模式
CSS 实现	`frontend-css-patterns`	排版、色彩、动效、空间布局
React/Vue 模式	参见 `references/react-vue.md`	Framer Motion、Vue Transitions
Rails/Hotwire	参见 `references/rails-hotwire.md`	ViewComponent、Stimulus、Turbo

Framework Resources

框架资源

React/Vue

See references/react-vue.md for:

Framer Motion staggered animations
Vue Transition/TransitionGroup patterns
Component architecture with design tokens

参见 references/react-vue.md 获取：

Framer Motion 交错动画
Vue Transition/TransitionGroup 模式
结合设计令牌的组件架构

Rails/Hotwire

See references/rails-hotwire.md for:

ViewComponent with sidecar styles
Stimulus reveal/toggle controllers
Turbo Frames & Streams with animations
ERB layout patterns with content_for
CSS design tokens and import order

参见 references/rails-hotwire.md 获取：

附带侧栏样式的 ViewComponent
Stimulus 显示/切换控制器
带有动画的 Turbo Frames & Streams
使用 content_for 的 ERB 布局模式
CSS 设计令牌与导入顺序

Implementation Resources

实现资源

Resource	Content
ui-implementation-guide.md	Typography rules, color, forms, buttons, tables
motion-patterns.md	Page load, scroll triggers, hover, performance
css-polish-tips.md	Accessibility, scroll, focus, defensive CSS
landing-page-design.md	Section design, palettes, typography pairings

资源	内容
ui-implementation-guide.md	排版规则、色彩、表单、按钮、表格
motion-patterns.md	页面加载、滚动触发、悬停效果、性能优化
css-polish-tips.md	无障碍优化、滚动、焦点、防御性 CSS
landing-page-design.md	区块设计、调色板、排版搭配

Workflow

工作流程

1. Clarify design direction
   - Invoke `frontend-design-philosophy` for aesthetic guidance
   - User picks: brutalist, minimalist, luxury, playful, etc.

2. Implement CSS foundation
   - Invoke `frontend-css-patterns` for typography, color, motion
   - Customize Tailwind or write CSS variables

3. Apply framework patterns
   - React/Vue: Use references/react-vue.md
   - Rails/Hotwire: Use references/rails-hotwire.md

4. Polish and validate
   - Use references/css-polish-tips.md for accessibility
   - Use references/motion-patterns.md for animation
   - Run validation checklist from philosophy skill

1. 明确设计方向
   - 调用 `frontend-design-philosophy` 获取美学指导
   - 用户选择：粗犷风、极简风、奢华风、趣味风等

2. 实现 CSS 基础
   - 调用 `frontend-css-patterns` 获取排版、色彩、动效相关内容
   - 自定义 Tailwind 或编写 CSS 变量

3. 应用框架模式
   - React/Vue：参考 references/react-vue.md
   - Rails/Hotwire：参考 references/rails-hotwire.md

4. 打磨与验证
   - 使用 references/css-polish-tips.md 优化无障碍性
   - 使用 references/motion-patterns.md 优化动画
   - 运行来自设计理念技能的验证清单

Quick Reference

快速参考

Web Interface Standards

Web 界面标准

See references/web-interface-standards.md for:

Keyboard operability requirements (WAI-ARIA widget patterns)
Touch target sizing (44px mobile, 24px desktop)
Form behavior (Enter submission, autocomplete, mobile keyboards)
Animation accessibility (
```
prefers-reduced-motion
```
)
Network performance budgets (POST < 500ms, virtualization thresholds)

Validation Checklist:

Distinctive typography (not default fonts)
Intentional, limited color palette
Layout breaks predictable patterns
Motion serves purpose
Clear design direction
Responsive quality maintained
Accessibility preserved

参见 references/web-interface-standards.md 获取：

键盘可操作性要求（WAI-ARIA 组件模式）
触控目标尺寸（移动端44px，桌面端24px）
表单行为（回车提交、自动补全、移动端键盘适配）
动画无障碍设置（
```
prefers-reduced-motion
```
）
网络性能预算（POST请求<500ms，虚拟化阈值）

验证清单：

使用特色鲜明的排版（非默认字体）
采用有意设计的有限调色板
布局打破可预测的常规模式
动效具备实际用途
设计方向清晰明确
响应式效果保持高质量
无障碍性得到保障