stitch-ui-design

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 템플릿으로 옮기는 과정입니다.

1. HTML/CSS 추출: Stitch 화면의 결과물에서 구조와 Tailwind 클래스를 복사합니다.
2. Template 분리: 반복되는 Header, Footer, Sidebar 등은 templates/base.html 또는 partials/로 분리합니다.
3. HTMX 통합: Stitch 디자인의 버튼이나 폼에 hx-get, hx-post 속성을 추가하여 동적 기능을 부여합니다.
4. Static 자산 관리: 디자인에 사용된 이미지나 폰트 등을 Django static/ 디렉토리에 배치합니다.

5. UI 디자이너의 체크리스트

• Stitch 화면이 PRD의 요구사항을 모두 충족하는가?

• 디자인 시스템이 모든 화면에 일관되게 적용되었는가?
• Tailwind CSS 클래스가 표준에 맞게 작성되었는가?
• Django 템플릿 문법({% block %}, {% include %})으로의 변환이 용이한 구조인가?