LogoSkills

figma-analyze

Figma 프레임 분석과 요구사항 정의, BDD 시나리오 생성, ZenHub 이슈 생성, Feature 생성

/cc-flutter:figma:analyze — 디자인 한 장에서 개발 준비 끝내기#

항목내용
실행 명령/cc-flutter:figma:analyze
분류워크플로우
난이도●●● 높음
MCP 서버 playwright , sequential , serena , context7 , magic , zenhub

한마디로#

디자이너가 그린 피그마 화면을 보여주면, 그걸 "개발팀이 바로 일할 수 있는 형태"로 한 번에 정리해 주는 명령입니다. 설계 도면 한 장을 건네면 "필요한 부품 목록, 작업 지시서, 일감 티켓"까지 알아서 만들어 주는 비서라고 보면 됩니다.

누가·언제 쓰나요#

  • 기획자·디자이너·개발 리드가 피그마 시안을 받아 실제 개발을 시작하려 할 때
  • 디자인만 보고 "무엇을 만들어야 하는지(요구사항)"를 글로 정리하고 싶을 때
  • 새 기능의 작업 티켓(ZenHub Epic/Story)을 자동으로 만들고 싶을 때
  • 화면별로 "이렇게 동작해야 한다"는 테스트 시나리오(BDD) 를 미리 뽑아 두고 싶을 때

무엇을 해주나요#

피그마 화면을 분석해서 다음 결과물을 .claude/docs/{기능이름}/ 폴더에 정리해 줍니다.

  • 요구사항 명세 (requirements.md) — 화면에 어떤 데이터·항목이 필요한지, 화면 종류(목록/상세/입력 폼)가 무엇인지 글로 정리
  • 화면 캡처 (screenshots/) — 분석에 사용한 화면 이미지
  • 테스트 시나리오 (bdd/) — "목록이 떠야 한다", "카드를 누르면 상세로 간다" 같은 동작 규칙을 한국어로 정리한 .feature 파일들
  • 작업 티켓 초안 (zenhub/) — 큰 일감 1개(Epic)와 화면별 세부 일감(Story), 각 일감의 완료 기준까지
  • (선택) 위 정리 내용을 바탕으로 실제 기능 코드 뼈대까지 생성

어떻게 쓰나요#

# 가장 기본 — 피그마 화면 URL 여러 개를 그대로 넣기
/cc-flutter:figma:analyze
   " https://www.figma.com/file/abc/App?node-id=1:100 " 
   " https://www.figma.com/file/abc/App?node-id=1:200 " 

 # 기능 이름을 직접 지정하고 작업 티켓 라벨도 붙이기
/cc-flutter:figma:analyze
   " https://www.figma.com/file/abc/App?node-id=1:100 " 
   --feature-name community
  --entity-name Post
  --zenhub-labels  " sprint-1,mvp " 

 # 테스트 시나리오만 만들고 작업 티켓은 건너뛰기
/cc-flutter:figma:analyze
   " https://www.figma.com/file/abc/App?node-id=1:100 " 
   --feature-name community
  --create-zenhub false

# 피그마 접근이 어려우면, 화면 캡처 이미지 파일 경로로도 가능
/cc-flutter:figma:analyze
  /path/to/list_screen.png
  /path/to/detail_screen.png
  --feature-name community
  • --feature-name, --entity-name: 안 적으면 화면을 보고 알아서 추론합니다.
  • --create-zenhub, --generate-bdd: 기본값은 켜짐(true). false로 끌 수 있습니다.
  • --skip-feature true: 정리만 하고 실제 코드 생성은 건너뜁니다.

안에서 무슨 일이 벌어지나요#

총 6단계로 차근차근 진행되며, 결과물을 만들기 전에 항상 사람에게 확인을 받습니다.

  1. 화면 모으기 — 입력한 피그마 URL을 열어 화면을 캡처합니다. (접근이 안 되면 캡처 이미지나 설명으로 대체)
  2. 화면 분석 — 각 화면이 목록인지·상세인지·입력 폼인지, 어떤 버튼·항목이 있는지 하나씩 파악합니다.
  3. 요구사항 + 테스트 시나리오 정리 — 분석 결과를 "필요한 데이터 표 + 화면별 동작 규칙"으로 문서화합니다.
  4. 작업 티켓 만들기 — 큰 일감(Epic)과 화면별 세부 일감(Story)을 만들고, 각 완료 기준을 붙입니다.
  5. 사람 확인 — 정리된 내용을 보여주고 "코드 생성 진행 / 수정 / 티켓만 생성 / 취소" 중에서 고르게 합니다.
  6. 기능 코드 + 테스트 생성 — 승인하면 실제 기능 코드 뼈대와 테스트까지 만들어 줍니다.

⚙️ 상세 옵션·실행 명세 (개발자 / AI 에이전트용)

Triggers#

  • When creating Features based on Figma designs
  • When extracting requirements from UI designs
  • When auto-generating ZenHub Epic/Story
  • When generating BDD test scenarios

Context Trigger Pattern#

/cc-flutter:figma:analyze {figma_urls...} [--options]

Parameters#

ParameterRequiredDescriptionExample
figma_urlsFigma frame URL (space/Comma separated)Multiple URLs
--feature-nameFeature name (Auto-inferred)community
--entity-nameEntity name (Auto-inferred)Post
--create-zenhubZenHub Epic/Story Generation (default: true)true/false
--generate-bddBDD Scenario Generation (default: true)true/false
--zenhub-labelsAdditional ZenHub labels"sprint-1,mvp"
--skip-featureSkip Feature Code generationtrue/false
--auto-createAuto Generation After Analysistrue/false
--output-dirOutput storage Location.claude/docs/

Behavioral Flow (6 Phases)#

Phase 1: Figma Frame Collection#

입력된 피그마 URL들을 파싱하고 검증합니다.

지원 URL 형식:
- https://www.figma.com/file/{key}/{name}?node-id={id}
- https://www.figma.com/design/{key}/{name}?node-id={id}

Playwright MCP Usage:

// 각 프레임 캡처
for (const url of figmaUrls) {
  await browser_navigate({ url });
  await browser_snapshot();  // 접근성 트리 캡처
  await browser_take_screenshot({ filename: `frame_${index}.png` });
}

Alternative when access is unavailable:

피그마에 직접 접근할 수 없습니다.
다음 in progress 하나를 선택해 주세요:

1. 스크린샷 파일 경로 제공
2. 화면 설명 직접 입력
3. 피그마 내보내기 이미지 첨부

Phase 2: UI Analysis#

Systematic Analysis with Sequential MCP:

Identifies the following from each Screen:

screen_analysis:
  screen_type: list | detail | form | other

  components:
    - type: AppBar
      elements: [title, search_button, menu]
    - type: ListView
      item_component: Card
      pagination: infinite_scroll
    - type: FAB
      action: navigate_to_create

  data_fields:
    - field: title
      display: text
      editable: true
    - field: thumbnail
      display: image
      editable: true

  user_actions:
    - tap_card: navigate_to_detail
    - tap_fab: navigate_to_create
    - pull_refresh: reload_list

Phase 3: Requirements + BDD Scenario Definition ⭐ (Extended)#

3.1 Requirements Definition

Convert analysis results into structured requirements:

# {Feature} 요구사항 명세

## Entity 정의

### {Entity}
| 필드 | 타입 | 필수 | 설명 |
|------|------|------|------|
| id | int || 고유 식별자 |
| title | String || Title |
| content | String || Content |
| category | {Entity}Category || Category |
| imageUrls | List < String > ? || 이미지 URL 목록 |
| authorId | int || 작성자 ID |
| createdAt | DateTime || 생성일시 |

### {Entity}Category (Enum)
- general: 일반
- notice: 공지
- event: 이벤트

## 화면 정의

### 1. 목록 화면
- 경로: /{feature}
- 기능: Pagination, 필터, 검색, 정렬
- 컴포넌트: AppBar, FilterBar, ListView, FAB

### 2. 상세 화면
- 경로: /{feature}/{id}
- 기능: 상세 보기, 좋아요, 수정/삭제
- 컴포넌트: SliverAppBar, ContentSection, ActionBar

### 3. 폼 화면
- 경로: /{feature}/create, /{feature}/{id}/edit
- 기능: 생성/수정 폼, 이미지 업로드
- 컴포넌트: Form, ImagePicker, SubmitButton

## API 정의

| 메서드 | 설명 |
|--------|------|
| get{Entity}s | 목록 조회 (Pagination) |
| get{Entity} | 단건 조회 |
| create{Entity} | 생성 |
| update{Entity} | 수정 |
| delete{Entity} | 삭제 |

3.2 BDD Scenario Generation (New)

BDD Scenario Generation per Screen Type:

Reference ${CLAUDE_PLUGIN_ROOT}/agents/bdd-scenario-agent.md

List Screen Example:

Feature: {feature} List # {feature} 목록
  As a user, I want to view the {feature} list. # 사용자로서 {feature} 목록을 보고 싶습니다

  Background:
    Given the app is running # 앱이 실행 중입니다
    And user is logged in # 로그인되어 있습니다

  @smoke
  Scenario: List loads successfully # 목록 로딩 성공
    When I navigate to the {feature} page # {feature} 페이지로 이동합니다
    Then the {feature} list is displayed # {feature} 목록이 보입니다
    And at least 1 {entity} card is displayed # 최소 1개의 {entity} 카드가 보입니다

  @refresh
  Scenario: Pull to refresh # 당겨서 새로고침
    Given I am on the {feature} list page # {feature} 목록 페이지에 있습니다
    When I pull down to refresh # 아래로 당겨서 새로고침합니다
    Then the list is refreshed # 목록이 갱신됩니다

  @navigation
  Scenario: Tap card to navigate to detail # 카드 탭하여 상세 이동
    Given I am on the {feature} list page # {feature} 목록 페이지에 있습니다
    When I tap the first {entity} card # 첫 번째 {entity} 카드를 탭합니다
    Then I navigate to the {entity} detail page # {entity} 상세 페이지로 이동합니다

Output Files:

.claude/docs/{feature_name}/bdd/
├── scenarios.md              # BDD 시나리오 요약
├── {feature}_list.feature    # 목록 화면 시나리오
├── {feature}_detail.feature  # 상세 화면 시나리오
└── {feature}_form.feature    # 폼 화면 시나리오

Phase 4: ZenHub Epic/Story Creation ⭐ (New)#

--create-zenhub true (default) executed:

Reference cc-dev 플러그인의 zenhub-integration-agent (cross-plugin)

4.1 Epic Creation

## Epic 생성

**제목**: {feature} 기능 구현

**내용**:
- 비즈니스 가치 설명
- 범위 정의 (포함/제외)
- 기술 노트
- Figma  reference 링크

**라벨**: epic, feature, {feature_name}

4.2 Story Creation (Per Screen)

Generate Story for each Screen:

## Story 목록

| Screen | Title | Point | Acceptance Criteria Count |
|------|------|-------|-------|
| 목록 | {feature} 목록 화면 | 3 | 8 |
| 상세 | {feature} 상세 화면 | 3 | 9 |
|| {feature} 폼 화면 | 5 | 10 |

4.3 Acceptance Criteria Attachment

Convert BDD Scenarios to Story Acceptance Criteria:

## 인수 기준 (Acceptance Criteria)

### AC1: 목록 로딩 성공
gherkin

Given 앱이 running입니다 And 로그인되어 있습니다 When {feature} Page로 이동합니다 Then {feature} List이 보입니다

- **Priority**: High
- **Tag**: @smoke

Output Files:

.claude/docs/{feature_name}/zenhub/
├── epic.md                   # Epic 정보
└── stories/
    ├── list_story.md         # 목록 화면 Story
    ├── detail_story.md       # 상세 화면 Story
    └── form_story.md         # 폼 화면 Story

Phase 5: User Confirmation#

## 📋 분석 결과 확인

### Entity Fields
| 필드 | 타입 | 필수 |
|------|------|------|
| title | String ||
| content | String ||
| category | {Entity}Category ||
| imageUrls | List < String > ? ||

### 식별된 화면
- 목록 화면 (8BDD 시나리오)
- 상세 화면 (9BDD 시나리오)
- 폼 화면 (10BDD 시나리오)

### ZenHub Issues
- Epic: {feature} 기능 구현
- Stories: 3(11 Point)

### 추천 설정
- 캐싱: SWR
- 엔드포인트: App only

---

**다음 작업을 선택해 주세요:**

1.Feature 코드 생성 진행
2. ✏️ 요구사항 수정
3. 📝 BDD 시나리오 수정
4. 🎫 ZenHub 이슈만 생성
5. ❌ 취소

Phase 6: Feature + BDD Test Generation#

Verify After Execution:

/cc-flutter:feature:create {feature_name} {entity_name}
  --location application
  --caching swr
  --fields  " title:String, content:String, category:{Entity}Category, imageUrls:List < String > ? " 
   --with-bdd true

BDD Test File Copy:

# .claude/docs에서 앱의 integration_test 디렉토리로 복사 (feature 패키지가 아님)
cp .claude/docs/{feature}/bdd/*.feature app/{app}/integration_test/features/

# Step 정의 + Patrol 시나리오 작성 (코드 생성기 없음 — 손으로 작성)
/cc-flutter:bdd:generate {feature_name}

# Patrol E2E 실행 (BDD 시나리오의 유일한 실행 경로 — melos run test:bdd 는 폐지됨)
cd app/{app}
patrol test --target integration_test/scenarios/{feature_name}_*_test.dart

Output Files#

.claude/docs/{feature_name}/
├── figma_analysis.md          # Figma analysis result
├── requirements.md            # 요구사항 명세
├── screenshots/               # Captured screenshots
│   ├── 01_list.png
│   ├── 02_detail.png
│   └── 03_form.png
├── bdd/                       # BDD 시나리오 (신규)
│   ├── scenarios.md
│   ├── {feature}_list.feature
│   ├── {feature}_detail.feature
│   └── {feature}_form.feature
├── zenhub/                    # ZenHub 이슈 (신규)
│   ├── epic.md
│   └── stories/
│       ├── list_story.md
│       ├── detail_story.md
│       └── form_story.md
└── field_mapping.yaml         # 필드 매핑 정보

app/{app}/integration_test/  # BDD 테스트 (신규, feature 패키지 밖 — build.yaml·코드 생성기 없음)
├── features/
│   ├── {feature}_list.feature
│   ├── {feature}_detail.feature
│   └── {feature}_form.feature
├── step/
│   └── {feature}_steps.dart
└── scenarios/
    └── {feature}_{scenario}_test.dart

MCP Integration#

PhaseMCP ServerPurpose
Frame CollectionPlaywrightFigma Page capture, screenshots
UI AnalysisSequentialSystematic UI Analysis, component identification
Requirements DefinitionSequentialRequirements structuring
BDD GenerationSequentialBDD Scenario structuring
ZenHub GenerationZenHubEpic/Story Generation
Feature GenerationSerena, Context7Code generation, Pattern reference
UI componentMagicUI Component Generation

Examples#

Basic Usage (Full Workflow)#

/cc-flutter:figma:analyze
   " https://www.figma.com/file/abc/App?node-id=1:100 " 
   " https://www.figma.com/file/abc/App?node-id=1:200 " 
   " https://www.figma.com/file/abc/App?node-id=1:300 "

Specify Feature Name + Create ZenHub#

/cc-flutter:figma:analyze
   " https://www.figma.com/file/abc/App?node-id=1:100 " 
   --feature-name community
  --entity-name Post
  --zenhub-labels  " sprint-1,mvp "

BDD Only (Skip ZenHub)#

/cc-flutter:figma:analyze
   " https://www.figma.com/file/abc/App?node-id=1:100 " 
   --feature-name community
  --create-zenhub false
  --generate-bdd true

ZenHub Only (Skip Feature Code)#

/cc-flutter:figma:analyze
   " https://www.figma.com/file/abc/App?node-id=1:100 " 
   --feature-name community
  --skip-feature true

Analyze via Screenshots#

When Figma access is difficult:

/cc-flutter:figma:analyze
  /path/to/list_screen.png
  /path/to/detail_screen.png
  /path/to/form_screen.png
  --feature-name community

Analysis Patterns by Screen Type#

List View#

indicators:
  - 여러 개의 반복되는 카드/아이템
  - 스크롤 가능한 레이아웃
  - 필터/검색 바
  - FAB (추가 버튼)

extract:
  - 카드 내 필드 (제목, 썸네일, 날짜 등)
  - 필터 옵션 (카테고리, 정렬)
  - Pagination 타입

bdd_scenarios:
  - 목록 로딩 성공
  - 당겨서 새로고침
  - 무한 스크롤
  - 카드 탭 → 상세 이동
  - FAB 탭 → 생성 페이지 이동
  - 필터 적용
  - 빈 목록
  - 로딩 실패

Detail View#

indicators:
  - 단일 아이템의 전체 정보
  - 큰 이미지/갤러리
  - 액션 버튼 (좋아요, 공유, 수정)
  - 관련 컨텐츠 섹션

extract:
  - 모든 표시 필드
  - 사용자 액션
  - 네비게이션 관계

bdd_scenarios:
  - 상세 정보 표시
  - 좋아요 토글
  - 수정 페이지 이동
  - 삭제 확인
  - 공유하기
  - 뒤로 가기
  - 로딩 실패

Form View#

indicators:
  - 입력 필드 (TextField, Dropdown)
  - 저장/취소 버튼
  - 유효성 검사 메시지

extract:
  - 입력 필드 타입
  - 필수/선택 여부
  - 유효성 규칙

bdd_scenarios:
  - 유효한 폼 제출
  - 필수 필드 누락
  - 글자 수 제한
  - 이미지 첨부/삭제
  - 작성 취소
  - 저장 실패

Reference Agents#

  • Figma analysis: ${CLAUDE_PLUGIN_ROOT}/agents/figma-analyzer-agent.md
  • BDD scenarios: ${CLAUDE_PLUGIN_ROOT}/agents/bdd-scenario-agent.md
  • ZenHub integration: cc-dev 플러그인의 zenhub-integration-agent (cross-plugin)

Core Rules#

  1. Systematic analysis: Step-by-step analysis with Sequential MCP
  2. BDD in Korean: Given-When-Then keywords + Korean descriptions
  3. ZenHub integration: Epic -> Story hierarchy
  4. Acceptance Criteria mapping: BDD scenarios = Story Acceptance Criteria
  5. User confirmation: Always confirm before creation
  6. Documentation: Generate analysis results and requirements documents
  7. Incremental progress: Confirm uncertain parts with questions
  8. Provide alternatives: Screenshot analysis when Figma access unavailable