moai-design-tools
✓Figma MCP, Pencil 렌더러, Pencil-to-code 내보내기를 담당하는 디자인 도구 통합 전문가입니다. Figma에서 디자인 컨텍스트를 가져오거나, Pencil DNA 코드를 .pen 프레임으로 렌더링하거나, .pen 디자인을 React/Tailwind 코드로 내보내거나, 디자인-코드 워크플로를 선택할 때 사용하세요. 디자인 가져오기(Figma), 시각적 렌더링(Pencil MCP) 및 코드 생성(React/Tailwind)을 지원합니다.
SKILL.md
Comprehensive design-to-code workflow guidance covering three major capabilities: Figma MCP (design fetching), Pencil MCP (visual rendering), and Pencil-to-code export (React/Tailwind generation).
Figma integration for fetching design context, metadata, and screenshots from Figma files.
Best For: Fetching design tokens, component specifications, layout information, and style guides from existing Figma files. Extracting design system values and understanding design structure.
Figma MCP, Pencil 렌더러, Pencil-to-code 내보내기를 담당하는 디자인 도구 통합 전문가입니다. Figma에서 디자인 컨텍스트를 가져오거나, Pencil DNA 코드를 .pen 프레임으로 렌더링하거나, .pen 디자인을 React/Tailwind 코드로 내보내거나, 디자인-코드 워크플로를 선택할 때 사용하세요. 디자인 가져오기(Figma), 시각적 렌더링(Pencil MCP) 및 코드 생성(React/Tailwind)을 지원합니다. 출처: modu-ai/moai-adk.
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/modu-ai/moai-adk --skill moai-design-tools- 카테고리
- *크리에이티브
- 인증됨
- ✓
- 최초 등록
- 2026-02-17
- 업데이트
- 2026-02-18
빠른 답변
moai-design-tools이란?
Figma MCP, Pencil 렌더러, Pencil-to-code 내보내기를 담당하는 디자인 도구 통합 전문가입니다. Figma에서 디자인 컨텍스트를 가져오거나, Pencil DNA 코드를 .pen 프레임으로 렌더링하거나, .pen 디자인을 React/Tailwind 코드로 내보내거나, 디자인-코드 워크플로를 선택할 때 사용하세요. 디자인 가져오기(Figma), 시각적 렌더링(Pencil MCP) 및 코드 생성(React/Tailwind)을 지원합니다. 출처: modu-ai/moai-adk.
moai-design-tools 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/modu-ai/moai-adk --skill moai-design-tools 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/modu-ai/moai-adk
상세
- 카테고리
- *크리에이티브
- 출처
- skills.sh
- 최초 등록
- 2026-02-17