LogoSkills

figma:analyze

Figma frame analysis with requirements definition, BDD scenario generation, ZenHub issue creation, and Feature generation

ํ•ญ๋ชฉ๋‚ด์šฉ
Invoke/figma:analyze
Categorykobic-workflow
Complexityhigh
MCP Serversplaywright, sequential, serena, context7, magic, zenhub

/figma:analyze โ€” ๋””์ž์ธ ํ•œ ์žฅ์—์„œ ๊ฐœ๋ฐœ ์ค€๋น„ ๋๋‚ด๊ธฐ#

ํ•œ๋งˆ๋””๋กœ#

๋””์ž์ด๋„ˆ๊ฐ€ ๊ทธ๋ฆฐ ํ”ผ๊ทธ๋งˆ ํ™”๋ฉด์„ ๋ณด์—ฌ์ฃผ๋ฉด, ๊ทธ๊ฑธ "๊ฐœ๋ฐœํŒ€์ด ๋ฐ”๋กœ ์ผํ•  ์ˆ˜ ์žˆ๋Š” ํ˜•ํƒœ"๋กœ ํ•œ ๋ฒˆ์— ์ •๋ฆฌํ•ด ์ฃผ๋Š” ๋ช…๋ น์ž…๋‹ˆ๋‹ค. ์„ค๊ณ„ ๋„๋ฉด ํ•œ ์žฅ์„ ๊ฑด๋„ค๋ฉด "ํ•„์š”ํ•œ ๋ถ€ํ’ˆ ๋ชฉ๋ก, ์ž‘์—… ์ง€์‹œ์„œ, ์ผ๊ฐ ํ‹ฐ์ผ“"๊นŒ์ง€ ์•Œ์•„์„œ ๋งŒ๋“ค์–ด ์ฃผ๋Š” ๋น„์„œ๋ผ๊ณ  ๋ณด๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๋ˆ„๊ฐ€ยท์–ธ์ œ ์“ฐ๋‚˜์š”#

  • ๊ธฐํš์žยท๋””์ž์ด๋„ˆยท๊ฐœ๋ฐœ ๋ฆฌ๋“œ๊ฐ€ ํ”ผ๊ทธ๋งˆ ์‹œ์•ˆ์„ ๋ฐ›์•„ ์‹ค์ œ ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•˜๋ ค ํ•  ๋•Œ
  • ๋””์ž์ธ๋งŒ ๋ณด๊ณ  "๋ฌด์—‡์„ ๋งŒ๋“ค์–ด์•ผ ํ•˜๋Š”์ง€(์š”๊ตฌ์‚ฌํ•ญ)"๋ฅผ ๊ธ€๋กœ ์ •๋ฆฌํ•˜๊ณ  ์‹ถ์„ ๋•Œ
  • ์ƒˆ ๊ธฐ๋Šฅ์˜ ์ž‘์—… ํ‹ฐ์ผ“(ZenHub Epic/Story)์„ ์ž๋™์œผ๋กœ ๋งŒ๋“ค๊ณ  ์‹ถ์„ ๋•Œ
  • ํ™”๋ฉด๋ณ„๋กœ "์ด๋ ‡๊ฒŒ ๋™์ž‘ํ•ด์•ผ ํ•œ๋‹ค"๋Š” ํ…Œ์ŠคํŠธ ์‹œ๋‚˜๋ฆฌ์˜ค(BDD) ๋ฅผ ๋ฏธ๋ฆฌ ๋ฝ‘์•„ ๋‘๊ณ  ์‹ถ์„ ๋•Œ

๋ฌด์—‡์„ ํ•ด์ฃผ๋‚˜์š”#

ํ”ผ๊ทธ๋งˆ ํ™”๋ฉด์„ ๋ถ„์„ํ•ด์„œ ๋‹ค์Œ ๊ฒฐ๊ณผ๋ฌผ์„ .claude/docs/{๊ธฐ๋Šฅ์ด๋ฆ„}/ ํด๋”์— ์ •๋ฆฌํ•ด ์ค๋‹ˆ๋‹ค.

  • ์š”๊ตฌ์‚ฌํ•ญ ๋ช…์„ธ (requirements.md) โ€” ํ™”๋ฉด์— ์–ด๋–ค ๋ฐ์ดํ„ฐยทํ•ญ๋ชฉ์ด ํ•„์š”ํ•œ์ง€, ํ™”๋ฉด ์ข…๋ฅ˜(๋ชฉ๋ก/์ƒ์„ธ/์ž…๋ ฅ ํผ)๊ฐ€ ๋ฌด์—‡์ธ์ง€ ๊ธ€๋กœ ์ •๋ฆฌ
  • ํ™”๋ฉด ์บก์ฒ˜ (screenshots/) โ€” ๋ถ„์„์— ์‚ฌ์šฉํ•œ ํ™”๋ฉด ์ด๋ฏธ์ง€
  • ํ…Œ์ŠคํŠธ ์‹œ๋‚˜๋ฆฌ์˜ค (bdd/) โ€” "๋ชฉ๋ก์ด ๋– ์•ผ ํ•œ๋‹ค", "์นด๋“œ๋ฅผ ๋ˆ„๋ฅด๋ฉด ์ƒ์„ธ๋กœ ๊ฐ„๋‹ค" ๊ฐ™์€ ๋™์ž‘ ๊ทœ์น™์„ ํ•œ๊ตญ์–ด๋กœ ์ •๋ฆฌํ•œ .feature ํŒŒ์ผ๋“ค
  • ์ž‘์—… ํ‹ฐ์ผ“ ์ดˆ์•ˆ (zenhub/) โ€” ํฐ ์ผ๊ฐ 1๊ฐœ(Epic)์™€ ํ™”๋ฉด๋ณ„ ์„ธ๋ถ€ ์ผ๊ฐ(Story), ๊ฐ ์ผ๊ฐ์˜ ์™„๋ฃŒ ๊ธฐ์ค€๊นŒ์ง€
  • (์„ ํƒ) ์œ„ ์ •๋ฆฌ ๋‚ด์šฉ์„ ๋ฐ”ํƒ•์œผ๋กœ ์‹ค์ œ ๊ธฐ๋Šฅ ์ฝ”๋“œ ๋ผˆ๋Œ€๊นŒ์ง€ ์ƒ์„ฑ

์–ด๋–ป๊ฒŒ ์“ฐ๋‚˜์š”#

# ๊ฐ€์žฅ ๊ธฐ๋ณธ โ€” ํ”ผ๊ทธ๋งˆ ํ™”๋ฉด URL ์—ฌ๋Ÿฌ ๊ฐœ๋ฅผ ๊ทธ๋Œ€๋กœ ๋„ฃ๊ธฐ
/figma:analyze
   " https://www.figma.com/file/abc/App?node-id=1:100 " 
   " https://www.figma.com/file/abc/App?node-id=1:200 " 

 # ๊ธฐ๋Šฅ ์ด๋ฆ„์„ ์ง์ ‘ ์ง€์ •ํ•˜๊ณ  ์ž‘์—… ํ‹ฐ์ผ“ ๋ผ๋ฒจ๋„ ๋ถ™์ด๊ธฐ
/figma:analyze
   " https://www.figma.com/file/abc/App?node-id=1:100 " 
   --feature-name community
  --entity-name Post
  --zenhub-labels  " sprint-1,mvp " 

 # ํ…Œ์ŠคํŠธ ์‹œ๋‚˜๋ฆฌ์˜ค๋งŒ ๋งŒ๋“ค๊ณ  ์ž‘์—… ํ‹ฐ์ผ“์€ ๊ฑด๋„ˆ๋›ฐ๊ธฐ
/figma:analyze
   " https://www.figma.com/file/abc/App?node-id=1:100 " 
   --feature-name community
  --create-zenhub false

# ํ”ผ๊ทธ๋งˆ ์ ‘๊ทผ์ด ์–ด๋ ค์šฐ๋ฉด, ํ™”๋ฉด ์บก์ฒ˜ ์ด๋ฏธ์ง€ ํŒŒ์ผ ๊ฒฝ๋กœ๋กœ๋„ ๊ฐ€๋Šฅ
/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#

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

Parameters#

ParameterRequiredDescriptionExample
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 generationtrue/false
--auto-createโŒAuto Generation After Analysistrue/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_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}/commands/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-cycle ํ”Œ๋Ÿฌ๊ทธ์ธ์˜ 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 > ? | โŒ |

### ์‹๋ณ„๋œ ํ™”๋ฉด
- ๋ชฉ๋ก ํ™”๋ฉด (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:

/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์—์„œ feature ํ…Œ์ŠคํŠธ ๋””๋ ‰ํ† ๋ฆฌ๋กœ ๋ณต์‚ฌ
cp .claude/docs/{feature}/bdd/*.feature feature/application/{feature}/test/src/bdd/

# Step ์ •์˜ ์ƒ์„ฑ
/bdd:generate {feature_name}

# Generate BDD test code
melos run test:bdd --scope={feature_name}

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         # ํ•„๋“œ ๋งคํ•‘ ์ •๋ณด

feature/application/{feature_name}/test/src/bdd/  # BDD ํ…Œ์ŠคํŠธ (์‹ ๊ทœ)
โ”œโ”€โ”€ {feature}_list.feature
โ”œโ”€โ”€ {feature}_detail.feature
โ”œโ”€โ”€ {feature}_form.feature
โ”œโ”€โ”€ step/
โ”‚   โ””โ”€โ”€ {feature}_steps.dart
โ””โ”€โ”€ hooks/
    โ””โ”€โ”€ hooks.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)#

/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#

/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)#

/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)#

/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:

/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}/commands/agents/figma-analyzer-agent.md
  • BDD scenarios: ${CLAUDE_PLUGIN_ROOT}/commands/agents/bdd-scenario-agent.md
  • ZenHub integration: cc-dev-cycle ํ”Œ๋Ÿฌ๊ทธ์ธ์˜ 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