1. “스킬”이 무엇인가 스킬은 AI에게 미리 넣어 두는 작업 설명서다. 마크다운 파일 한 장이며, “이 상황에서는 이런 순서로, 이런 규칙을 지키며 일해라”를 적어 둔 것이다. 여기서 반드시 구분해야 하는 개념이 둘 있다. 구분 정체 비유 MCP 도구 실제로 Figma 파일을 읽고 쓰는 연결 통로 (use_figma, get_design_context 등) 손과 눈 스킬 그 도구를 언제·어떤 순서로 쓸지 … 더 읽기
이 문서는 여러 명이 한 팀이 되어 참고 사이트(KB손해보험)를 다시 만들어 보는 실습의 디자인 시스템 등록 단계를 다룬다. Figma Design 파일 안 에이전트로 변수·스타일·컴포넌트·베리언트를 등록하되, 이름과 값을 Tailwind CSS v4의 테마 변수 체계에 1:1로 맞추는 것이 목표다. 여기 적힌 값은 2026년 7월 기준 Tailwind CSS v4.3 공식 문서의 기본 테마 변수 목록에서 뽑았다. 끝까지 따라 … 더 읽기
이 문서는 피그마(Figma)에서 제작한 모션 그래픽을 투명 배경이 포함된 동영상 파일로 내보내고, 어도비 프리미어 프로(Adobe Premiere Pro)에서 곧바로 합성할 수 있도록 돕는 플러그인과 로컬 인코더 시스템의 구현 프롬프트를 다룬다. 피그마 환경에서 애니메이션 프레임을 추출하는 클라이언트와 이를 퀵타임(QuickTime) 동영상으로 변환하는 서버 간의 연동 구조를 설명한다. 영상 편집 소프트웨어와의 호환성을 확보하기 위한 코덱 설정과 바이너리 구조 검증 … 더 읽기
1. 디자인 토큰 1.1 이런 경험이 있는가? 디자인 작업을 하다 보면 이런 상황이 자주 생긴다. 개발자: "버튼 색이 피그마랑 다른데요?" 디자이너: "아, 제가 쓴 파란색이 #2563EB인데 혹시 #1D4ED8 쓰셨나요?" 개발자: "… 비슷해 보여서 그냥 썼어요." 또는 이런 상황도 있다. 디자이너: "브랜드 컬러가 바뀌었어요. 파란색 → 보라색으로요." 개발자: "피그마에 파란색이 쓰인 곳이 87군데네요. 다 찾아서 바꿔야 … 더 읽기
