flutter-ui-design

사용 방법

설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.

npx skills add https://github.com/k9i-0/flutter_autonomous_template --skill flutter-ui-design

시작 전 확인

설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.

원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

Flutter UI Design Guidelines

Purpose

This skill provides guidelines to make Flutter app UIs stand out from "typical defaults" and achieve professional, impressive designs.

Typography

Patterns to Avoid

Using only default Roboto
Monotonous font weights (Regular/Bold only)
Uniform text sizes

Recommended Approach

dart

// Use modern fonts with Google Fonts
import 'package:google_fonts/google_fonts.dart';

// For titles: Distinctive display fonts
GoogleFonts.poppins(fontWeight: FontWeight.w700)
GoogleFonts.inter(fontWeight: FontWeight.w800)
GoogleFonts.plusJakartaSans()

// For body: Readable sans-serif
GoogleFonts.inter()
GoogleFonts.dmSans()

// Size hierarchy with contrast in mind
headlineLarge: 32sp, weight: 800
headlineMedium: 24sp, weight: 700
titleLarge: 20sp, weight: 600
bodyLarge: 16sp, weight: 400
labelSmall: 12sp, weight: 500

Font Weight Usage

Extreme contrast: Combine w300 and w800
Bold for headings (w600-w800), regular for body (w400)

Color & Theme

Patterns to Avoid

Material Design default blue/purple
Subtle, uniform color palettes
Gray-only safe UIs

Recommended Approach

dart

// Dark theme: Deep background + vivid accents
ColorScheme.dark(
  surface: Color(0xFF0F0F14),        // Deep dark gray
  surfaceContainerHighest: Color(0xFF1A1A23),
  primary: Color(0xFF6366F1),         // Vivid indigo
  secondary: Color(0xFF22D3EE),       // Cyan accent
  tertiary: Color(0xFFF472B6),        // Pink accent
)

// Light theme: Clean white + vivid accents
ColorScheme.light(
  surface: Color(0xFFFAFAFC),
  surfaceContainerHighest: Color(0xFFF1F5F9),
  primary: Color(0xFF4F46E5),         // Indigo
  secondary: Color(0xFF0EA5E9),       // Sky blue
  tertiary: Color(0xFFEC4899),        // Pink
)

Color Usage Points

Dominant Color: Use one primary color boldly
Sharp Accents: Use secondary color sparingly as accent
Semantic Colors: Success=green, Error=red, Warning=yellow intuitively

Elevation & Depth

Patterns to Avoid

Too flat designs
Uniform elevation
Overusing shadows

Recommended Approach

dart

// Cards with subtle depth
Card(
  elevation: 0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  color: theme.colorScheme.surfaceContainerHighest,
  child: ...
)

// Soft shadow (low contrast)
BoxDecoration(
  borderRadius: BorderRadius.circular(16),
  boxShadow: [
    BoxShadow(
      color: Colors.black.withOpacity(0.04),
      blurRadius: 10,
      offset: Offset(0, 4),
    ),
  ],
)

// Glassmorphism effect
ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    child: Container(
      color: Colors.white.withOpacity(0.1),
      child: ...
    ),
  ),
)

Motion & Animation

Patterns to Avoid

Rigid UI without animations
Excessive, scattered animations
Inconsistent timing

Recommended Approach

dart

// Page transition: Smooth fade+slide
PageRouteBuilder(
  transitionDuration: Duration(milliseconds: 300),
  pageBuilder: (_, __, ___) => DestinationPage(),
  transitionsBuilder: (_, animation, __, child) {
    return FadeTransition(
      opacity: animation,
      child: SlideTransition(
        position: Tween<Offset>(
          begin: Offset(0, 0.05),
          end: Offset.zero,
        ).animate(CurvedAnimation(
          parent: animation,
          curve: Curves.easeOutCubic,
        )),
        child: child,
      ),
    );
  },
)

// List items: Staggered Animation
AnimatedList + interval-based delays

// Tap feedback: Subtle scale
Transform.scale(
  scale: isPressed ? 0.98 : 1.0,
  child: AnimatedContainer(
    duration: Duration(milliseconds: 100),
    ...
  ),
)

Timing Guidelines

Short operations (tap): 100-150ms
Screen transitions: 250-350ms
Complex animations: 400-600ms
Curve: Base on easeOutCubic, easeInOutCubic

Layout & Spacing

Patterns to Avoid

Cramped UI
Irregular padding
Insufficient spacing between elements

Recommended Approach

dart

// 8px-based spacing system
const spacing = (
  xs: 4.0,
  sm: 8.0,
  md: 16.0,
  lg: 24.0,
  xl: 32.0,
  xxl: 48.0,
);

// Content area margins
Padding(
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 16),
  child: ...
)

// Card padding larger than outer
Card(
  child: Padding(
    padding: EdgeInsets.all(20),
    child: ...
  ),
)

// Gaps between elements
SizedBox(height: 16) // Between related elements
SizedBox(height: 32) // Between sections

Components

Buttons

dart

// Primary button: Rounded corners + sufficient padding
FilledButton(
  style: FilledButton.styleFrom(
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 16),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
  child: Text('Action'),
)

// Outline button
OutlinedButton(
  style: OutlinedButton.styleFrom(
    side: BorderSide(color: theme.colorScheme.outline, width: 1.5),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)

Input Fields

dart

TextField(
  decoration: InputDecoration(
    filled: true,
    fillColor: theme.colorScheme.surfaceContainerHighest,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: BorderSide.none,
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: BorderSide(
        color: theme.colorScheme.primary,
        width: 2,
      ),
    ),
    contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
  ),
)

FAB

dart

FloatingActionButton(
  elevation: 2,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  child: Icon(Icons.add),
)

Background

Recommended Techniques

dart

// Gradient background
Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        theme.colorScheme.surface,
        theme.colorScheme.surface.withOpacity(0.95),
      ],
    ),
  ),
)

// Subtle pattern (dots, grid)
CustomPaint(
  painter: DotPatternPainter(
    color: theme.colorScheme.outline.withOpacity(0.05),
    spacing: 20,
  ),
)

Checklist

Checklist when implementing UI:

[ ] Using fonts other than default
[ ] Color palette has accent colors
[ ] Appropriate margins/padding are set
[ ] Interactions have feedback (animations)
[ ] Component corner radii are unified (12-16px recommended)
[ ] Text hierarchy (size/weight) is clear

사용 방법

시작 전 확인

Flutter UI Design Guidelines

Purpose

Typography

Patterns to Avoid

Recommended Approach

Font Weight Usage

Color & Theme

Patterns to Avoid

Recommended Approach

Color Usage Points

Elevation & Depth

Patterns to Avoid

Recommended Approach

Motion & Animation

Patterns to Avoid

Recommended Approach

Timing Guidelines

Layout & Spacing

Patterns to Avoid

Recommended Approach

Components

Buttons

Input Fields

FAB

Background

Recommended Techniques

Checklist

관련 작업

design-system

frontend-design-direction

liquid-glass-design

taste