| ํญ๋ชฉ | ๋ด์ฉ |
|---|---|
| Category | petmedi-workflow |
| Complexity | complex |
| MCP Servers | playwright, sequential, serena, context7, magic, zenhub |
/figma:analyze#
Context Framework Note: This behavioral instruction activates when Claude Code users type
/figma:analyzepatterns.
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#
| 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 | 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: ๋ชฉ๋ก ๋ก๋ฉ ์ฑ๊ณต
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#
| 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)#
/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#
- 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