# Stitch Enhance Prompt > 모호한 UI 아이디어를 Stitch에 최적화된 상세 프롬프트로 변환합니다 — 구체성 향상, UI/UX 키워드 추가, 디자인 시스템 컨텍스트 주입. Triggers on: 프롬프트 향상, Stitch 프롬프트, UI 아이디어, 프롬프트 개선. NOT for: 직접 코딩, React 구현. - **Type:** Skill - **Install:** `agentstack add skill-jh941213-codex-lattice-stitch-enhance-prompt` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [jh941213](https://agentstack.voostack.com/s/jh941213) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [jh941213](https://github.com/jh941213) - **Source:** https://github.com/jh941213/codex-lattice/tree/main/skills/stitch-enhance-prompt ## Install ```sh agentstack add skill-jh941213-codex-lattice-stitch-enhance-prompt ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Stitch Prompt Enhancer 모호한 UI 아이디어를 Stitch에 최적화된 상세하고 구조화된 프롬프트로 변환합니다. ## 개요 Stitch는 상세하고 구체적인 프롬프트에서 더 좋은 결과를 생성합니다. 이 스킬은: 1. **구체성 향상**: 모호한 설명을 상세한 사양으로 변환 2. **UI/UX 키워드 추가**: Stitch가 이해하는 디자인 용어 주입 3. **디자인 시스템 컨텍스트**: `DESIGN.md`에서 스타일 정보 통합 4. **구조화된 출력**: 최적의 생성 결과를 위한 프롬프트 구조화 ## Stitch 프롬프팅 원칙 ### 효과적인 프롬프트의 3요소 | 요소 | 설명 | 예시 | |------|------|------| | **콘텐츠** | 무엇을 보여줄지 | "사용자 프로필 카드" | | **스타일** | 어떻게 보일지 | "미니멀, 둥근 모서리, 부드러운 그림자" | | **레이아웃** | 어떻게 배치할지 | "중앙 정렬, 3열 그리드" | ### 프롬프트 품질 스펙트럼 ``` ❌ 나쁜 프롬프트: "로그인 페이지" ⚠️ 괜찮은 프롬프트: "이메일과 비밀번호 필드가 있는 로그인 페이지" ✅ 좋은 프롬프트: " 미니멀한 로그인 페이지: - 중앙에 배치된 카드 형태의 로그인 폼 - 상단에 로고와 환영 메시지 - 이메일 입력 필드 (아이콘 포함) - 비밀번호 입력 필드 (보이기/숨기기 토글) - 파란색 기본 버튼 '로그인' - '비밀번호 찾기' 링크 - '계정 만들기' 보조 버튼 - 부드러운 그라데이션 배경 " ``` ## 향상 프로세스 ### Step 1: 입력 분석 사용자의 원본 아이디어를 분석합니다: ``` 입력: "대시보드 만들어줘" 분석: - 타입: 대시보드 (관리/분석 UI) - 누락된 정보: - 어떤 데이터? - 어떤 스타일? - 주요 기능? ``` ### Step 2: 컨텍스트 수집 관련 정보를 수집합니다: 1. **DESIGN.md 확인** (있는 경우) - 색상 팔레트 - 타이포그래피 규칙 - 컴포넌트 스타일 2. **도메인 추론** - 사용자 언급에서 도메인 파악 - 일반적인 패턴 적용 ### Step 3: 프롬프트 확장 #### 확장 체크리스트 - [ ] **페이지 목적**: 이 페이지의 주요 목표는? - [ ] **사용자 유형**: 누가 이 페이지를 사용하는가? - [ ] **핵심 요소**: 반드시 포함해야 할 요소는? - [ ] **레이아웃 구조**: 어떤 섹션으로 구성되는가? - [ ] **상호작용**: 주요 액션은 무엇인가? - [ ] **시각적 스타일**: 어떤 분위기를 전달하는가? ### Step 4: 구조화된 출력 생성 ## 향상 템플릿 ### 기본 템플릿 ```markdown ## [페이지 유형]: [페이지 이름] ### 개요 [페이지의 목적과 주요 기능 1-2문장 설명] ### 시각적 스타일 - **분위기**: [형용사들 - 예: 모던, 미니멀, 전문적] - **색상**: [주요 색상 설명 또는 DESIGN.md 참조] - **타이포그래피**: [폰트 스타일 설명] ### 레이아웃 구조 1. **헤더**: [헤더 구성 요소] 2. **메인 섹션**: [주요 콘텐츠 영역] 3. **사이드바** (선택): [보조 정보] 4. **푸터**: [푸터 구성 요소] ### 핵심 요소 - [요소 1]: [설명] - [요소 2]: [설명] - [요소 3]: [설명] ### 상호작용 - [액션 1]: [동작 설명] - [액션 2]: [동작 설명] ### 디자인 시스템 [DESIGN.md 섹션 6 복사 또는 스타일 가이드] ``` ## 향상 예시 ### 예시 1: 간단한 입력 **원본 입력:** ``` "랜딩 페이지" ``` **향상된 프롬프트:** ```markdown ## 랜딩 페이지: SaaS 제품 소개 ### 개요 잠재 고객에게 제품 가치를 전달하고 가입을 유도하는 현대적인 랜딩 페이지 ### 시각적 스타일 - **분위기**: 신뢰감 있고 전문적, 친근한 느낌 - **색상**: - 기본: 진한 파랑 (#2563EB) - 신뢰와 안정 - 강조: 밝은 주황 (#F97316) - CTA 버튼 - 배경: 순백색 (#FFFFFF) with 미묘한 그레이 섹션 - **타이포그래피**: Inter 폰트, 큰 헤딩 (48-72px), 넉넉한 줄간격 ### 레이아웃 구조 1. **네비게이션 바** - 좌측: 로고 - 중앙: 메뉴 링크 (Features, Pricing, About, Contact) - 우측: "로그인" 텍스트 링크 + "무료 시작" 기본 버튼 2. **히어로 섹션** - 좌측 (60%): - 대형 헤드라인 (제품 가치 제안) - 부제목 (1-2문장 설명) - CTA 버튼 그룹 ("무료 체험" + "데모 보기") - 신뢰 지표 (사용 기업 로고 또는 사용자 수) - 우측 (40%): - 제품 스크린샷 또는 3D 일러스트 - 미묘한 그림자로 떠있는 효과 3. **기능 섹션** - 섹션 제목: "왜 [제품명]인가요?" - 3열 그리드의 기능 카드 - 각 카드: 아이콘 + 제목 + 설명 (2-3줄) 4. **사회적 증거 섹션** - 고객 로고 배너 (그레이스케일) - 선택: 추천 인용문 카드 5. **CTA 섹션** - 배경: 미묘한 그라데이션 - 대형 텍스트: 행동 유도 문구 - 큰 CTA 버튼 6. **푸터** - 4열: 제품, 회사, 리소스, 법적 링크 - 하단: 저작권 + 소셜 아이콘 ### 핵심 요소 - **CTA 버튼**: 둥근 모서리 (8px), 넉넉한 패딩, 호버 시 약간 어두워짐 - **기능 카드**: 흰색 배경, 미묘한 테두리 또는 그림자, 호버 시 살짝 상승 - **신뢰 지표**: 회색조 로고, 자연스러운 간격 ### 상호작용 - 네비게이션 링크: 호버 시 색상 변경 - CTA 버튼: 호버 시 살짝 어두워지고 미세한 상승 - 기능 카드: 호버 시 그림자 강화 및 미세 상승 ### 참고사항 - 모바일 반응형 고려 (DESKTOP 우선 생성) - 이미지 플레이스홀더 사용 가능 - 접근성: 충분한 색상 대비, 큰 클릭 영역 ``` ### 예시 2: 대시보드 **원본 입력:** ``` "분석 대시보드" ``` **향상된 프롬프트:** ```markdown ## 대시보드: 비즈니스 분석 개요 ### 개요 핵심 비즈니스 지표를 한눈에 파악할 수 있는 데이터 중심 대시보드 ### 시각적 스타일 - **분위기**: 데이터 중심, 깔끔, 전문적 - **색상**: - 배경: 밝은 그레이 (#F3F4F6) - 카드: 순백색 (#FFFFFF) - 기본 텍스트: 진한 회색 (#1F2937) - 차트 팔레트: 파랑, 초록, 보라, 주황 (데이터 시각화) - 성공: 초록 (#10B981), 경고: 주황 (#F59E0B), 위험: 빨강 (#EF4444) - **타이포그래피**: - 폰트: Inter 또는 system-ui - 숫자: tabular-nums (고정폭 숫자) - 큰 지표 숫자는 bold, 설명은 regular ### 레이아웃 구조 1. **좌측 사이드바** (고정, 60px 접힌 상태 / 240px 펼친 상태) - 상단: 로고 - 메뉴 아이템: 아이콘 + 텍스트 - 현재 페이지 강조 (배경색 + 좌측 강조선) - 하단: 사용자 아바타 + 설정 2. **상단 헤더** (고정) - 좌측: 페이지 제목 + 빵크럼 - 우측: 검색 바 + 알림 아이콘 + 프로필 드롭다운 3. **메인 콘텐츠** (스크롤 가능) **Row 1: KPI 카드 (4열)** - 총 매출 (금액 + 전주 대비 %) - 신규 사용자 (숫자 + 전주 대비 %) - 전환율 (% + 전주 대비) - 활성 세션 (숫자 + 스파크라인) - 각 카드: 작은 아이콘, 라벨, 큰 숫자, 변화율 배지 **Row 2: 차트 영역 (2열)** - 좌측 (66%): 라인 차트 (주간 트렌드) - 제목 + 기간 선택 드롭다운 - 범례 - 호버 시 툴팁 - 우측 (33%): 도넛 차트 (카테고리 분포) - 중앙에 총합 표시 - 우측에 범례 목록 **Row 3: 데이터 테이블** - 제목: "최근 거래" - 컬럼: 날짜, 고객명, 금액, 상태 (배지), 액션 버튼 - 페이지네이션 - 필터/정렬 컨트롤 ### 핵심 요소 - **KPI 카드**: 둥근 모서리 (12px), 미묘한 그림자, 좌측에 색상 강조선 - **변화율 배지**: 초록 (상승), 빨강 (하락), 작은 화살표 아이콘 - **차트**: 깔끔한 그리드선, 호버 시 데이터 포인트 강조 - **테이블**: 줄무늬 행, 호버 시 행 강조 ### 상호작용 - 사이드바 메뉴: 호버 시 배경 변경 - KPI 카드: 클릭 시 상세 페이지 이동 암시 (커서 변경) - 차트: 호버 시 툴팁, 범례 클릭 시 시리즈 토글 - 테이블 행: 호버 시 강조, 액션 버튼 표시 ``` ## UI/UX 키워드 사전 프롬프트에 추가하면 좋은 키워드들: ### 레이아웃 키워드 | 키워드 | 용도 | |--------|------| | centered | 중앙 정렬 | | grid layout | 그리드 레이아웃 | | split view | 분할 뷰 | | sidebar | 사이드바 | | sticky header | 고정 헤더 | | card layout | 카드 레이아웃 | | masonry | 벽돌형 레이아웃 | ### 스타일 키워드 | 키워드 | 용도 | |--------|------| | minimal | 미니멀 | | modern | 현대적 | | clean | 깔끔한 | | rounded corners | 둥근 모서리 | | soft shadows | 부드러운 그림자 | | subtle gradient | 미묘한 그라데이션 | | glassmorphism | 유리 효과 | | frosted glass | 불투명 유리 효과 | ### 컴포넌트 키워드 | 키워드 | 용도 | |--------|------| | pill button | 알약형 버튼 | | avatar | 프로필 이미지 | | badge | 배지/태그 | | tooltip | 툴팁 | | dropdown | 드롭다운 | | modal | 모달 | | toast | 토스트 알림 | | skeleton | 로딩 스켈레톤 | ### 상태 키워드 | 키워드 | 용도 | |--------|------| | hover effect | 호버 효과 | | active state | 활성 상태 | | disabled | 비활성화 | | loading | 로딩 중 | | empty state | 빈 상태 | | error state | 에러 상태 | ## 디자인 시스템 주입 `DESIGN.md`가 있는 경우, 섹션 6을 프롬프트 끝에 추가합니다: ```markdown ### 디자인 시스템 (DESIGN.md에서) 비주얼 스타일: 미니멀하고 공기처럼 가벼운, 넉넉한 여백 기본 색상: Deep Ocean Blue (#0066FF) - 기본 액션 버튼 보조 색상: Soft Sky (#E0F2FE) - 강조 배경 배경: Pure White (#FFFFFF) 메인, Whisper Gray (#F9FAFB) 섹션 텍스트: Midnight (#1A1A1A) 헤딩, Slate (#64748B) 본문 버튼 스타일: 알약 모양, 미묘한 호버 상승 카드 스타일: 8px 둥근 모서리, 속삭이듯 부드러운 그림자 전체적인 느낌: 신뢰감 있고 친근한, 전문적이면서 접근하기 쉬운 ``` ## 피해야 할 것 | ❌ 피해야 할 것 | ✅ 대신 이렇게 | |---------------|---------------| | "예쁜 페이지" | "미니멀하고 현대적인, 충분한 여백" | | "좋은 색상" | "#2563EB 파란색 기본 버튼, #10B981 성공 표시" | | "큰 버튼" | "높이 48px, 패딩 24px, 둥근 모서리" | | "어딘가에 로고" | "좌측 상단 모서리에 로고, 높이 32px" | | "몇 개의 카드" | "3열 그리드, 각 카드에 아이콘, 제목, 설명" | ## 참고 리소스 - **Stitch 프롬프팅 가이드**: https://stitch.withgoogle.com/docs/learn/prompting/ - **Stitch 갤러리** (영감용): https://stitch.withgoogle.com/gallery - **UI 패턴 참고**: https://ui-patterns.com/ ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [jh941213](https://github.com/jh941213) - **Source:** [jh941213/codex-lattice](https://github.com/jh941213/codex-lattice) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-jh941213-codex-lattice-stitch-enhance-prompt - Seller: https://agentstack.voostack.com/s/jh941213 - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.