Alternatives · Locofy
oh-my-design vs Locofy
Locofy도 Figma 디자인을 코드로 바꾸는 도구지만, Anima보다 "production-ready"를 강조하며 responsive·state·props 추출에 무게를 둡니다. 여전히 Figma가 source고 코드가 산출물입니다.
| 기준 | oh-my-design | Locofy |
|---|---|---|
| 목적 | AI agent가 매 요청마다 읽는 brand spec | Figma → production-grade code (props/state 포함) |
| Output | DESIGN.md (markdown spec) | React/Next/Vue/HTML |
| AI agent integration | Claude Code · Codex · Cursor · OpenCode 직결 | Plugin · Figma 안에서 동작 |
| Brand voice | §10–15에서 명시 (voice/persona/motion) | Figma 시안 그대로 |
| Install | `npx oh-my-design-cli install-skills` | Figma plugin (`Locofy Lightning`) |
| Price | Free · MIT | Freemium · seat 기반 유료 |
| Open source | Yes (MIT) | No (proprietary) |
When to use Locofy
- Figma 시안을 responsive React 코드로 정밀히 옮겨야 할 때
- 디자이너가 prop/state까지 Figma에서 정의해두는 팀
- Pixel-perfect 변환이 우선순위일 때
When to use oh-my-design
- Figma가 아예 없거나, 시안보다 spec이 먼저인 흐름일 때
- AI agent가 매 요청마다 spec을 읽고 새 화면을 자율 생성하길 원할 때
- 코드뿐 아니라 voice·copy·motion까지 같은 spec으로 통제하고 싶을 때
정리. Locofy과 oh-my-design은 같은 layer가 아닙니다. Locofy이 figma → production-grade code (props/state 포함) 쪽이라면, oh-my-design은 그 도구가 매번 같은 brand context로 동작하도록 만드는 spec입니다. 많은 팀이 둘을 같이 씁니다 — either/or가 아닙니다.
Other comparisons