| name | stitch-ui-design |
| description | StitchMCP를 활용하여 고품질 웹 UI를 설계하고 프로토타이핑합니다. UI 디자이너가 텍스트 프롬프트로 화면을 생성하고, 디자인 시스템을 적용하며, 최종적으로 Django MVT 템플릿으로 변환하는 과정을 가이드합니다. 사용자가 "UI 디자인해줘", "화면 그려줘", "Stitch로 프로토타입 만들어줘"라고 요청할 때 이 스킬을 사용하세요. |
Stitch UI Design & Prototyping Skill
이 스킬은 StitchMCP를 사용하여 아이디어를 시각적인 화면으로 빠르게 전환하고, 이를 Django 프로젝트의 템플릿 시스템에 통합하는 방법을 다룹니다.
1. Stitch 프로젝트 관리
- 프로젝트 생성: 새로운 서비스 개발 시
create_project를 통해 전용 디자인 공간을 확보합니다.
- 기존 프로젝트 연결:
list_projects를 통해 현재 진행 중인 하네스 프로젝트와 연관된 디자인을 찾습니다.
2. 화면 설계 및 생성 (Screen Generation)
- 프롬프트 전략:
generate_screen_from_text를 사용할 때, 단순히 "로그인 페이지"라고 하기보다 "Tailwind CSS를 사용하는 세련된 다크 모드 로그인 페이지, 글래스모피즘 효과 적용"과 같이 구체적인 스타일을 지정합니다.
- 반복 수정:
edit_screens를 사용하여 특정 영역(버튼 색상, 배치 등)을 정교하게 다듬습니다.
- 변체 생성:
generate_variants를 활용하여 여러 가지 디자인 시안을 생성하고 최적의 UI를 선택합니다.
3. 디자인 시스템 적용 (Design System)
- 일관성 유지:
create_design_system으로 프로젝트의 컬러 팔레트(Primary, Secondary), 타이포그래피, 모서리 곡률(Roundness)을 설정합니다.
- 일괄 적용:
apply_design_system을 사용하여 생성된 모든 화면에 브랜드 아이덴티티를 즉시 반영합니다.
4. Django MVT 통합 (Export to Templates)
Stitch에서 완성된 디자인을 Django 템플릿으로 옮기는 과정입니다.
- HTML/CSS 추출: Stitch 화면의 결과물에서 구조와 Tailwind 클래스를 복사합니다.
- Template 분리: 반복되는 Header, Footer, Sidebar 등은
templates/base.html 또는 partials/로 분리합니다.
- HTMX 통합: Stitch 디자인의 버튼이나 폼에
hx-get, hx-post 속성을 추가하여 동적 기능을 부여합니다.
- Static 자산 관리: 디자인에 사용된 이미지나 폰트 등을 Django
static/ 디렉토리에 배치합니다.
5. UI 디자이너의 체크리스트
