stitch::react-native작성자 Google Labs

Stitch React Native 스킬.

모바일 앱 디자인을 위한 Claude Code 및 Codex 스킬: Stitch HTML 디자인을 React Native 컴포넌트로 변환하거나 동기화합니다.

모바일 앱
UI 코드

google-labs-code/stitch-skills · plugins/stitch-build/skills/react-native/SKILL.mdSKILL.md

--- name: stitch::react-native description: - Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet. --- ## Phase 1: Retrieval and networking ## Phase 2: Theme extraction ## Phase 3: Architectural rules and HTML mapping ## Phase 4: Execution steps

2026-09-14에 업스트림 파일에서 읽은 머리말 및 섹션 제목 · 전체 12,389자

01 기능

Claude Code와 Codex에서 stitch::react-native 스킬이 수행하는 작업

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

이 스킬은 Stitch의 HTML/CSS 웹 디자인을 StyleSheet를 사용하는 프로덕션 수준의 React Native 컴포넌트로 변환하며, 기존 네이티브 컴포넌트를 최신 Stitch 디자인과 다시 동기화할 수도 있습니다. 네 단계로 진행됩니다: scripts/fetch-stitch.sh로 모든 화면을 다운로드하고 각 스크린샷을 시각적으로 검토, tailwind.config 토큰을 src/theme.ts로 추출, HTML 요소와 CSS를 엄격한 아키텍처 규칙에 따라 React Native 기본 요소에 매핑, 그리고 resources/component-template.tsx로 컴포넌트 초안을 작성합니다.

컴포넌트는 src/components/ 아래의 Atomic Design 폴더 구조를 따르며, 로직은 src/hooks/에, 콘텐츠는 src/data/mockData.ts에 위치합니다. 모든 컴포넌트 파일은 readonly [ComponentName]Props 인터페이스를 내보냅니다. npm run validate 및 tsc --noEmit을 통한 검증은 선택 사항이며 사용자의 승인이 필요합니다.

산출물

src/theme.ts는 디자인의 tailwind.config에서 추출한 색상, 간격, 타이포그래피를 담은 TypeScript 토큰 파일입니다.
src/data/mockData.ts는 모든 정적 텍스트, 이미지 URL, 목록을 담고 있어 컴포넌트에 콘텐츠를 하드코딩하지 않도록 합니다.
src/hooks/ 아래의 커스텀 훅은 이벤트 핸들러, API 호출, 비즈니스 로직을 처리하여 컴포넌트가 렌더링만 담당하도록 합니다.
앱 폴더 내에 작성되고 워크스페이스 루트에도 미러링되는 .stitch/metadata.json 파일.

예시 프롬프트 보기 ↗

작동 방식

01
MCP 네임스페이스 발견하기
list_tools를 실행하여 Stitch MCP 접두사를 찾은 다음, 세션 내 이후의 모든 호출에서 해당 접두사를 재사용합니다.
02
스크립트를 통해 다운로드
내부 가져오기 도구는 Google Cloud Storage 도메인에서 실패할 수 있으므로, HTML과 스크린샷은 리다이렉트와 보안 핸드셰이크를 처리하는 scripts/fetch-stitch.sh를 통해 다운로드됩니다.
03
각 스크린샷 검토
디자인이 어떻게 생겼는지 추측하지 말고, 다운로드한 PNG를 열어 디자인 의도와 레이아웃 세부 사항을 확인합니다.
04
테마 추출
각 HTML head 스크립트 블록 안의 tailwind.config 객체에서 색상, 폰트, 간격, radii, 타이포그래피를 읽어 TypeScript 상수로 src/theme.ts에 작성합니다.
05
템플릿으로 초안 작성
각 컴포넌트는 resources/component-template.tsx에서 시작하고, 플레이스홀더 컴포넌트 이름을 모두 찾아 바꿔야 합니다.
06
동기화 메타데이터 기록
현재 동기화 실행 시간과 일치하는 Last Sync Time 필드를 포함하여 프로젝트 구성을 .stitch/metadata.json에 저장합니다.

02 적합성 확인

stitch::react-native 스킬을 사용해야 하는 경우

이러한 종류의 모바일 앱 디자인 작업일 때 Claude Code 또는 Codex에서 stitch::react-native 스킬을 사용하십시오. 적합성 및 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

컴포넌트가 최신 Stitch 디자인과 어긋나 다시 맞춰야 하는 기존 React Native 앱.
App.tsx에 스택 또는 탭 내비게이터를 갖춘 NavigationContainer를 연결해야 하는 여러 화면으로 구성된 Stitch 프로젝트.
iOS 셰도우 속성용 Platform.select와 Android elevation을 사용해 두 플랫폼 모두에서 그림자가 올바르게 보여야 하는 디자인.
작업을 완료로 표시하기 전에 결과물을 문서화된 아키텍처 체크리스트에 대조해 실행해 보길 원하는 팀.

한계 인지하기

CSS hover, transition, animation 효과에 의존하는 디자인: hover와 transition은 대응하는 기능이 없고 애니메이션은 react-native-reanimated로 처리해야 합니다.
웹 디자인의 드롭다운 또는 select 필드는, React Native에 기본 제공되는 select가 없어 서드파티 피커나 커스텀 모달이 필요합니다.
웹 이미지 관련 기대치: React Native의 Image는 고유 크기가 없으므로 width와 height, 혹은 aspectRatio를 항상 지정해야 합니다.

제공할 사항

Stitch 프로젝트와 그 MCP 접두사에이전트는 list_tools를 실행해 Stitch MCP 접두사를 찾고, 이를 모든 get_screen 및 get_project 호출에 재사용합니다.
화면의 width 값Google의 CDN이 그렇지 않으면 저해상도 썸네일을 제공하므로, 화면 메타데이터의 width를 사용해 스크린샷 URL에 =w{width}를 추가해야 합니다.
검증 및 앱 실행에 대한 동의패키저를 시작하거나 앱이 기기에서 렌더링되는지 확인하기 위한 시각적 시뮬레이터 감사를 시작하기 전에는 허가가 필요합니다.

03 스킬 내부

stitch::react-native 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

검색 과정 건너뛰기 금지
1단계는 모든 화면이 스크립트를 통해 다운로드되고 시각적으로 검토되었을 때만 완료로 간주됩니다. MCP get_screen을 먼저 호출하지 않고 로컬 디자인 파일을 읽는 것은 금지됩니다.
디자인을 새로 가져오기 전에 확인 요청
.stitch/designs/{page}.html과 .png가 이미 존재하는 경우, 에이전트는 Stitch 프로젝트에서 새로 가져올지 로컬 파일을 재사용할지 물어야 하며, 확인을 받은 후에만 다시 다운로드해야 합니다.
컴포넌트에 원시 색상값 사용 금지
컴포넌트 파일에서 색상 hex 코드와 rgba 문자열은 금지됩니다. 모든 색상, 간격, 글꼴 크기 값은 src/theme.ts에서 가져와야 합니다.
읽기 전용 Props 인터페이스 내보내기
화면을 포함한 모든 컴포넌트 파일은 readonly 수정자를 사용하는 [ComponentName]Props라는 이름의 인터페이스를 내보내야 하며, 그렇지 않으면 검증에 실패합니다.
올바른 패키지에서 가져온 Safe Area
최상위 화면은 react-native가 기본 제공하는 것이 아니라 react-native-safe-area-context의 SafeAreaView로 감싸야 합니다.
아토믹 디자인 파일로 분리
컴포넌트는 src/components/atoms/, molecules/, organisms/에 나누어 배치해야 하며, 전체 UI를 하나의 페이지나 화면 파일에 담는 것은 금지됩니다.
Google 헤더 제외
생성된 컴포넌트는 대상 프로젝트의 규칙을 따라야 하며 Google 라이선스 헤더를 포함해서는 안 됩니다.
테스트 전 권한 확인
검증 스크립트, 패키저, 시뮬레이터 감사는 임의로 시작해서는 안 되며, 에이전트는 반드시 먼저 사용자의 허가를 받아야 합니다.

04 활용하기

Claude Code 또는 Codex에 stitch::react-native 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용 중인 에이전트에 stitch::react-native 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::react-native

plugins/stitch-build/skills/react-native/SKILL.md에 대한 일반적인 skills CLI 형식입니다. 저장소마다 자체 경로를 문서화할 수 있습니다.

스킬에 첫 모바일 앱 디자인 작업 부여

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt

Convert the Stitch designs in project [project ID] to React Native. Download every screen with scripts/fetch-stitch.sh, visually audit the screenshots, extract the tailwind.config tokens into src/theme.ts, and build the components from resources/component-template.tsx using the atoms, molecules and organisms folders. Please hold off on starting the packager or a simulator audit for now.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

components와 screens 내 모든 .tsx 파일에 대해 검증기를 실행하여 컴포넌트 유효성을 보고합니다.
TypeScript 컴파일러를 no-emit 모드로 실행하여 프로젝트가 여전히 컴파일되는지 확인합니다.
src/theme.ts의 색상과 폰트가 HTML 디자인에서 나온 값과 실제로 일치하는지 확인합니다.
Text 컴포넌트 밖에 원시 텍스트가 남아 있지 않은지 확인합니다. React Native는 이 경우 충돌합니다.

OpenDesign에서 stitch::react-native를 해당 SKILL.md 링크로 임포트합니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills 브랜치 main
스킬 파일: plugins/stitch-build/skills/react-native/SKILL.md 검증 시점 콘텐츠 체크섬 기록됨; 커밋 0337446
License: Apache-2.0 LICENSE에서 확인.
리포지토리 스타: 8,304 전체 google-labs-code/stitch-skills 저장소에 대해 2026-09-14 촬영된 GitHub 스냅샷이며, 이 카탈로그에는 12개의 스킬이 포함되어 있습니다. stitch::react-native의 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

1단계: 조회 및 네트워킹MCP 프리픽스를 찾고, 모든 화면을 가져오고, 스크립트로 HTML과 스크린샷을 다운로드하고, 시각적으로 감사하고, 메타데이터를 저장합니다.
2단계: 테마 추출tailwind.config의 색상, 폰트, 여백, 라운드, 타이포그래피 토큰을 src/theme.ts로 가져옵니다.
3단계: 아키텍처 규칙 및 HTML 매핑HTML 태그를 프리미티브에 매핑하고, CSS를 StyleSheet로 변환하며, 아토믹 디자인, 훅, 테마, 접근성 규칙을 따릅니다.
4단계: 실행 단계의존성을 설치하고, 템플릿에서 테마, 데이터, 컴포넌트를 빌드하고, 내비게이션을 연결한 후, 필요 시 권한을 받아 검증합니다.
문제 해결가져오기 오류, 검증 실패, 감싸지지 않은 텍스트, 이미지 크기 조정, VirtualizedList 경고에 대한 수정 방법입니다.

스킬 자체 설명

"- Stitch HTML 디자인을 React Native 컴포넌트로 변환하거나, 기존 네이티브 컴포넌트를 최신 Stitch 디자인에 맞춰 동기화/업데이트합니다. StyleSheet를 사용합니다."

SKILL.md의 Front-matter 설명입니다. 전체 파일은 약 12,389자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

stitch::react-native 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

Stitch MCP를 건너뛰고 로컬 HTML 파일만 넘겨줘도 되나요?

아니요. 1단계에서는 모든 화면을 get_screen을 통해 가져오고 scripts/fetch-stitch.sh로 다운로드해야 하며, 이는 다른 작업이 진행되기 전에 이루어져야 합니다. get_screen을 호출하지 않고 로컬 디자인 HTML을 직접 읽는 것은 안티패턴으로 명시되어 있습니다.

이 스킬은 새 화면만 스캐폴딩하나요, 아니면 이미 있는 앱도 업데이트할 수 있나요?

둘 다 가능합니다. 새로운 Stitch HTML을 컴포넌트로 변환하는 것과 함께, 기존 네이티브 컴포넌트를 동기화하고 업데이트하여 최신 Stitch 디자인과 일치시킵니다.

결과를 확인하기 위해 시뮬레이터나 패키저를 자체적으로 실행하나요?

기본적으로는 그렇지 않습니다. 4단계의 검증, 감사, 시뮬레이터 또는 패키저 테스트는 선택 사항이며, 에이전트는 검증 스크립트를 실행하거나 패키저 또는 시뮬레이터 감사를 시작하기 전에 반드시 사용자의 허가를 받아야 합니다.

Stitch React Native

실제 모바일 앱 디자인 작업에서 stitch::react-native를 실행합니다.

OpenDesign을 다운로드하고, SKILL.md 링크에서 stitch::react-native를 가져온 후, 위 프롬프트를 붙여넣고 결과 전에 계획을 확인하십시오.

OpenDesign 다운로드 모든 스킬 보기

터미널

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::react-native

Claude Code와 Codex에서 stitch::react-native 스킬이 수행하는 작업

스킬 자체의 표현으로

작동 방식

stitch::react-native 스킬을 사용해야 하는 경우

적합한 경우

한계 인지하기

제공할 사항

stitch::react-native 스킬이 Claude Code와 Codex에 부여하는 규칙

검색 과정 건너뛰기 금지

디자인을 새로 가져오기 전에 확인 요청

컴포넌트에 원시 색상값 사용 금지

읽기 전용 Props 인터페이스 내보내기

올바른 패키지에서 가져온 Safe Area

아토믹 디자인 파일로 분리

Google 헤더 제외

테스트 전 권한 확인