Communitygithub.com

KaimingWan/oh-my-kiro

Google Stitch 디자인-코드 워크플로우를 디자인 시스템 관리와 함께 제공합니다.

oh-my-kiro란 무엇인가요?

이 스킬은 Google Stitch 디자인 플랫폼과 코드 에이전트(Claude Code, Cursor 등) 간의 완전한 디자인-코드 워크플로우를 지원합니다. 핵심은 `design.md` 파일로, Stitch 프로젝트의 디자인 시스템(색상, 폰트, 테마, 컴포넌트 스타일)을 AI 에이전트가 이해하기 쉬운 형식으로 캡슐화합니다. 개발자는 이 파일을 통해 일관된 디자인 시스템을 유지하면서 Stitch에서 화면을 생성하고, 로컬로 가져와 Next.js/Astro/React와 같은 프레임워크로 구현할 수 있습니다. 또한 기존 웹사이트 스크린샷을 업로드하여 디자인 언어를 추출하고 리디자인하는 'Redesign from Reference' 워크플로우, ShadCN UI 컴포넌트로의 변환, 그리고 다중 레이어 시각적 검증 프로세스(뷰포트별 스크린샷, 디자인 시스템 일관성 체크, 픽셀 차이 비교, AI 생성 패턴 감지)를 포함합니다. MCP 서버(`@_davideast/stitch-mcp`)를 통해 설정되며, OAuth 인증이 필요합니다.

지원 대상✓Claude Code~Codex CLI✓Cursor
Part ofDesign & UI
npx skills add https://github.com/KaimingWan/oh-my-kiro/tree/HEAD/skills/omk-stitch
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

트리거 예시

  • "내 Stitch 디자인을 코드로 가져와줘"
  • "Stitch로 랜딩 페이지 만들어줘"
  • "이 스크린샷 스타일을 내 웹사이트에 적용해줘"
  • "내 Stitch 프로젝트에서 design.md 내보내기"
  • "Stitch 디자인을 ShadCN 컴포넌트로 변환해줘"

Google Stitch 통합 스킬

핵심 개념: design.md

Stitch의 디자인 시스템은 design.md 파일에 캡처됩니다. — 색상, 폰트, 테마, 컴포넌트 스타일. 이 파일은:

  • 에이전트에 최적화됨 — 원시 CSS보다 에이전트가 더 잘 이해하는 언어를 사용합니다.
  • 전송 가능 — Claude Code, Cursor 또는 모든 에이전트에 제공하면 스타일을 완벽하게 재현합니다.
  • 자동 생성 — 요청하지 않아도 Stitch가 모든 프로젝트에 대해 하나를 생성합니다.

기본 워크플로우: 항상 design.md를 먼저 설정한 다음, 그 위에 페이지를 구축합니다.

MCP 서버

커뮤니티 패키지: davideast/stitch-mcp npm: @_davideast/stitch-mcp

설정

사전 요구 사항

  • Google Cloud CLI (gcloud) 설치
  • Stitch API가 활성화된 GCP 프로젝트

인증 (OAuth — API 키는 지원되지 않음)

gcloud auth login
gcloud auth application-default login
gcloud config set project <YOUR_PROJECT_ID>
gcloud auth application-default set-quota-project <YOUR_PROJECT_ID>
gcloud beta services mcp enable stitch.googleapis.com --project=<YOUR_PROJECT_ID>

MCP 설정

MCP 클라이언트 설정에 추가 (예: .kiro/settings/mcp.json):

{
  "stitch": {
    "command": "npx",
    "args": ["@_davideast/stitch-mcp", "proxy"],
    "env": {
      "STITCH_USE_SYSTEM_GCLOUD": "1",
      "GOOGLE_CLOUD_PROJECT": "<YOUR_PROJECT_ID>"
    }
  }
}

중요: proxy 모드 + STITCH_USE_SYSTEM_GCLOUD=1을 사용해야 합니다. 직접 serverUrl 모드는 불안정합니다.

설정 확인

npx @_davideast/stitch-mcp doctor

doctor가 API 테스트에서 시간 초과되면 직접 확인:

ACCESS_TOKEN=$(gcloud auth application-default print-access-token)
curl -s -w "\nHTTP:%{http_code}" \
  -H "Authorization: Bearer $ACCESS_TOKEN" \
  -H "x-goog-user-project: <YOUR_PROJECT_ID>" \
  "https://stitch.googleapis.com/v1/projects"

MCP 도구

도구용도
list_projects모든 Stitch 프로젝트 나열
get_screen_code화면의 HTML/CSS 가져오기
get_screen_image화면 스크린샷 가져오기 (base64)
build_site화면을 경로에 매핑하고 Astro 프로젝트 생성

CLI 도구 (MCP 외)

npx @_davideast/stitch-mcp view --projects          # 프로젝트 탐색
npx @_davideast/stitch-mcp serve -p <project-id>    # 로컬 미리보기
npx @_davideast/stitch-mcp site -p <project-id>     # Astro 사이트 생성

워크플로우

경로 A: 처음부터 디자인 (기본)

  1. 디자인 시스템 설정 — Stitch에서 design.md를 생성하거나 제공 (지정하지 않으면 자동 생성)
  2. 화면 생성 — 요구 사항으로 Stitch에 프롬프트; 디자인 시스템을 기반으로 구축
  3. 로컬로 가져오기 — get_screen_code → HTML/CSS, get_screen_image → 스크린샷
  4. 구현 — 대상 프레임워크로 변환 (Next.js/Astro/React)
  5. 확인 — 시각적 비교 (아래 '확인 단계' 참조)

경로 B: 참조로부터 리디자인

스타일을 채택하고자 하는 기존 사이트/스크린샷이 있을 때 사용 (복사가 아님):

  1. 참조 캡처 — 마음에 드는 사이트의 전체 페이지 스크린샷 (GoFullPage 또는 유사 도구 사용)
  2. Stitch에서 리디자인 — 스크린샷 업로드; Stitch가 디자인 언어, 컴포넌트 패턴 및 레이아웃을 추출한 다음 YOUR 콘텐츠에 적용
  3. 대안: URL로 가져오기 — Stitch의 디자인 시스템 패널에서 모든 웹사이트 URL에서 가져오기. Stitch가 크롤링하여 타이포그래피 + 색상을 design.md로 추출
  4. 세부 조정 — 와이어프레임 업로드 또는 특정 섹션에 주석을 달아 조정

경로 C: 에이전트 통합 빌드 (Claude Code + Stitch)

Google 공식 Stitch 스킬을 사용한 자율적인 종단간 빌드:

  1. 향상된 프롬프트 — 모호한 사용자 프롬프트를 Stitch에 최적화된 프롬프트로 변환 (Stitch는 정확한 설명보다 분위기에 대한 형용사에 의존)
  2. Stitch 루프 — Chrome DevTools를 사용한 자율 빌드 루프, 단계 간 프롬프트 추적 유지
  3. React 컴포넌트 — Stitch의 단일 HTML 내보내기를 모듈식 React 컴포넌트로 변환하고 검증

claude.md의 워크플로우 순서:

향상된 프롬프트 → Stitch 루프 → React 컴포넌트 변환

Stitch MCP 연결 필요. 설치 방법은 Google의 Stitch 스킬 저장소 참조.

경로 D: ShadCN UI 변환

Stitch의 기본 React/HTML에는 상호작용이 부족합니다. 프로덕션 품질의 컴포넌트를 위해 ShadCN을 사용하세요:

  1. ShadCN MCP 연결
  2. Google의 ShadCN UI 스킬을 사용하여 Stitch 디자인을 ShadCN 컴포넌트로 변환
  3. 레지스트리(예: glassmorphism, motion-primitives)로 확장하여 프리미엄 느낌 추가
  4. claude.md에 레지스트리를 지정하여 변환이 자동으로 이루어지도록 함

단계: 확인 (gstack design-review에서 영감을 얻음)

구현 후 다중 레이어 확인을 실행합니다. 목표: 사람의 눈이 놓치는 것을 포착합니다.

레이어 1: 다중 뷰포트 스크린샷

반응형 문제를 포착하기 위해 3개의 중단점에서 스크린샷을 촬영합니다:

npx playwright screenshot --viewport-size=375,812 http://localhost:3000 impl-mobile.png
npx playwright screenshot --viewport-size=768,1024 http://localhost:3000 impl-tablet.png
npx playwright screenshot --viewport-size=1440,900 http://localhost:3000 impl-desktop.png

확인할 사항: 텍스트 오버플로, 레이아웃 붕괴, 요소 겹침, 콘텐츠가 적응하지 않음.

레이어 2: 디자인 시스템 일관성 확인

구현에서 실제 렌더링된 값을 추출하여 design.md와 비교합니다:

# 실제 사용된 폰트 추출 (브라우저 콘솔 또는 Playwright에서 실행)
npx playwright evaluate http://localhost:3000 \
  "JSON.stringify([...new Set([...document.querySelectorAll('*')].slice(0,500).map(e => getComputedStyle(e).fontFamily))])"

# 사용 중인 색상 팔레트 추출
npx playwright evaluate http://localhost:3000 \
  "JSON.stringify([...new Set([...document.querySelectorAll('*')].slice(0,500).flatMap(e => [getComputedStyle(e).color, getComputedStyle(e).backgroundColor]).filter(c => c !== 'rgba(0, 0, 0, 0)'))])"

추출된 값을 design.md 토큰과 비교합니다. 불일치를 플래그합니다.

레이어 3: 디자인 대 픽셀 차이

npx pixelmatch design.png impl-desktop.png diff.png 0.1

레이어 4: AI 생성 패턴 감지

구현에서 이러한 10가지 AI 생성 패턴을 확인합니다 (gstack의 블랙리스트에서):

  1. 보라색/바이올렛 그라데이션 배경을 기본값으로 사용
  2. 원형 아이콘 + 제목 + 설명이 있는 3열 기능 그리드
  3. 섹션 장식으로 색상이 지정된 원 안의 아이콘
  4. 모든 항목에 text-align: center 적용
  5. 모든 요소에 균일한 둥근 테두리 반경
  6. 장식용 블롭, 물결 모양 SVG 분할선
  7. 디자인 요소로서의 이모지
  8. 카드의 색상이 지정된 왼쪽 테두리
  9. 일반적인 히어로 카피 ("X에 오신 것을 환영합니다", "...의 힘을 잠금 해제하세요")
  10. 판에 박은 듯한 섹션 리듬 (히어로 → 기능 → 사용후기 → 가격 → CTA)

3개 이상의 패턴이 감지되면 "AI 생성 패턴 위험"으로 플래그하고 특정 수정 사항을 제안합니다.

레이어 5: AI 시각적 차이

비교를 위해 design.png와 impl-desktop.png를 모두 LLM에 제공합니다. 구체적으로 질문:

  • 계층 구조가 일치합니까?
  • 간격 비율이 유지되었습니까?
  • 누락된 섹션이나 요소가 있습니까?

개선 루프

확인 후 반복:

  1. 스크린샷 + 차이 결과를 사용자에게 보여줍니다.
  2. 사용자가 피드백을 제공합니다.
  3. 정밀 편집 적용 (전체 파일을 재생성하지 않음)
  4. 재확인
  5. "완료"될 때까지 반복 (최대 10회)

design.md 팁

  • 템플릿: Google 공식 스킬 저장소에서 에이전트 최적화 템플릿을 가져옵니다.
  • 전송: design.md를 모든 에이전트(Claude Code, Cursor)에 제공하여 일관된 스타일링을 얻습니다.
  • 추출: Google의 "design MD 스킬"을 사용하여 기존 Stitch 프로젝트에서 design.md를 추출합니다.
  • 사용자 정의: 색상/폰트/테마로 나만의 design.md를 만들고 Stitch의 디자인 시스템 패널에 붙여넣습니다.

알려진 문제

  1. API 키 인증 오류 — Stitch API가 API 키를 거부하므로 OAuth를 사용해야 합니다 (2026-02 커뮤니티 확인).
  2. doctor 가져오기 시간 초과 — 네트워크에 따라 다름; 직접 curl 테스트가 더 안정적입니다.
  3. 결제 불필요 — Stitch API는 결제가 활성화되지 않은 프로젝트에서도 작동합니다.
  4. 실험 모드에서는 Figma 내보내기 불가 — 표준 모드만 Figma 내보내기를 지원합니다.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community