binary-agents 1.0.16 → 1.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/commands/figma-check.md +292 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -46,6 +46,7 @@ npx binary-agents list
|
|
|
46
46
|
| `/pr` | 브랜치 변경사항 분석 후 PR 자동 생성 |
|
|
47
47
|
| `/review-pr` | PR 링크를 받아 변경사항 분석 후 GitHub 스타일 라인별 코드 리뷰 |
|
|
48
48
|
| `/code-review` | 여러 에이전트를 병렬 실행하여 종합 코드 리뷰 |
|
|
49
|
+
| `/figma-check` | Figma MCP로 디자인 정보를 가져와 구현 코드와 비교 분석 |
|
|
49
50
|
|
|
50
51
|
### /commit 사용법
|
|
51
52
|
|
|
@@ -134,7 +135,8 @@ binary-agents/
|
|
|
134
135
|
│ ├── branch.md
|
|
135
136
|
│ ├── pr.md
|
|
136
137
|
│ ├── review-pr.md
|
|
137
|
-
│
|
|
138
|
+
│ ├── code-review.md
|
|
139
|
+
│ └── figma-check.md
|
|
138
140
|
├── bin/ # CLI 실행 파일
|
|
139
141
|
├── src/ # CLI 소스 코드
|
|
140
142
|
├── docs/ # 문서
|
|
@@ -0,0 +1,292 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Figma 선택 영역과 IDE 선택 코드를 비교하여 디자인-구현 차이 분석
|
|
3
|
+
allowed-tools: Read, Glob, Grep, mcp__*
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Figma 디자인-구현 비교
|
|
7
|
+
|
|
8
|
+
Figma Desktop에서 선택한 컴포넌트와 IDE에서 선택한 코드를 비교하여 차이점을 분석합니다.
|
|
9
|
+
|
|
10
|
+
## 컨텍스트 정보
|
|
11
|
+
|
|
12
|
+
**Figma node (선택사항 - 없으면 Figma MCP에서 현재 선택 가져오기):**
|
|
13
|
+
!`echo "${1:-}"`
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## 작업 순서
|
|
18
|
+
|
|
19
|
+
### 0. 입력 정보 확인
|
|
20
|
+
|
|
21
|
+
**Figma 정보 확인:**
|
|
22
|
+
1. Figma Desktop MCP가 context에 전달한 선택 정보 확인
|
|
23
|
+
2. context에 Figma 정보 없으면 → "Figma Desktop에서 비교할 컴포넌트를 선택한 후 다시 실행해주세요"
|
|
24
|
+
|
|
25
|
+
**코드 정보 확인:**
|
|
26
|
+
1. IDE에서 코드가 선택되어 있으면 (`ide_selection`) 해당 코드 사용
|
|
27
|
+
2. 없으면 → "IDE에서 비교할 코드를 선택한 후 다시 실행해주세요"
|
|
28
|
+
|
|
29
|
+
**둘 다 없으면:**
|
|
30
|
+
```
|
|
31
|
+
⚠️ 비교할 정보가 없습니다.
|
|
32
|
+
|
|
33
|
+
사용법:
|
|
34
|
+
1. Figma Desktop에서 비교할 컴포넌트 선택
|
|
35
|
+
2. IDE에서 비교할 코드 영역 선택
|
|
36
|
+
3. /figma-check 실행
|
|
37
|
+
|
|
38
|
+
또는 직접 지정:
|
|
39
|
+
/figma-check <node-id-or-url>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### 1. Figma 정보 파싱
|
|
43
|
+
|
|
44
|
+
Figma Desktop MCP가 context에 전달한 node 정보에서 추출:
|
|
45
|
+
|
|
46
|
+
```
|
|
47
|
+
필요한 정보:
|
|
48
|
+
- name, type
|
|
49
|
+
- absoluteBoundingBox (width, height)
|
|
50
|
+
- fills (색상, boundVariables)
|
|
51
|
+
- strokes, effects
|
|
52
|
+
- layoutMode, primaryAxisAlignItems, counterAxisAlignItems
|
|
53
|
+
- padding (Top/Right/Bottom/Left)
|
|
54
|
+
- itemSpacing, cornerRadius
|
|
55
|
+
- style (fontFamily, fontSize, fontWeight, lineHeightPx, letterSpacing)
|
|
56
|
+
- children
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### 2. 컴포넌트 파일 찾기
|
|
60
|
+
|
|
61
|
+
```bash
|
|
62
|
+
# 컴포넌트 이름으로 검색
|
|
63
|
+
Glob: **/*{ComponentName}*.{tsx,jsx}
|
|
64
|
+
Glob: **/components/**/*.{tsx,jsx}
|
|
65
|
+
|
|
66
|
+
# 스타일 파일 검색
|
|
67
|
+
Glob: **/*.styles.{ts,js}
|
|
68
|
+
Glob: **/*.styled.{ts,js}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### 3. 7가지 기준으로 비교
|
|
72
|
+
|
|
73
|
+
#### 3.1 레이아웃 (Weight: 20%)
|
|
74
|
+
|
|
75
|
+
| Figma | Tailwind | CSS-in-JS |
|
|
76
|
+
|-------|----------|-----------|
|
|
77
|
+
| `layoutMode: "HORIZONTAL"` | `flex-row` | `flexDirection: 'row'` |
|
|
78
|
+
| `layoutMode: "VERTICAL"` | `flex-col` | `flexDirection: 'column'` |
|
|
79
|
+
| `primaryAxisAlignItems: "CENTER"` | `justify-center` | `justifyContent: 'center'` |
|
|
80
|
+
| `counterAxisAlignItems: "CENTER"` | `items-center` | `alignItems: 'center'` |
|
|
81
|
+
|
|
82
|
+
#### 3.2 색상 (Weight: 20%)
|
|
83
|
+
|
|
84
|
+
```
|
|
85
|
+
Figma RGBA (0-1) → CSS RGBA (0-255)
|
|
86
|
+
r: 0.2 → Math.round(0.2 * 255) = 51
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
**허용 오차:** ±5 (RGB 값 기준)
|
|
90
|
+
|
|
91
|
+
#### 3.3 타이포그래피 (Weight: 20%)
|
|
92
|
+
|
|
93
|
+
| 속성 | Figma | CSS |
|
|
94
|
+
|------|-------|-----|
|
|
95
|
+
| 크기 | `fontSize` | `font-size` |
|
|
96
|
+
| 굵기 | `fontWeight` | `font-weight` |
|
|
97
|
+
| 행간 | `lineHeightPx` | `line-height` |
|
|
98
|
+
|
|
99
|
+
**허용 오차:** fontSize ±1px, lineHeight ±2px
|
|
100
|
+
|
|
101
|
+
#### 3.4 간격 (Weight: 15%)
|
|
102
|
+
|
|
103
|
+
| Figma | CSS |
|
|
104
|
+
|-------|-----|
|
|
105
|
+
| `paddingTop/Right/Bottom/Left` | `padding` |
|
|
106
|
+
| `itemSpacing` | `gap` |
|
|
107
|
+
|
|
108
|
+
**허용 오차:** ±2px
|
|
109
|
+
|
|
110
|
+
#### 3.5 크기 (Weight: 15%)
|
|
111
|
+
|
|
112
|
+
| Figma | CSS |
|
|
113
|
+
|-------|-----|
|
|
114
|
+
| `absoluteBoundingBox.width` | `width` |
|
|
115
|
+
| `absoluteBoundingBox.height` | `height` |
|
|
116
|
+
| `cornerRadius` | `border-radius` |
|
|
117
|
+
|
|
118
|
+
#### 3.6 컴포넌트 구조 (Weight: 10%)
|
|
119
|
+
|
|
120
|
+
- children 개수와 순서
|
|
121
|
+
- 중첩 구조
|
|
122
|
+
|
|
123
|
+
#### 3.7 디자인 토큰 (추가 검증)
|
|
124
|
+
|
|
125
|
+
Figma Variables (`boundVariables`)와 코드 토큰 비교:
|
|
126
|
+
|
|
127
|
+
| Figma | 코드 | 결과 |
|
|
128
|
+
|-------|------|------|
|
|
129
|
+
| `color/primary` 토큰 | `var(--color-primary)` | ✅ 일치 |
|
|
130
|
+
| `color/primary` 토큰 | `#3366FF` (하드코딩) | 🟡 토큰 미사용 |
|
|
131
|
+
| `color/primary` 토큰 | `var(--color-secondary)` | 🔴 토큰 불일치 |
|
|
132
|
+
|
|
133
|
+
### 4. 심각도 판정
|
|
134
|
+
|
|
135
|
+
- 🔴 **Critical**: 브랜드/UX에 영향, 즉시 수정 필요
|
|
136
|
+
- 🟡 **Warning**: 미세한 차이, 검토 권장
|
|
137
|
+
- 🟢 **Info**: 참고사항, 의도적 차이 가능
|
|
138
|
+
|
|
139
|
+
---
|
|
140
|
+
|
|
141
|
+
## Output Format
|
|
142
|
+
|
|
143
|
+
```markdown
|
|
144
|
+
# Figma Implementation Check Report
|
|
145
|
+
|
|
146
|
+
## 요약
|
|
147
|
+
- **컴포넌트:** [ComponentName]
|
|
148
|
+
- **Figma Node:** [node name/id]
|
|
149
|
+
- **구현 파일:** [file path]
|
|
150
|
+
- **전체 일치도:** X%
|
|
151
|
+
|
|
152
|
+
---
|
|
153
|
+
|
|
154
|
+
## 심각도별 현황
|
|
155
|
+
|
|
156
|
+
| 심각도 | 개수 |
|
|
157
|
+
|--------|------|
|
|
158
|
+
| 🔴 Critical | X |
|
|
159
|
+
| 🟡 Warning | Y |
|
|
160
|
+
| 🟢 Info | Z |
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## 🔴 Critical Issues
|
|
165
|
+
|
|
166
|
+
### 1. [카테고리] 불일치
|
|
167
|
+
**위치:** `src/components/Button.tsx:15`
|
|
168
|
+
|
|
169
|
+
| 속성 | Figma | 코드 | 차이 |
|
|
170
|
+
|------|-------|------|------|
|
|
171
|
+
| fontSize | 16px | 14px | -2px |
|
|
172
|
+
|
|
173
|
+
**현재 코드:**
|
|
174
|
+
```tsx
|
|
175
|
+
<button className="text-sm"> // 14px
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
**수정 제안:**
|
|
179
|
+
```tsx
|
|
180
|
+
<button className="text-base"> // 16px
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
---
|
|
184
|
+
|
|
185
|
+
## 🟡 Warning Issues
|
|
186
|
+
|
|
187
|
+
[같은 형식...]
|
|
188
|
+
|
|
189
|
+
---
|
|
190
|
+
|
|
191
|
+
## 🟢 Info
|
|
192
|
+
|
|
193
|
+
[같은 형식...]
|
|
194
|
+
|
|
195
|
+
---
|
|
196
|
+
|
|
197
|
+
## 카테고리별 상세
|
|
198
|
+
|
|
199
|
+
### 레이아웃
|
|
200
|
+
| 속성 | Figma | 코드 | 상태 |
|
|
201
|
+
|------|-------|------|------|
|
|
202
|
+
| direction | row | flex-row | ✅ |
|
|
203
|
+
| justify | center | justify-center | ✅ |
|
|
204
|
+
|
|
205
|
+
### 색상
|
|
206
|
+
| 속성 | Figma | 코드 | 상태 |
|
|
207
|
+
|------|-------|------|------|
|
|
208
|
+
| background | #3366FF | bg-blue-500 | 🟡 |
|
|
209
|
+
| text | #FFFFFF | text-white | ✅ |
|
|
210
|
+
|
|
211
|
+
### 타이포그래피
|
|
212
|
+
| 속성 | Figma | 코드 | 상태 |
|
|
213
|
+
|------|-------|------|------|
|
|
214
|
+
| fontSize | 16px | text-base | ✅ |
|
|
215
|
+
| fontWeight | 600 | font-semibold | ✅ |
|
|
216
|
+
|
|
217
|
+
### 간격
|
|
218
|
+
| 속성 | Figma | 코드 | 상태 |
|
|
219
|
+
|------|-------|------|------|
|
|
220
|
+
| paddingX | 24px | px-6 | ✅ |
|
|
221
|
+
| paddingY | 12px | py-3 | ✅ |
|
|
222
|
+
| gap | 8px | gap-2 | ✅ |
|
|
223
|
+
|
|
224
|
+
### 크기
|
|
225
|
+
| 속성 | Figma | 코드 | 상태 |
|
|
226
|
+
|------|-------|------|------|
|
|
227
|
+
| width | auto | w-auto | ✅ |
|
|
228
|
+
| height | 48px | h-12 | ✅ |
|
|
229
|
+
| borderRadius | 8px | rounded-lg | ✅ |
|
|
230
|
+
|
|
231
|
+
### 디자인 토큰
|
|
232
|
+
| 속성 | Figma 토큰 | 코드 토큰 | 상태 |
|
|
233
|
+
|------|------------|-----------|------|
|
|
234
|
+
| background | `color/primary` | `var(--color-primary)` | ✅ |
|
|
235
|
+
| text | `color/on-primary` | `text-white` | 🟡 하드코딩 |
|
|
236
|
+
|
|
237
|
+
---
|
|
238
|
+
|
|
239
|
+
## Tailwind 값 참조표
|
|
240
|
+
|
|
241
|
+
| Tailwind | px |
|
|
242
|
+
|----------|-----|
|
|
243
|
+
| text-xs | 12px |
|
|
244
|
+
| text-sm | 14px |
|
|
245
|
+
| text-base | 16px |
|
|
246
|
+
| text-lg | 18px |
|
|
247
|
+
| p-1 | 4px |
|
|
248
|
+
| p-2 | 8px |
|
|
249
|
+
| p-3 | 12px |
|
|
250
|
+
| p-4 | 16px |
|
|
251
|
+
| p-6 | 24px |
|
|
252
|
+
| rounded-lg | 8px |
|
|
253
|
+
| rounded-xl | 12px |
|
|
254
|
+
|
|
255
|
+
---
|
|
256
|
+
|
|
257
|
+
## 권장 조치
|
|
258
|
+
|
|
259
|
+
1. **즉시 수정:** 🔴 Critical 이슈
|
|
260
|
+
2. **검토 필요:** 🟡 Warning 이슈 (디자이너와 확인)
|
|
261
|
+
3. **참고:** 🟢 Info (문서화 또는 무시)
|
|
262
|
+
```
|
|
263
|
+
|
|
264
|
+
---
|
|
265
|
+
|
|
266
|
+
## 사용 예시
|
|
267
|
+
|
|
268
|
+
```bash
|
|
269
|
+
# 권장: Figma에서 선택 + IDE에서 선택 후 실행
|
|
270
|
+
/figma-check
|
|
271
|
+
|
|
272
|
+
# Figma node를 직접 지정 (IDE 선택은 그대로 사용)
|
|
273
|
+
/figma-check https://www.figma.com/file/xxx?node-id=123:456
|
|
274
|
+
|
|
275
|
+
# node ID만 지정
|
|
276
|
+
/figma-check 123:456
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
**일반적인 워크플로우:**
|
|
280
|
+
1. Figma Desktop에서 비교할 컴포넌트 클릭
|
|
281
|
+
2. IDE에서 해당 컴포넌트 코드 선택 (드래그)
|
|
282
|
+
3. `/figma-check` 실행
|
|
283
|
+
|
|
284
|
+
---
|
|
285
|
+
|
|
286
|
+
## 중요 사항
|
|
287
|
+
|
|
288
|
+
- **Figma Desktop MCP 필요**: Figma Desktop MCP가 설정되어 있어야 선택 정보가 context에 전달됩니다
|
|
289
|
+
- **한국어 출력**: 최종 리포트는 한국어로
|
|
290
|
+
- **수치 비교**: 모든 차이는 수치로 표시 (Figma: 16px vs 코드: 14px)
|
|
291
|
+
- **수정 제안**: 문제만 지적하지 말고 해결책 제시
|
|
292
|
+
- **file:line 참조**: 코드 위치 정확히 표시
|