frontend-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Design Skill

前端设计技能

Capabilities

能力范围

This skill handles:

Page Design - Layouts, hero sections, navigation, footers
Component Design - Buttons, cards, modals, forms, tables
Responsive Design - Mobile-first, breakpoints, fluid layouts
Animations - Transitions, micro-interactions, loading states
Accessibility - WCAG compliance, keyboard navigation, screen readers
Brand Alignment - Color systems, typography, visual consistency

该技能可处理以下需求：

页面设计 - 布局、首屏区域、导航栏、页脚
组件设计 - 按钮、卡片、模态框、表单、表格
响应式设计 - 移动端优先、断点、流式布局
动画效果 - 过渡效果、微交互、加载状态
无障碍访问 - 符合WCAG标准、键盘导航、屏幕阅读器适配
品牌一致性 - 色彩系统、排版、视觉一致性

Activation Triggers

激活触发词

"Design a new page/component"
"Update the UI/UX"
"Make this responsive"
"Improve the visual design"
"Add animations/transitions"
"Fix the mobile layout"
"Style this component"
"Match our brand guidelines"

"设计新页面/组件"
"更新UI/UX"
"实现响应式适配"
"优化视觉设计"
"添加动画/过渡效果"
"修复移动端布局"
"为该组件添加样式"
"匹配我们的品牌规范"

Process

流程

1. Discovery

1. 需求调研

Identify what needs designing (page, component, feature)
Take screenshot of current state (if updating existing)
Ask clarifying questions about requirements
Check for existing design patterns in the project

明确设计需求（页面、组件、功能）
若为迭代现有设计，截取当前状态截图
询问需求细节以明确要求
查看项目中已有的设计模式

2. Design Planning

2. 设计规划

Reference brand guidelines:
```
~/.claude/RAZORVISION_DOCS.md
```
Run through Design Checklist below
Propose design approach with rationale
Consider responsive breakpoints
Plan accessibility requirements
Get user approval before implementing

参考品牌规范：
```
~/.claude/RAZORVISION_DOCS.md
```
执行下方的设计检查清单
提出设计方案并说明理由
考虑响应式断点
规划无障碍访问要求
实施前获取用户确认

Design Checklist (Safe Rules)

设计检查清单（安全准则）

Based on Anthony Hobday's Visual Design Rules.

基于Anthony Hobday的视觉设计准则。

Colors

色彩规范

Near-black/near-white - No pure
```
#000000
```
or
```
#ffffff
```
. Use
```
#0a0a0a
```
and
```
#f5f5f5
```
or similar
Saturate neutrals - Add slight color tint (<5% saturation) to greys for cohesion
Distinct brightness levels - Each color in palette should have noticeably different brightness
Warm OR cool - Pick one temperature for neutrals, don't mix

近黑/近白 - 避免使用纯
```
#000000
```
或
```
#ffffff
```
，推荐使用
```
#0a0a0a
```
和
```
#f5f5f5
```
或类似色值
中性色加饱和度 - 为灰色添加轻微色调（饱和度<5%）以增强协调性
亮度区分明显 - 配色方案中的每种颜色亮度需有显著差异
统一色调 - 中性色选择暖色调或冷色调其一，避免混合使用

Contrast & Hierarchy

对比度与层级

High contrast for important elements - Buttons, CTAs, key content stand out
Lower icon contrast - Icons paired with text should be slightly dimmer (0.8 opacity)
Border contrast - Borders must contrast with BOTH container and background
Container brightness - Keep within 12% of background (dark UI) or 7% (light UI)

重要元素高对比度 - 按钮、CTA、核心内容需突出显示
图标低对比度 - 与文字搭配的图标需适当降低亮度（透明度0.8）
边框对比度 - 边框需与容器及背景均形成对比
容器亮度 - 与背景的亮度差控制在12%以内（深色UI）或7%以内（浅色UI）

Spacing & Layout

间距与布局

8px spacing scale - Use multiples: 8, 16, 24, 32, 48, 64, 96
Outer padding >= inner padding - Container edges need equal or more space than interior gaps
Optical alignment - Align visually, not mathematically (especially icons, shapes)
12-column grid - Flexible for 1, 2, 3, 4-column layouts

8px间距基准 - 使用8的倍数：8、16、24、32、48、64、96
外间距≥内间距 - 容器边缘的间距需大于或等于内部元素间距
视觉对齐 - 以视觉效果为准进行对齐，而非严格数学对齐（尤其适用于图标、图形）
12列网格 - 灵活支持1、2、3、4列布局

Typography

排版

Max 2 typefaces - One for headings, one for body
16px minimum body text - Never smaller for readability
~70 character line length - Use max-width to constrain (60-80 chars ideal)
Adjust letter-spacing - Tighter for large text, looser for small text

最多2种字体 - 一种用于标题，一种用于正文
正文字体最小16px - 为保证可读性，不得使用更小字号
行长度约70字符 - 使用max-width限制（理想范围60-80字符）
调整字间距 - 大字号字间距收紧，小字号字间距放宽

Buttons & Components

按钮与组件

Button padding 2:1 - Horizontal padding should be double vertical
Nested corner radius - Inner radius = outer radius - gap distance

按钮内边距2:1 - 水平内边距应为垂直内边距的2倍
嵌套圆角规则 - 内部圆角半径 = 外部圆角半径 - 间距距离

Dark UI Specific

深色UI专属规范

No shadows - Use borders instead; shadows don't make sense in dark UIs
Closer = lighter - Elements appearing nearer should have lighter values
Consistent depth technique - Pick one approach (borders, subtle bg changes) and stick with it

不使用阴影 - 改用边框；阴影在深色UI中效果不佳
越近越亮 - 视觉上更靠前的元素应使用更浅的色调
统一深度表现方式 - 选择一种方式（边框、轻微背景色变化）并保持一致

Avoid

注意规避

No adjacent hard divides - Don't place multiple edges/borders directly next to each other
No complex on complex - Simple elements on complex backgrounds, or vice versa

避免相邻硬分割 - 不要将多个边框/边缘直接相邻放置
避免复杂叠加 - 简单元素搭配复杂背景，或反之

3. Implementation

3. 实施

Default Brand Standards (RazorVision):

Colors: Light Blue (#43B6E7), Dark Grey (#393939), Light Grey (#F5F5F5)
Typography: Raleway (Bold headings, Regular body)
Principles: Clean, professional, generous whitespace

CSS Approach:

Use CSS variables for theming
Mobile-first responsive design
Prefer Tailwind classes if project uses Tailwind
Fallback to CSS modules or styled-components

Accessibility Checklist:

Semantic HTML elements
ARIA labels where needed
Keyboard navigable
Sufficient color contrast (4.5:1 minimum)
Focus states visible

默认品牌标准（RazorVision）：

色彩：浅蓝色（#43B6E7）、深灰（#393939）、浅灰（#F5F5F5）
排版：Raleway（标题加粗，正文常规）
设计原则：简洁、专业、充足留白

CSS实现方案：

使用CSS variables实现主题定制
采用移动端优先的响应式设计
若项目使用Tailwind，优先使用Tailwind类
备选方案为CSS modules或styled-components

无障碍访问检查清单：

使用语义化HTML元素
必要时添加ARIA标签
支持键盘导航
色彩对比度达标（最低4.5:1）
焦点状态可见

4. Verification

4. 验证

Take after screenshot
Test responsive at: 320px, 768px, 1024px, 1440px
Verify accessibility with browser tools
Check animations don't cause motion sickness (prefers-reduced-motion)
Compare against design requirements

截取实施后截图
在以下尺寸测试响应式效果：320px、768px、1024px、1440px
使用浏览器工具验证无障碍访问合规性
检查动画是否会引发晕动症（遵循prefers-reduced-motion设置）
对照设计需求进行验证

Reference Files

参考文件

Brand guide:
```
~/.claude/RAZORVISION_DOCS.md
```
Logo assets:
```
~/.claude/rv-assets/
```

品牌指南：
```
~/.claude/RAZORVISION_DOCS.md
```
Logo资源：
```
~/.claude/rv-assets/
```

Common Patterns

通用模式

Responsive Breakpoints

响应式断点

css

/* Mobile first */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }

css

/* Mobile first */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }

CSS Variables Setup

CSS变量配置

css

:root {
  --color-primary: #43B6E7;
  --color-text: #393939;
  --color-bg: #F5F5F5;
  --font-family: 'Raleway', sans-serif;
}

css

:root {
  --color-primary: #43B6E7;
  --color-text: #393939;
  --color-bg: #F5F5F5;
  --font-family: 'Raleway', sans-serif;
}

Animation Best Practices

动画最佳实践

css

.element {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .element { transition: none; }
}

css

.element {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .element { transition: none; }
}