music-theory-visual-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Music Theory Visual Design

音乐理论应用视觉设计

Overview

概述

This skill provides visual design guidelines for building UI components in the music theory application. It ensures consistent typography, color usage, spacing, and animations across all components while maintaining the application's distinctive aesthetic: modern, clean, with musical sophistication.

本指南为音乐理论应用的UI组件构建提供视觉设计规范，确保所有组件在排版、色彩使用、间距和动画上保持一致性，同时保留应用独特的美学风格：现代、简洁且兼具音乐质感。

Design Philosophy

设计理念

Create interfaces that balance professional elegance with approachability. Think "concert hall meets digital instrument." Prioritize visual clarity while incorporating subtle musical character through the custom color system.

打造兼具专业优雅与亲和力的界面，想象「音乐厅邂逅数字化乐器」的场景。在通过自定义色彩系统融入微妙音乐特质的同时，优先保证视觉清晰度。

Typography

排版规范

Font Families:

Use
```
font-sans
```
(Noto Sans JP) for UI elements
Use
```
font-serif
```
(Noto Serif JP) sparingly for decorative text

Weight Contrast:

Headings:
```
font-bold
```
(700) or
```
font-extrabold
```
(800)
Body text:
```
font-normal
```
(400) or
```
font-light
```
(300)
Emphasis: Extreme contrast (e.g.,
```
font-extralight
```
(200) paired with
```
font-black
```
(900))

Size Hierarchy:

Small labels:
```
text-xs
```
(0.75rem)
Standard text:
```
text-sm
```
(0.875rem)
Headings:
```
text-base
```
(1rem) →
```
text-lg
```
→
```
text-xl
```

字体家族：

UI元素使用
```
font-sans
```
（Noto Sans JP）
装饰性文本少量使用
```
font-serif
```
（Noto Serif JP）

字重对比：

标题：
```
font-bold
```
（700）或
```
font-extrabold
```
（800）
正文：
```
font-normal
```
（400）或
```
font-light
```
（300）
强调内容：极端对比（例如
```
font-extralight
```
（200）搭配
```
font-black
```
（900））

尺寸层级：

小标签：
```
text-xs
```
（0.75rem）
标准文本：
```
text-sm
```
（0.875rem）
标题：
```
text-base
```
（1rem）→
```
text-lg
```
→
```
text-xl
```

Color System

色彩系统

Use CSS Variables (not hex codes):

Backgrounds:
```
bg-background
```
,
```
bg-card
```
,
```
bg-panel
```
Text:
```
text-foreground
```
,
```
text-muted-foreground
```
Borders:
```
border-border
```
Interactive:
```
bg-accent
```
,
```
text-accent-foreground
```
Selected:
```
bg-selected
```

Musical Color System (84 colors):

For pitch-specific elements:
```
bg-key-c-lydian
```
,
```
text-key-g-dorian
```
Pattern:
```
bg-key-{pitch}-{mode}
```
(12 pitches × 7 modes)
Use sparingly for music-theory-specific visualizations

Transparency for Layering:

Subtle overlays:
```
bg-white/10
```
,
```
bg-black/5
```
Hover states:
```
hover:bg-white/25
```
Selected states:
```
bg-white/50
```

使用CSS变量（而非十六进制代码）：

背景色：
```
bg-background
```
、
```
bg-card
```
、
```
bg-panel
```
文本色：
```
text-foreground
```
、
```
text-muted-foreground
```
边框色：
```
border-border
```
交互元素：
```
bg-accent
```
、
```
text-accent-foreground
```
选中状态：
```
bg-selected
```

音乐色彩系统（84种颜色）：

音高专属元素使用：
```
bg-key-c-lydian
```
、
```
text-key-g-dorian
```
命名规则：
```
bg-key-{pitch}-{mode}
```
（12种音高 × 7种调式）
仅在音乐理论相关可视化场景中少量使用

分层透明度设置：

微妙叠加层：
```
bg-white/10
```
、
```
bg-black/5
```
悬停状态：
```
hover:bg-white/25
```
选中状态：
```
bg-white/50
```

Spacing & Layout

间距与布局

Consistent Spacing:

Internal padding:
```
p-4
```
(16px) standard
Vertical stacking:
```
space-y-4
```
Grid gaps:
```
gap-4
```

Common Patterns:

Card:

bg-card border border-border rounded-lg p-4 shadow-sm

Panel:
```
bg-panel space-y-4
```
Full-height content:
```
h-[var(--content-height-full)]
```

Responsive:

Mobile-first: Apply styles without prefix
Desktop: Use
```
md:
```
prefix (768px+)

统一间距规范：

内部内边距：标准为
```
p-4
```
（16px）
垂直堆叠：
```
space-y-4
```
网格间距：
```
gap-4
```

常见布局模式：

卡片：

bg-card border border-border rounded-lg p-4 shadow-sm

面板：
```
bg-panel space-y-4
```
全屏内容：
```
h-[var(--content-height-full)]
```

响应式设计：

移动端优先：无需前缀即可应用样式
桌面端：使用
```
md:
```
前缀（适配768px及以上屏幕）

Animation & Motion

动画与动效

Framer Motion Basics:

tsx

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
>

Hover Effects:

Subtle:

hover:bg-accent hover:text-accent-foreground transition-colors

Scale:
```
hover:scale-105 transition-transform
```

State Transitions:

Always use
```
transition-colors
```
or
```
transition-transform
```
for smooth changes
Keep durations short (0.2-0.3s)

Framer Motion基础用法：

tsx

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
>

悬停效果：

微妙变化：

hover:bg-accent hover:text-accent-foreground transition-colors

缩放效果：
```
hover:scale-105 transition-transform
```

状态过渡：

状态变化时始终使用
```
transition-colors
```
或
```
transition-transform
```
实现平滑过渡
过渡时长保持较短（0.2-0.3秒）

Tailwind CSS Conventions

Tailwind CSS 约定

className Management:

Always use

twMerge

for component className props:

tsx

className={twMerge('bg-card border rounded p-4', className)}

Add

clsx

only when conditional logic is needed:

tsx

className={twMerge(clsx('base', isActive && 'text-primary'), className)}

Responsibility Separation:

Parent (external): Size (
```
w-
```
,
```
h-
```
), position (
```
m-
```
,
```
p-
```
), responsive (
```
md:
```
)
Child (internal): Appearance (
```
bg-
```
,
```
text-
```
,
```
border-
```
), internal layout (
```
flex
```
,
```
grid
```
)

Example Component:

tsx

interface ComponentProps {
  className?: string;
}

export const Component: React.FC<ComponentProps> = ({ className }) => {
  return <div className={twMerge('bg-card rounded-lg border p-4', className)}>{/* content */}</div>;
};

className管理：

组件的className属性始终使用

twMerge

：

tsx

className={twMerge('bg-card border rounded p-4', className)}

仅当需要条件逻辑时添加

clsx

：

tsx

className={twMerge(clsx('base', isActive && 'text-primary'), className)}

职责分离：

父组件（外部）：尺寸（
```
w-
```
、
```
h-
```
）、定位（
```
m-
```
、
```
p-
```
）、响应式（
```
md:
```
）
子组件（内部）：外观（
```
bg-
```
、
```
text-
```
、
```
border-
```
）、内部布局（
```
flex
```
、
```
grid
```
）

组件示例：

tsx

interface ComponentProps {
  className?: string;
}

export const Component: React.FC<ComponentProps> = ({ className }) => {
  return <div className={twMerge('bg-card rounded-lg border p-4', className)}>{/* content */}</div>;
};

Accessibility

无障碍设计

Color Contrast:

Maintain WCAG AA (4.5:1 for text)
The defined CSS variables already meet this standard

Focus States:

Visible focus:
```
focus:ring-2 focus:ring-primary
```
Outline alternative:
```
focus:outline-2 focus:outline-accent
```

Visual Feedback:

Hover:
```
hover:bg-accent
```
Active:
```
active:scale-95
```

Disabled:

disabled:opacity-50 disabled:cursor-not-allowed

色彩对比度：

符合WCAG AA标准（文本对比度4.5:1）
已定义的CSS变量均满足该标准

焦点状态：

可见焦点：
```
focus:ring-2 focus:ring-primary
```
替代轮廓：
```
focus:outline-2 focus:outline-accent
```

视觉反馈：

悬停：
```
hover:bg-accent
```
激活：
```
active:scale-95
```

禁用：

disabled:opacity-50 disabled:cursor-not-allowed