# Figma To Code

> Figma 디자인을 Emotion 기반 코드로 변환. Pixel-perfect 구현.

- **Type:** Skill
- **Install:** `agentstack add skill-ggombee-code-forge-figma-to-code`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ggombee](https://agentstack.voostack.com/s/ggombee)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ggombee](https://github.com/ggombee)
- **Source:** https://github.com/ggombee/code-forge/tree/main/skills/figma-to-code

## Install

```sh
agentstack add skill-ggombee-code-forge-figma-to-code
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Figma to Code Skill

> Figma 디자인을 Emotion styled 기반 코드로 변환

---

## 트리거 조건

| 트리거                        | 반응        |
| ----------------------------- | ----------- |
| Figma URL 제공                | 즉시 실행   |
| "Figma 변환", "디자인 구현"   | 스킬 활성화 |
| `/start` 커맨드 내 Figma 분석 | 자동 연계   |

---

## 워크플로우

### Phase 1: 디자인 추출

```typescript
// Figma MCP 도구로 디자인 컨텍스트 추출
mcp__figma__get_design_context({
  fileKey: '{file_key}',
  nodeId: '{node_id}',
  clientLanguages: 'typescript',
  clientFrameworks: 'react',
});
```

**추출 항목:**

- 레이아웃 구조 (flex, gap, padding)
- 색상 값 (hex → semantic color 매핑)
- 타이포그래피 (font-size, weight, line-height)
- 컴포넌트 계층 구조

---

### Phase 2: 컴포넌트 매핑

**파일 구조:**

```
{컴포넌트}/
├── index.tsx      # 컴포넌트 로직
└── styled.ts      # Emotion styled 정의
```

**styled.ts 템플릿:**

```typescript
import styled from '@emotion/styled';

export const Container = styled.div`
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
`;

// 상태별 스타일 (transient props: $접두사)
export const FilterButton = styled.button`
  padding: 8px 16px;
`;
```

**index.tsx 템플릿:**

```typescript
import { FC } from 'react';

import { Container, Title, FilterButton } from './styled';

interface Props {
  // props 정의
}

export const Component: FC = ({ ...props }) => {
  return (
    
      {/* styled 컴포넌트 직접 사용 */}
    
  );
};
```

---

### Phase 3: Agent Teams 병렬 구현 (Claude Max)

여러 컴포넌트를 동시에 생성할 때:

```typescript
TeamCreate({ team_name: 'figma-team', description: 'Figma to Code 변환' });
Task(subagent_type='implementor', team_name='figma-team', name='component-1', model='sonnet',
  prompt='FilterButton 컴포넌트 구현');
Task(subagent_type='implementor', team_name='figma-team', name='component-2', model='sonnet',
  prompt='DateControls 컴포넌트 구현');
// 완료 후 → shutdown_request → TeamDelete
```

> Agent Teams 미가용 시 Task 병렬 호출로 폴백

---

### Phase 4: 검증

**Pixel-perfect 체크리스트:**

- [ ] 레이아웃 (flex-direction, gap, padding) 일치
- [ ] 색상 (semantic color 매핑) 일치
- [ ] 폰트 (size, weight, line-height) 일치
- [ ] 상태별 스타일 (hover, active, disabled) 일치
- [ ] 반응형 동작 (있는 경우)

---

## 금지 패턴

| 금지              | 대안             |
| ----------------- | ---------------- |
| inline style 객체 | Emotion styled   |
| 하드코딩 색상     | semantic color   |
| px 매직넘버       | 변수화 또는 주석 |
| !important        | specificity 조정 |

---

## 참조 문서

| 문서                                                   | 용도            |
| ------------------------------------------------------ | --------------- |
| `@${CLAUDE_PLUGIN_ROOT}/instructions/validation/forbidden-patterns.md` | 금지 패턴       |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [ggombee](https://github.com/ggombee)
- **Source:** [ggombee/code-forge](https://github.com/ggombee/code-forge)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-ggombee-code-forge-figma-to-code
- Seller: https://agentstack.voostack.com/s/ggombee
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.