스킬 자체의 표현으로
이 스킬은 네 가지 흐름으로 Stitch MCP를 구동합니다: 텍스트로부터 새 화면 생성, 이미지나 목업 재현, 기존 화면 편집, 그리고 변형 생성입니다. 생성이나 편집을 호출하기 전에 프롬프트 강화 파이프라인을 실행하여 프로젝트와 디자인 시스템을 확인하고, 모호한 표현을 디자인 매핑에서 가져온 UI/UX 용어로 바꾸고, PLATFORM 및 PAGE STRUCTURE 섹션이 있는 템플릿을 사용해 레이아웃, 콘텐츠, 구조 중심으로 프롬프트 형식을 지정합니다.
시각적 스타일링은 프로젝트 수준에서 유지되므로, 생성 프롬프트에는 색상 코드, 폰트, 모서리 반경 값이 포함되어서는 안 됩니다. AI 피드백은 매 호출 후 표시되며 산출물은 .stitch/designs에 다운로드됩니다.
산출물
- 생성된 화면의 HTML과 스크린샷이 .stitch/designs 디렉터리에 다운로드됩니다.
- outputComponents로 반환된 AI 텍스트 설명과 제안이 사용자에게 표시됩니다.
- 선택한 방향에 대한 변형 화면을 1개에서 5개씩 배치로 생성합니다.
작동 방식
- 01무엇보다 먼저 프롬프트를 강화하십시오
이 파이프라인은 선택 사항이 아니라 필수입니다: 에이전트는 Stitch 생성 또는 편집 도구를 호출하기 전에 사용자의 요청을 다시 작성합니다.
- 02프로젝트가 이미 스타일링하는 항목을 확인하십시오
프로젝트에 이미 디자인 시스템이 있다면 색상, 폰트, 모서리 반경이 프로젝트 수준에서 적용되므로, 강화된 프롬프트는 시각적 스타일링을 완전히 배제해야 합니다.
- 03프롬프트를 플랫폼과 페이지 섹션 형식으로 구성하십시오
새 화면은 전체 목적을 먼저 명시한 다음 PLATFORM, 그리고 Header부터 Footer까지 번호가 매겨진 PAGE STRUCTURE로 이어지는 템플릿을 따릅니다.
- 04네 가지 흐름 중 하나를 선택하십시오
어떤 도구가 호출되기 전에 요청은 Generate from Text, Generate from Image, Edit, Generate Variants 중 하나로 라우팅됩니다.