design-brief-writer사용자와 하이브리드(객관식 일괄 + 자유 텍스트 단계) 인터뷰를 통해 5가지 deterministic 요소를 수집하고, 디자인 기획서 마크다운을 산출한다. AI가 추측 가능한 부분(non-deterministic)은 채우지 않고 명시적 placeholder로 남겨 web-design-planner에게 전달한다.
figma-uploader검수 통과한 HTML을 plugin:figma:figma MCP의 generate_figma_design 도구를 활용하여 Figma 파일에 업로드한다. 사용자가 지정한 Figma URL이 있으면 그 파일에, 없으면 새 파일을 만들어 결과 URL을 반환한다.
web-design-coder디자인 사양을 받아 단일 HTML 파일로 구현한다. Pretendard 기반의 시각적 완성도 높은, 프로덕션 등급 HTML/CSS를 작성한다. 검수자의 피드백을 받으면 동일 파일을 수정 반영한다.
web-design-planner사용자가 자연어로 표현한 화면 요구사항을 구체적 디자인 사양으로 변환한다. 화면의 정보 구조, 컴포넌트 인벤토리, 톤·무드보드, 타이포·컬러 시스템, 레이아웃 그리드를 결정하여 코더가 구현할 수 있는 단일 사양 문서를 만든다.
web-design-reviewer코더가 작성한 HTML을 사양과 1:1로 대조하는 script 기반 1차 검수 에이전트. 사양에 명시된 컬러 변수·타이포 스케일·컴포넌트·카피·캔버스 너비가 그대로 반영됐는지 정적 분석하고 자동 재작업 가능한 JSON 피드백을 산출한다. 시각 평가는 다루지 않고 사용자 직접 검수(2차)에 위임한다. PNG 렌더링은 사용하지 않는다.
design-brief화면 디자인 작업 전에 deterministic 6요소(최종 형태·화면 설명·흐름분기시나리오·페르소나·브랜드·실제 카피)를 사용자 인터뷰로 수집하여 디자인 기획서를 작성한다. "기획서 만들어줘", "디자인 브리프 작성", "기획부터 시작", "/design-brief", "디자인 시작 전에 정리부터", "기획서만 먼저" 같은 모든 기획서 작성 요청에 트리거. AI 추측 가능한 영역은 손대지 않고 사용자만 결정 가능한 항목에 집중하는 것이 핵심. web-design 스킬 호출 전 단계로 사용 권장.
design-quality-review코더가 작성한 HTML을 사양과 1:1로 대조하는 script 기반 1차 검수 가이드. CSS 변수·타이포 스케일·컴포넌트 인벤토리·카피 텍스트가 사양 그대로 반영됐는지 검사하고 자동 재작업 가능한 구조화된 JSON 피드백을 산출. 시각 검수는 사용자 직접 검수(2차)의 영역이므로 본 검수 단계에서는 다루지 않는다. PNG 렌더링은 사용하지 않는다. 웹 디자인 검수자가 1차 검수 시 반드시 이 스킬을 로드.
figma-html-upload검수 통과한 단일 HTML 디자인을 plugin:figma:figma MCP의 generate_figma_design 도구로 Figma 파일에 업로드하는 절차. 사용자 지정 Figma URL이 있으면 그 파일에, 없으면 새 파일을 만들어 결과 deep-link URL을 산출한다. figma-uploader 에이전트 전용. 작업 시작 전 figma-generate-design + figma-use 스킬을 함께 로드할 것.
html-design-creation디자인 사양으로부터 시각적으로 완성도 높은 단일 HTML 파일을 작성하는 가이드. Pretendard CDN, 인라인 <style>, JavaScript 없이 정적 HTML로 구현하며, generic AI aesthetic을 의도적으로 회피한다. 웹 디자인 코더가 HTML을 작성하기 전에 반드시 이 스킬을 로드할 것. 랜딩 페이지·웹앱 컴포넌트·폼·대시보드 등 모든 화면 유형에 적용.
web-design자연어로 표현된 UI/UX 화면 요구를 받아 단일 HTML로 구현하고 Figma에 업로드하는 4-에이전트 파이프라인을 구동한다. "랜딩 페이지 만들어줘", "어드민 대시보드 디자인", "회원가입 폼 디자인 후 Figma에 올려줘", "이 화면 다시 디자인", "방금 만든 디자인 수정해줘", "Figma에 업로드만 다시" 같은 모든 웹 디자인·Figma 업로드 요청에 트리거. 화면 디자인을 HTML로 만들고 Figma에 푸시하고 싶다면 반드시 이 스킬을 사용.
