stitch-skills은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

stitch-skills은(는) Apache-2.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

stitch-skills은(는) 아직 유지보수되고 있나요?

6개월 이내 업데이트. stitch-skills의 마지막 커밋은 2026년 8월 17일입니다.

stitch-skills은(는) 어디에 사용할 수 있나요?

기존 프런트엔드 코드베이스를 검토하고 반복 개선할 수 있도록 Stitch 디자인으로 변환합니다. 디자인 토큰의 일관성을 유지하면서 Stitch 화면에서 React 컴포넌트를 생성합니다. 다른 에이전트가 따를 수 있도록 프로젝트의 시각적 시스템을 담은 DESIGN.md를 만듭니다. Stitch 프로젝트의 워크스루 동영상을 제작합니다.

stitch-skills는 어떻게 설치하나요?

CLI를 통해 Codex에 Stitch Skills 마켓플레이스 추가: codex plugin marketplace add google-labs-code/stitch-skills --ref main --sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities 또는 npx로 필요한 스킬만 설치: npx skills add google-labs-code/stitch-skills

stitch-skills은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/google-labs-code/stitch-skills

google-labs-code/stitch-skills

코딩 에이전트가 Stitch MCP 서버를 통해 Google Stitch 디자인 프로젝트를 다루도록 돕는 Agent Skills와 플러그인 모음입니다.

대체할 수 있는 제품:Figma

GitHub에서 보기 웹사이트

스타: 8,546
포크: 1,115
열린 이슈: 17
마지막 커밋: 2개월 전

어떤 프로젝트인가요?

Stitch Skills는 디자인 도구인 Google Stitch를 위한 에이전트 스킬 모음입니다. 각 스킬은 Claude Code, Cursor, Codex, Gemini CLI 같은 코딩 에이전트가 특정 Stitch 워크플로를 수행할 때 불러올 수 있는 지침 폴더입니다. 스킬을 사용하려면 에이전트 환경에 Stitch MCP 서버를 구성해야 합니다.

스킬은 세 가지 플러그인으로 구성됩니다. stitch-design은 화면 생성 및 편집, 디자인 시스템 관리, 소스 코드에서 DESIGN.md 파일 추출, 에셋 업로드를 지원합니다. stitch-build는 Stitch 화면을 React, React Native 또는 React + Vite 대시보드 코드로 변환하고, shadcn/ui 관련 가이드와 Remotion 워크스루 동영상을 제공합니다. stitch-utilities는 프롬프트 개선, DESIGN.md 생성, 여러 페이지로 구성된 웹사이트 생성을 지원합니다.

스킬은 Codex 마켓플레이스, npx plugins 또는 skills 명령을 통해 설치하거나 OpenCode용으로 직접 복사할 수 있습니다. 일부 스킬은 서로 의존하므로 필요한 스킬만 골라 설치할 때는 종속성도 함께 포함해야 합니다.

핵심 기능

01텍스트나 이미지로 Stitch 화면을 새로 생성하고 기존 화면을 편집합니다.
02프런트엔드 소스 코드에서 DESIGN.md 디자인 시스템 파일을 추출합니다.
03Stitch 화면을 React, React Native 또는 React + Vite 대시보드 코드로 변환합니다.
04로컬 HTML, 이미지, 목업을 Stitch 프로젝트에 업로드합니다.
05Claude Code, Cursor, Codex, Gemini CLI 및 기타 Agent Skills 호환 에이전트에 설치할 수 있습니다.

활용 사례

기존 프런트엔드 코드베이스를 검토하고 반복 개선할 수 있도록 Stitch 디자인으로 변환합니다.
디자인 토큰의 일관성을 유지하면서 Stitch 화면에서 React 컴포넌트를 생성합니다.
다른 에이전트가 따를 수 있도록 프로젝트의 시각적 시스템을 담은 DESIGN.md를 만듭니다.
Stitch 프로젝트의 워크스루 동영상을 제작합니다.

빠른 시작

1
CLI를 통해 Codex에 Stitch Skills 마켓플레이스 추가
codex plugin marketplace add google-labs-code/stitch-skills --ref main --sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities
2
또는 npx로 필요한 스킬만 설치
npx skills add google-labs-code/stitch-skills

사용 전 알아둘 점

스킬을 사용하려면 먼저 Stitch MCP 서버와 인증 정보를 설정해야 합니다.
Google이 공식적으로 지원하는 제품이 아닙니다.

토픽

#ai-agents #design-to-code #mcp #react #design-system #coding-agents #ui-generation

자주 묻는 질문

stitch-skills은(는) 무엇인가요?: 코딩 에이전트가 Stitch MCP 서버를 통해 Google Stitch 디자인 프로젝트를 다루도록 돕는 Agent Skills와 플러그인 모음입니다. Stitch Skills는 디자인 도구인 Google Stitch를 위한 에이전트 스킬 모음입니다. 각 스킬은 Claude Code, Cursor, Codex, Gemini CLI 같은 코딩 에이전트가 특정 Stitch 워크플로를 수행할 때 불러올 수 있는 지침 폴더입니다. 스킬을 사용하려면 에이전트 환경에 Stitch MCP 서버를 구성해야 합니다.
stitch-skills은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?: stitch-skills은(는) Apache-2.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
stitch-skills은(는) 아직 유지보수되고 있나요?: 6개월 이내 업데이트. stitch-skills의 마지막 커밋은 2026년 8월 17일입니다.
stitch-skills은(는) 어디에 사용할 수 있나요?: 기존 프런트엔드 코드베이스를 검토하고 반복 개선할 수 있도록 Stitch 디자인으로 변환합니다. 디자인 토큰의 일관성을 유지하면서 Stitch 화면에서 React 컴포넌트를 생성합니다. 다른 에이전트가 따를 수 있도록 프로젝트의 시각적 시스템을 담은 DESIGN.md를 만듭니다. Stitch 프로젝트의 워크스루 동영상을 제작합니다.
stitch-skills는 어떻게 설치하나요?: CLI를 통해 Codex에 Stitch Skills 마켓플레이스 추가: codex plugin marketplace add google-labs-code/stitch-skills --ref main --sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities 또는 npx로 필요한 스킬만 설치: npx skills add google-labs-code/stitch-skills
stitch-skills은(는) 어디서 받을 수 있나요?: 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/google-labs-code/stitch-skills

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.