본문으로 건너뛰기
cccskills
Google 공식무료GitHub에 공개

stitch::upload-to-stitch

Upload local images, HTML pages, and Markdown design documents to a Stitch project. The included Python script sends files directly over HTTP, avoiding the text output limits that can interrupt transfers through MCP tools.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

Upload local assets (images, mockups, extracted HTML, design markdown) to a Stitch project. ALWAYS use this skill when you need to upload visual assets, HTML pages, or design docs to Stitch, particularly when direct MCP tool calls fail or truncate due to base64 token limits.

설치 방법 보기

이럴 때 유용합니다

  • Upload local mockup images to Stitch
  • Add extracted HTML pages to a Stitch project
  • Upload Markdown design documents
  • Retry uploads interrupted by MCP output limits

포함된 파일(2)

  • SKILL.md4.1 KB
  • scripts/upload_to_stitch.py7.2 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Upload-to-Stitch

Upload local assets (images, mockups, HTML, and markdown files) to a Stitch project using the provided upload script, which bypasses the MCP tool's base64 output token limits.

[!NOTE] The AI model cannot upload files via MCP tools directly because the base64 encoding of even a small file exceeds the model's output token limit (~16K tokens). This script reads the file and sends it directly over HTTP.

Steps

1. Identify Target Project

Use list_projects to find the correct projectId.

2. Get the API Key

Locate your active MCP server configuration file and extract the API key:

  • Antigravity: .gemini/antigravity/mcp_config.json or .gemini/jetski/mcp_config.json
  • Gemini CLI: ~/.gemini/settings.json or ~/.gemini/extensions/Stitch/gemini-extension.json
  • Claude Code: ~/.claude.json

Extract:

  • API Key: From the X-Goog-Api-Key header or auth argument
  • MCP URL (optional): From the httpUrl or endpoint argument (defaults to https://stitch.googleapis.com)

[!IMPORTANT] If you cannot find the API key in any of these locations, or if you cannot access these files, you MUST ask the user to provide the Stitch API key. Do not proceed without a valid API key.

3. Run Upload Script

[!WARNING] Checkpoint — User Confirmation Required. Before running the upload script, you MUST pause and present the file(s) to be uploaded (paths, sizes, and types) to the user and wait for explicit approval. Do NOT execute the upload script until the user confirms.

Use run_command to execute the Python script:

python3 <SKILL_DIR>/scripts/upload_to_stitch.py \
  --project-id <PROJECT_ID> \
  --file-path <PATH_TO_FILE> \
  --api-key <API_KEY> \
  [--api-url <STITCH_API_URL>] \
  [--title <SCREEN_TITLE>] \
  [--generated-by <GENERATED_BY>]

[!TIP] macOS / SSL Certificate Troubleshooting: If the upload fails with ssl.SSLCertVerificationError: [SSL: CERTIFICATE_VERIFY_FAILED] unable to get local issuer certificate, this means your Python installation does not have root certificate authorities configured.

The script automatically attempts to use the certifi package to load the CA bundle if it is installed in your python environment. If certifi is not installed, you can either install it (pip install certifi) or manually supply the SSL_CERT_FILE environment variable when running the script:

SSL_CERT_FILE=$(python3 -c "import certifi; print(certifi.where())") python3 <SKILL_DIR>/scripts/upload_to_stitch.py \
  --project-id <PROJECT_ID> \
  --file-path <PATH_TO_FILE> \
  --api-key <API_KEY> \
  [--api-url <STITCH_API_URL>] \
  [--title <SCREEN_TITLE>] \
  [--generated-by <GENERATED_BY>]

Supported File Types

ExtensionMIME Type
.pngimage/png
.jpg, .jpegimage/jpeg
.webpimage/webp
.html, .htmtext/html
.mdtext/markdown

The script auto-detects MIME type from the file extension.

Script Options

  • --project-id: Required. The Stitch project ID.
  • --file-path: Required. Path to the local file to upload.
  • --api-key: Required. API key for Stitch authorization.
  • --api-url: Optional. Base URL of the Stitch API. Defaults to https://stitch.googleapis.com.
  • --title: Optional. Title for the uploaded screen. When uploading extracted HTML from a web app, set this to the route path of the page (e.g., '/dashboard', '/settings/profile', '/inbox') so that the screen name/title in Stitch clearly identifies the route.
  • --generated-by: Optional. Specify how the uploaded file was generated (e.g., 'stitch::extract-static-html' skill, 'Claude Code', 'Codex', 'Gemini' etc.).

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

design-md

Google 공식무료

Analyze existing Stitch screens and document their colors, typography, components, and layout in DESIGN.md. The resulting design reference combines plain visual descriptions with precise color values to guide requests for new screens.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Document design rules from an existing screen
  • Prepare a design reference for new screen prompts
  • Record color codes and their functional roles
google-labs-code/stitch-skills8.5천2026년 8월 18일 업데이트

enhance-prompt

Google 공식무료

Turn a rough interface idea into a structured prompt for Stitch, with clear page sections, colors, and component details. When available, existing design rules are included to guide consistent screens or focused edits.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Turn a rough screen idea into a clear prompt
  • Revise a prompt that produced an unsuitable design
  • Include existing design rules in a screen request
google-labs-code/stitch-skills8.5천2026년 8월 18일 업데이트

react-vite-dashboard

Google 공식무료

Turn Stitch designs into React and Vite dashboards with reusable components and asynchronous data fetching. It applies shared design settings from DESIGN.md, includes accessibility checks, and supports optional blockchain data reads.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Build a React dashboard from a Stitch screen
  • Apply shared design settings from DESIGN.md
  • Add data fetching and loading states
google-labs-code/stitch-skills8.5천2026년 8월 18일 업데이트

remotion

Google 공식무료

Create walkthrough videos from Stitch app screens using Remotion. Arrange screenshots in sequence, add fades, slides, zoom effects, and explanatory text, then preview the timing and render a video such as an MP4.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Create an app introduction from Stitch screens
  • Explain a user journey through a sequence of screens
  • Highlight interface features with zoom and labels
google-labs-code/stitch-skills8.5천2026년 8월 18일 업데이트

shadcn-ui

Google 공식무료

Find, install, and customize shadcn/ui components for React applications. The skill guides project setup, theme changes, forms, dialogs, and dashboard layouts, with checks for keyboard access, screen reader support, and responsive behavior.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Add UI components to an existing React project
  • Customize themes and component variants
  • Build forms and dashboard layouts
google-labs-code/stitch-skills8.5천2026년 8월 18일 업데이트

site-md

Google 공식무료

Turn site requirements or existing content into a SITE.md project guide for the Stitch Build Loop. It records the site's purpose, visual direction, navigation, file structure, and prioritized tasks to guide successive development rounds.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Organize a site brief before development
  • Record site purpose and visual direction
  • List completed and planned pages
google-labs-code/stitch-skills8.5천2026년 8월 18일 업데이트

google-labs-code의 스킬 모두 보기

이 스킬의 문제 신고