Files
Pier_v1/.hmcmkit/knowledge/templates/pipeline/phase-5-design-system.template.md
T
ahnyongjooandClaude Sonnet 5.5 964a841de1 chore(rebar): Pier_T_rebar 작업 폴더 초기 구성 및 외부 의존 파일 통합
- Code\rebar_pipeline, review_pipeline, pier-program을 정션에서 실제 폴더로 전환
- Code\rhino_mcp 및 CLAUDE_rhino배경.md 추가, .mcp.json은 PYTHONPATH로 새 위치 사용
- pier-program 내부 .git 제거(이력은 backup\pier-program_20261028.bundle에 보관)
- worktree 가이드 반영(CLAUDE.local.md, HANDOFF.md)
- D:\Rhino-MCP 경로 참조를 새 위치로 치환

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-28 11:20:18 +09:00

2.2 KiB

Design System Specification

Phase 5 Deliverable: Component system definition

Project: {{project_name}} Date: {{date}} Version: 1.0


1. Design Tokens

1.1 Colors

:root {
  /* Primary */
  --primary: #0066FF;
  --primary-hover: #0052CC;

  /* Neutral */
  --background: #FFFFFF;
  --foreground: #171717;
  --muted: #F5F5F5;

  /* Semantic */
  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;
}

1.2 Typography

Name Size Weight Usage
h1 36px 700 Page title
h2 24px 600 Section title
body 16px 400 Body text
small 14px 400 Helper text

1.3 Spacing

4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px

2. Component List

2.1 Basic Components

Component Status Description
Button ✅ Button
Input ✅ Input field
Card ✅ Card container
Badge ✅ Badge/Tag
Avatar ✅ Avatar

2.2 Form Components

Component Status Description
Form ✅ Form wrapper
Label ✅ Label
Select ✅ Select dropdown
Checkbox ✅ Checkbox

2.3 Feedback Components

Component Status Description
Dialog ✅ Dialog/Modal
Toast ✅ Toast notification
Alert ✅ Alert banner

3. Component Details

3.1 Button

Variants:

  • default: Default style
  • outline: Border only
  • ghost: No background
  • destructive: Delete/Danger action

Sizes:

  • sm: Small button
  • default: Default size
  • lg: Large button

Usage Example:

<Button variant="default" size="default">
  Button
</Button>

<Button variant="outline" size="sm">
  Small Button
</Button>

4. Installed Components

# shadcn/ui component installation log
npx shadcn@latest add button
npx shadcn@latest add input
npx shadcn@latest add card
# ...

5. Validation Checklist

  • All required basic components exist
  • Design tokens applied consistently
  • Accessibility (a11y) considered
  • Responsive design supported

6. Next Steps

Proceed to Phase 6: UI Implementation + API Integration