/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단계로 차근차근 진행되며, 결과물을 만들기 전에 항상 사람에게 확인을 받습니다.
- 화면 모으기 — 입력한 피그마 URL을 열어 화면을 캡처합니다. (접근이 안 되면 캡처 이미지나 설명으로 대체)
- 화면 분석 — 각 화면이 목록인지·상세인지·입력 폼인지, 어떤 버튼·항목이 있는지 하나씩 파악합니다.
- 요구사항 + 테스트 시나리오 정리 — 분석 결과를 "필요한 데이터 표 + 화면별 동작 규칙"으로 문서화합니다.
- 작업 티켓 만들기 — 큰 일감(Epic)과 화면별 세부 일감(Story)을 만들고, 각 완료 기준을 붙입니다.
- 사람 확인 — 정리된 내용을 보여주고 "코드 생성 진행 / 수정 / 티켓만 생성 / 취소" 중에서 고르게 합니다.
- 기능 코드 + 테스트 생성 — 승인하면 실제 기능 코드 뼈대와 테스트까지 만들어 줍니다.
⚙️ 상세 옵션·실행 명세 (개발자 / 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#
| Parameter | Required | Description | Example |
|---|---|---|---|
figma_urls | ✅ | Figma frame URL (space/Comma separated) | Multiple URLs |
--feature-name | ❌ | Feature name (Auto-inferred) | community |
--entity-name | ❌ | Entity name (Auto-inferred) | Post |
--create-zenhub | ❌ | ZenHub Epic/Story Generation (default: true) | true/false |
--generate-bdd | ❌ | BDD Scenario Generation (default: true) | true/false |
--zenhub-labels | ❌ | Additional ZenHub labels | "sprint-1,mvp" |
--skip-feature | ❌ | Skip Feature Code generation | true/false |
--auto-create | ❌ | Auto Generation After Analysis | true/false |
--output-dir | ❌ | Output 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_listPhase 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: 목록 로딩 성공Given 앱이 running입니다 And 로그인되어 있습니다 When {feature} Page로 이동합니다 Then {feature} List이 보입니다
- **Priority**: High
- **Tag**: @smokeOutput Files:
.claude/docs/{feature_name}/zenhub/
├── epic.md # Epic 정보
└── stories/
├── list_story.md # 목록 화면 Story
├── detail_story.md # 상세 화면 Story
└── form_story.md # 폼 화면 StoryPhase 5: User Confirmation#
## 📋 분석 결과 확인
### Entity Fields
| 필드 | 타입 | 필수 |
|------|------|------|
| title | String | ✅ |
| content | String | ✅ |
| category | {Entity}Category | ✅ |
| imageUrls | List < String > ? | ❌ |
### 식별된 화면
- 목록 화면 (8개 BDD 시나리오)
- 상세 화면 (9개 BDD 시나리오)
- 폼 화면 (10개 BDD 시나리오)
### 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 trueBDD 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.dartOutput 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.dartMCP Integration#
| Phase | MCP Server | Purpose |
|---|---|---|
| Frame Collection | Playwright | Figma Page capture, screenshots |
| UI Analysis | Sequential | Systematic UI Analysis, component identification |
| Requirements Definition | Sequential | Requirements structuring |
| BDD Generation | Sequential | BDD Scenario structuring |
| ZenHub Generation | ZenHub | Epic/Story Generation |
| Feature Generation | Serena, Context7 | Code generation, Pattern reference |
| UI component | Magic | UI 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 trueZenHub Only (Skip Feature Code)#
/cc-flutter:figma:analyze
" https://www.figma.com/file/abc/App?node-id=1:100 "
--feature-name community
--skip-feature trueAnalyze 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 communityAnalysis 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#
- Systematic analysis: Step-by-step analysis with Sequential MCP
- BDD in Korean: Given-When-Then keywords + Korean descriptions
- ZenHub integration: Epic -> Story hierarchy
- Acceptance Criteria mapping: BDD scenarios = Story Acceptance Criteria
- User confirmation: Always confirm before creation
- Documentation: Generate analysis results and requirements documents
- Incremental progress: Confirm uncertain parts with questions
- Provide alternatives: Screenshot analysis when Figma access unavailable