Install
npx skills add google-labs-code/stitch-skills누구에게 맞나
이미 Google Stitch로 화면을 만들고, 코딩형 agent가 개방 Agent Skills 표준에 따라 새 화면을 생성하거나 기존 화면을 고치거나 디자인 변형을 내길 원하면 이 묶음이 맞습니다. Google Stitch용 스킬과 플러그인 모음입니다. 설명 페이지는
https://github.com/google-labs-code/stitch-skills
제품 자체는
https://stitch.withgoogle.com/
더 잘 맞는 사람은 Stitch MCP 등록을 끝냈고, 환경 변수와 자격 증명이 공식 설치 설명대로 준비되었으며, 아래 스킬 설치 명령 한 줄만 받아들입니다. 이 스킬들은 agent 환경에서 Stitch MCP가 설정되고 실행 중이어야 합니다. MCP가 없으면 호출할 디자인 백엔드가 없습니다. 설치 설명은
https://stitch.withgoogle.com/docs/mcp/setup/
첫 시도는 확인할 수 있는 작은 생성이나 변형이어야 하며, 처음부터 전체 프로덕션 디자인 시스템을 고치지 마세요. 공식은 여러 코딩 환경을 지목하고 그중 하나는 수동 설치가 필요하다고 하지만 그 수동 단계는 없습니다. 지목 명단을 유일한 사용 환경으로 읽지 말고, 적히지 않은 설치기를 만들지 마세요. 모음은 Agent Skills 개방 표준을 따르며 스킬 이름은 stitch::generate-design 형태로 나옵니다. 적히지 않은 다른 stitch:: 이름을 스스로 채우지 마세요. 아직 Stitch 계정이나 MCP 자격 증명이 없으면 먼저 Setup 문서로 가고 npx를 먼저 실행하지 마세요.
3분 만에 첫 시도
스킬은 공식의 이 선택적 설치 명령만 사용합니다:
npx skills add google-labs-code/stitch-skills
다른 마켓, 플러그인, 두 번째 스킬 설치기를 찾지 마세요. 설치 후 agent를 재시작하고 스킬이 보이는지 확인하세요.
전제: Stitch MCP가 위 Setup 문서대로 등록되고 환경 변수와 자격 증명이 설정되었으며 프로세스가 실행 중입니다. MCP가 준비되지 않았으면 설정 확인에서 멈추고 생성을 호출하지 마세요. 로컬에서 npx도 실행할 수 있어야 합니다.
스킬이 설치되고 MCP가 돌아가는 agent에서 낮은 위험 작업을 하세요: stitch::generate-design을 호출하고 짧은 텍스트로 샌드박스 화면을 설명합니다(예: 「제목과 주 버튼만 있는 빈 상태 페이지」). 먼저 Stitch로 보낼 프롬프트, 기존 화면을 고칠지, 로컬 파일을 쓸지를 다시 말하게 하세요. 새 초안만 만들고 정식 초안을 덮어쓰지 않음을 확인한 뒤에 계속을 허용하세요.
성공 신호: Stitch에 대응하는 새 화면이나 열 수 있는 디자인 결과가 나타나며, Stitch와 무관한 가짜 HTML이 아닙니다. 스킬이 백엔드를 쓸 수 없다고 하면 MCP가 실행 중인지, 자격 증명이 공식 문서대로인지로 돌아가세요. 설치 명령을 바꿔 기록되지 않은 출처를 시도하지 마세요. 문서에 없는 비밀 자리표시를 요구하면 멈추고 Setup 페이지에 적힌 환경 변수 이름만 사용하세요.
사용 사례
사례 1: 텍스트나 이미지로 새 화면 생성. stitch::generate-design 설명은 텍스트나 이미지로 새 화면을 생성한다는 것입니다. 화면 설명 한 문장, 또는 사용할 권리가 있는 참고 이미지를 준비하고 스킬이 Stitch에서 첫 초안을 내게 하세요. 이미지 경로나 텍스트가 준비되지 않았으면 먼저 멈추세요. 생성은 Stitch 쪽에 떨어지며 외부 호출입니다. 프롬프트를 확인한 뒤 실행하세요. 공식은 프롬프트 템플릿이나 이미지 크기 제한을 적지 않았습니다. 그 세부가 없으면 설명을 짧게 유지하고 매개변수를 위조하지 마세요.
사례 2: 기존 화면을 고치거나 변형을 내기. 같은 스킬은 기존 화면 편집과 디자인 변형 생성도 명시합니다. Stitch의 기존 초안을 지정하고 한두 개 변형만 요청하세요. 한꺼번에 덮어쓰지 마세요. 공식은 변형 수 상한이나 롤백 버튼을 적지 않았으므로, 먼저 어느 화면을 고칠지, 변형을 따로 저장할지를 말하게 한 뒤 확인한 다음 실행하세요. 사례 1과 같은 스킬의 다른 조작이며 다른 설치가 아닙니다. agent가 기록되지 않은 플러그인 명령으로 같은 일을 하자고 하면 거절하고 설치된 스킬 이름만 계속 쓰세요.
사용 경계
실행 중인 Stitch MCP가 없으면 이 묶음을 보통 그림 스킬처럼 쓸 수 없습니다. 먼저 서버 등록과 환경 변수·자격 증명 설정을 끝내야 합니다. 빠진 항목에 대해 공식은 우회를 주지 않습니다. 스킬 설치 명령을 MCP 설치 명령으로 보지 마세요.
공식 스킬 설치는 npx skills add google-labs-code/stitch-skills뿐입니다. 페이지에는 특정 호스트용 --target가 있는 npx plugins add 형식도 있습니다. 그것은 플러그인 착지점이며 이 가이드가 쓰는 스킬 설치 입구가 아닙니다. 명단에 「수동 설치」라고 적힌 환경은 공식에 복사 가능한 단계가 없으므로 디렉터리 복사나 마켓 명령을 발명하지 마세요.
generate-design은 Stitch에서 화면을 만들거나 바꾸며 부작용이 있는 외부 호출입니다. 프롬프트, 대상 화면, 따로 저장 여부를 먼저 대조한 뒤 실행하세요. 공식은 생성 결과를 프로덕션 앱에 바로 내는 것을 허용하지 않았고 표 밖의 스킬 이름도 나열하지 않았습니다. 적히지 않은 능력을 짐작하지 마세요. 이미지로 생성할 때는 사용할 권리가 있는 참고 이미지만 쓰세요. 기존 화면을 편집하기 전에 Stitch에서 그 화면이 아직 초안인지 확인하여 이미 넘긴 화면을 덮어쓰지 마세요.