1. Figma 프레임 구조 파악
2. 컴포넌트 계층 분석
3. 색상/폰트/간격 추출
4. 인터랙션 패턴 확인

// 페이지 구조
class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CoAppBar(title: '로그인'),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: _buildContent(context),
        ),
      ),
    );
  }

  Widget _buildContent(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        const CoTextField(
          label: '이메일',
          hintText: 'email@example.com',
        ),
        const SizedBox(height: 16),
        const CoTextField(
          label: '비밀번호',
          obscureText: true,
        ),
        const Spacer(),
        CoButton.primary(
          onPressed: () {},
          child: const Text('로그인'),
        ),
      ],
    );
  }
}

CoButton.primary(onPressed: () {}, child: Text('Primary'))
CoButton.secondary(onPressed: () {}, child: Text('Secondary'))
CoButton.outline(onPressed: () {}, child: Text('Outline'))
CoButton.text(onPressed: () {}, child: Text('Text'))

CoTextField(
  label: '레이블',
  hintText: '힌트 텍스트',
  errorText: '에러 메시지',
  prefixIcon: Icon(Icons.email),
  suffixIcon: Icon(Icons.visibility),
)

CoCard(
  child: Column(
    children: [
      CoCardHeader(title: '제목'),
      CoCardContent(child: Text('내용')),
      CoCardFooter(child: CoButton.text(...)),
    ],
  ),
)

CoListTile(
  leading: CoAvatar(imageUrl: user.avatarUrl),
  title: Text(user.name),
  subtitle: Text(user.email),
  trailing: Icon(Icons.chevron_right),
  onTap: () {},
)

// 테마 색상 (context.theme.colorScheme)
primary        // Primary color
onPrimary      // Primary color 위 텍스트
secondary      // Secondary color
surface        // Surface color
background     // Background color
error          // Error color

// Semantic colors
AppColors.success
AppColors.warning
AppColors.info

// TextTheme (context.textTheme)
displayLarge   // Large heading
headlineMedium // Medium heading
titleLarge     // Title
bodyLarge      // Body (large)
bodyMedium     // Body (medium)
labelLarge     // Label

// Standard spacing
const spacing4 = 4.0;
const spacing8 = 8.0;
const spacing12 = 12.0;
const spacing16 = 16.0;
const spacing24 = 24.0;
const spacing32 = 32.0;

// LayoutBuilder 사용
LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return _buildMobileLayout();
    } else if (constraints.maxWidth < 1200) {
      return _buildTabletLayout();
    } else {
      return _buildDesktopLayout();
    }
  },
)