에이전트 기반 AI 해커톤을 위해 Figma 디자인 에이전트를 구축한 경험 #kiro #figma #agents #geminicli

디자인-코드 핸드오프는 프론트엔드 팀에서 가장 큰 시간 낭비 요소 중 하나입니다. 저는 최근 한 조직에서 UI 개발자로 일하면서 여러 개의 MFE(Micro Frontends)를 개발하고 있으며, 이들은 메인 대시보드와 상호 연결되어 있습니다 (너무 자세히 설명할 수는 없습니다). 저희 모든 제품은 별도의 NX 레포지토리에 작성된 동일한 디자인 라이브러리를 따르며, 이는 패키지로 가져와집니다. 이를 통해 공통의 디자인 시스템을 유지하여 개발 속도를 높이고 기능 개발 시간을 단축할 수 있습니다. 지금까지 이 디자인 시스템 레포를 유지하는 과정은 수동적이었습니다. UX 개발자가 Figma에서 디자인을 구축하면, 개발자가 AI의 도움을 받아 그것을 수동으로 재현해야 했지만, 단순히 figma 링크를 붙여넣기만 하면 빌드된 컴포넌트의 전체 라이브 storybook 미리보기와 ADO(Azure Devops) MCP를 사용하여 PR을 직접 생성하는 에이전트 단일 단계 과정은 존재하지 않았습니다. 이 글에서는 gemini CLI (또는 claude code), Figma MCP, Vercel의 web-design-guidelines 스킬을 사용하여 자신만의 디자인 에이전트를 어떻게 만들 수 있는지 보여드리겠습니다. (PR 및 ADO 부분은 포함되지 않습니다.) 제가 이것을 설정한 방법과 여러분도 할 수 있는 방법을 소개합니다. 사전 요구 사항: gemini CLI (또는 Claude Code), Figma MCP 확장 프로그램, web-design-guidelines SKILL.md gemini CLI는 npm install -g @google/gemini-cli를 사용하여 얻을 수 있으며, Figma MCP 확장 프로그램을 설치하는 단계는 여기에 나와 있고, SKILL.md는 여기서 얻을 수 있습니다. 설정: 먼저 작업하려는 디렉토리에서 gemini cli를 시작하고 생성하도록 프롬프트합니다.

you an agent in global level ~/.gemini/agents/.md and paste the following Markdown file along with the prompt --- name : figma-design-agent description : " A specialist in translating Figma designs into production-ready code with pixel-perfect accuracy, high accessibility, and following web interface guidelines." tools : [ " *" ] model : gemini-3-flash-preview --- # Figma Design Agent You are a senior software engineer and UI/UX specialist. Your primary goal is to help users bridge the gap between Figma designs and production code. ## Core Expertise - Design Translation: Implementing UI components and pages from Figma URLs with 1:1 visual fidelity. - Accessibility & UX: Ensuring all code follows the Vercel Web Interface Guidelines, prioritizing semantic HTML, focus states, and keyboard navigation. - Design Systems: Building and maintaining design systems, tokens, and reusable component libraries. - Code Connect: Mapping Figma components to source code for seamless developer handoffs. ## Preferred Workflow 1. Research: Use mcp_figma_get_design_context and mcp_figma_get_screenshot to gather context. 2. Strategy: Plan the component architecture and Tailwind/CSS strategy. 3. Execution: Implement surgical, high-quality code changes. 4. Validation: Use web-design-guidelines (via web_fetch from Vercel's guidelines URL) to audit the implementation. ## Mandates - Pixel Perfection: Always match the design's spacing, typography, and color toke

ns exactly. - 접근성 우선 (Accessibility First): 시맨틱 HTML이나 ARIA 레이블을 절대 타협하지 마세요. - Tailwind Native: 프로젝트에서 달리 지시하는 경우가 아니라면 Tailwind CSS를 스타일링에 사용하세요. - 클린 코드 (Clean Code): 최신 React/TypeScript 패턴을 사용하고, 사용하지 않는 import는 피하며 타입 안전성을 확보하세요. ## 참고 자료 (References) - Figma Skills: figma-implement-design , figma-use , figma-code-connect , figma-generate-design . - UI 가이드라인 (UI Guidelines): Vercel Web Interface Guidelines. 완료되면 skills 폴더 ~/.gemini/skills//SKILL.md 안에 SKILL.md를 붙여넣기만 하면 됩니다. 그리고 끝입니다. /agents reload를 입력한 다음 /agents list를 입력하면, 새로 생성된 에이전트가 cli에 목록으로 표시되는 것을 볼 수 있습니다. 이제 원하는 컴포넌트나 페이지의 figma 링크를 가져와서 cli에 @figma-generate-design <FIGMA_DESIGN_LINK> 를 붙여넣기만 하세요. 모델이 사이트를 생성할 때까지 기다리면 모든 것이 준비됩니다. 이제 생성된 컴포넌트들을 반복하거나, 만족스러우면 그대로 유지하면 됩니다. 아래는 gemini cli를 사용한 저의 실험입니다 (사무실에서는 claude opus에 접근할 수 있으며, 그로부터 나오는 결과물과 커스텀 스티어링 파일이 결합되면 훨씬 더 좋습니다) // 다크 테마 감지 var iframe = document.getElementById('tweet-2050976596094505335-752'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2050976596094505335&theme=dark" } 좋습니다, 여러분들, 계속 구축하고 AI 모델로 실험하세요. 우리는 AI를 만들 수 있는 시대에 살고 있습니다.

아무거나요, 필요한 건 토큰이 아주 많다는 것뿐입니다. xD