Proto Generator

기획 문서를 입력받아 인터랙티브 프로토타입을 생성하는 스킬. HTML 단독 파일 또는 대상 시스템의 실제 소스코드(live) 두 가지 모드를 지원한다.

파라미터

시스템명 / scope 확정 순서

1. 파라미터로 직접 지정됨 → 그대로 사용
2. 없으면 → --doc 문서에서 추출 (대상 시스템, 대상 화면/기능 섹션 등)
3. 그래도 없으면 → 사용자에게 선택지 프롬프트로 확정

호출 예시

# 문서에서 전부 추출
/proto-generator --doc improve.md --mode live

# 시스템/scope 직접 지정
/proto-generator MySystem member-search --doc improve.md --mode html

# system-planner와 연계 시
system-planner의 --prototype 옵션이 이 스킬을 호출

출력

실행 흐름

1. --doc 기획 문서 읽기 → 화면 기획, API 스펙, 정책, 기획 노트 추출
2. 시스템명/scope 확정 (파라미터 → 문서 → 프롬프트)
3. 대상 시스템 Frontend 저장소 준비 (사용자가 제공한 경로 또는 도구로 접근)
4. 대상 시스템 Frontend 스타일/기술 스택 분석
5. mode 분기:
   [html]
     a. standalone HTML 생성 (기획 노트 UI 포함)
     b. 저장 → {출력 디렉토리}/prototype/
   [live]
     a. develop 기반 브랜치 생성 (proto-{시스템}-{scope})
     b. pages/temp/{scope}.tsx 단일 파일 생성 (기획 노트 UI 포함)
     c. 커밋 + push
     d. Draft MR 생성

HTML 모드 규칙

스타일 반영

프로토타입은 대상 시스템의 실제 Frontend 스타일을 반영해야 한다. Frontend 저장소에서 아래 항목을 분석한다.

HTML 포함 요소

• Tailwind CDN + 시스템별 Tailwind config (fontFamily, colors 등)
• 시스템의 웹폰트 CDN
• SideBar + TopBar 레이아웃 (해당 메뉴 active 상태 표시)
• 더미데이터 (실제 도메인에 맞는 사실적 데이터)
• 인터랙션 구현 (탭 전환, Drawer 열기/닫기, 필터 등)

live 모드 규칙

핵심 원칙: 단일 파일, 외부 의존 제로

규칙 1. temp/ 경로에 생성       → pages/temp/{scope}.tsx (또는 src/pages/temp/)
규칙 2. 단일 파일               → 타입, 목 데이터, 컴포넌트 모두 한 파일
규칙 3. 프로젝트 import 금지    → node_modules만 import (UI 라이브러리, react, dayjs 등)
규칙 4. 기존 파일 수정 없음     → temp/ 폴더에 파일 추가만, 영향도 제로
규칙 5. package.json 기반 UI    → 실행 시점에 기술 스택 확인하여 UX/UI 맞춤

기술 스택 확인 절차

1. package.json 읽기
2. 설치된 패키지로 기술 스택 판별:
   - UI 라이브러리 (antd, MUI, chakra 등)
   - 유틸리티 CSS (tailwindcss 등)
   - 아이콘 (react-feather, lucide-react 등)
   - 날짜 (dayjs, moment 등)
   - 차트 (@ant-design/charts, recharts 등)
3. 판별된 스택의 npm 패키지만 import하여 코드 생성

단일 파일 구조

// pages/temp/{scope}.tsx

/**
 * [Proto] {제목}
 * ⚠️ 프로토타입 — 목 데이터 사용, 프로덕션 전환 시 API 연동 필요
 */

import { useState, useMemo } from 'react'
import { Table, Card, Input, Button, ... } from '{UI 라이브러리}'
// ❌ 프로젝트 내부 import 금지

// ── 타입 정의 ──────────────────────────────
interface SomeItem { ... }

// ── 목 데이터 ──────────────────────────────
const MOCK_DATA: SomeItem[] = [...]  // 100건 이상

// ── 기획 노트 데이터 ──────────────────────────────
const SPEC_NOTES: SpecNote[] = [
  { id: 1, title: '...', tags: ['정책'], body: '...' },
]

// ── 메인 컴포넌트 ──────────────────────────────
export default function Proto{Scope}Page() {
  const [data] = useState<SomeItem[]>(MOCK_DATA)
  return (
    <div style={{ padding: 24 }}>
      <h2>[Proto] {제목}</h2>
      {/* 기획 노트 토글 + 마커 + 패널 */}
      {/* 본문 UI */}
    </div>
  )
}

코드 생성 세부 규칙

브랜치/커밋/MR 규칙

페이지 접근

• /temp/{scope} URL로 직접 접근 (메뉴 등록 없음)
• URL을 커뮤니케이션 도구에 공유하여 이해관계자 확인
• 영향도 제로: temp/ 폴더에 파일 1개 추가만, 기존 코드 변경 없음

인터랙션 규칙 (HTML / live 공통)

원칙: 화면에 보이는 모든 UI 요소는 실제로 동작해야 한다. 이해관계자가 프로토타입을 조작하며 UX를 검증할 수 있어야 한다.

목 데이터 요구사항

• 인터랙션을 지탱할 수 있는 충분한 양의 목 데이터를 생성할 것
• 페이징이 있으면 여러 페이지를 채울 수 있는 분량 (예: 100건 이상)
• 검색/필터가 있으면 조건별로 다른 결과가 나오는 다양한 데이터

필수 동작

기획 노트 시스템 (Spec Annotation)

모든 프로토타입에 인터랙티브 기획 노트를 포함한다.

필수 구성 요소

노트 유형 태그

노트 작성 기준

각 노트에는 아래 항목을 포함한다:

1. 무엇을 — 해당 UI 요소의 기능/역할
2. 왜 — 현행 Gap 또는 개선 필요성
3. 어떻게 — 사용할 API, 컴포넌트, 정책/규칙
4. 현행 대비 — 현재 시스템과의 차이점

화면 메타 정보 노트 (필수)

마지막 노트로 화면 메타 정보를 포함한다:

• 페이지 경로
• 우선순위
• 예상 공수
• 관련 개선 항목
• 기대 효과

연관 스킬

• system-planner — improve 서브커맨드의 --prototype 옵션으로 이 스킬을 호출