LogoSkills

figma:analyze

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

ํ•ญ๋ชฉ๋‚ด์šฉ
Categorypetmedi-workflow
Complexitycomplex
MCP Serversplaywright, sequential, serena, context7, magic, zenhub

/figma:analyze#

Context Framework Note: This behavioral instruction activates when Claude Code users type /figma:analyze patterns.

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 generation true/false
--auto-create โŒ Auto Generation After Analysis true/false
--output-dir โŒ Output storage Location claudedocs/

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

claudedocs/{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 ~/.claude/commands/agents/zenhub-integration-agent.md

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:

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

# claudedocs์—์„œ feature ํ…Œ์ŠคํŠธ ๋””๋ ‰ํ† ๋ฆฌ๋กœ ๋ณต์‚ฌ
cp claudedocs/{feature}/bdd/*.feature feature/application/{feature}/test/src/bdd/

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

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

Output Files#

claudedocs/{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 Collection Playwright Figma Page capture, screenshots
UI Analysis Sequential Systematic UI Analysis, component identification
Requirements Definition Sequential Requirements structuring
BDD GenerationSequentialBDD Scenario structuring
ZenHub GenerationZenHubEpic/Story Generation
Feature Generation Serena, Context7 Code 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/commands/agents/figma-analyzer-agent.md
  • BDD scenarios: ~/.claude/commands/agents/bdd-scenario-agent.md
  • ZenHub integration: ~/.claude/commands/agents/zenhub-integration-agent.md

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