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

stitch-mcp-upload-design-md

Uploads a DESIGN.md file to a Stitch project as the first half of turning it into a Stitch Design System. Always paired with stitch-mcp-create-design-system-from-design-md, which must be called immediately after.

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

설치 방법 보기

포함된 파일(1)

  • SKILL.md3.8 KB

SKILL.md(원문)

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

Stitch MCP — Upload DESIGN.md

Uploads a DESIGN.md file into a Stitch project. This is step one of a two-step pair: the upload creates a screen instance holding the design doc, and create_design_system_from_design_md then turns that instance into a real Design System.

On its own, this tool does nothing useful. Uploading without the follow-up leaves an orphan screen instance and no design system. Always run both.

Critical prerequisite

Only use this skill when the user explicitly mentions "Stitch" in their request. Never trigger Stitch operations silently during regular conversation.

When to use

  • The user has a DESIGN.md and wants it applied as a Stitch Design System
  • You've just produced a DESIGN.md with stitch-design-md and want it driving generation
  • The user says "use my design doc in Stitch", "make a design system from DESIGN.md"

Step 1: Read and encode the file

The tool takes base64, not raw markdown. The decoded content must be valid UTF-8 — uploads with invalid bytes are rejected outright.

# macOS (BSD base64 — no -w flag, and it does not wrap by default)
base64 -i DESIGN.md
# Linux (GNU base64 — -w 0 disables line wrapping)
base64 -w 0 DESIGN.md

Google's tool description says base64 -w 0, which fails on macOS with invalid option -- w. Use -i there. Getting this wrong produces a confusing shell error rather than an API error, so check your platform first.

Wrapped base64 (with embedded newlines) is a common cause of rejected uploads. Both commands above emit a single unbroken line.

Step 2: Call the MCP tool

{
  "name": "upload_design_md",
  "arguments": {
    "projectId": "3780309359108792857",
    "designMdBase64": "IyBEZXNpZ24gU3lzdGVtCgpDb2xvcnM6IC4uLg=="
  }
}

projectId is numeric only — no projects/ prefix. Passing the prefixed path here fails.

Step 3: Capture the screen instance — CRITICAL

The upload creates a screen instance, and the next tool needs two identifiers from it. Fetch them with get_project (which does take the projects/ prefix):

{
  "name": "get_project",
  "arguments": { "name": "projects/3780309359108792857" }
}

From the returned screenInstances, take the newest entry and record both:

FieldExampleNotes
ida1b2c3d4e5f6The screen instance id
sourceScreenprojects/3780.../screens/98b5...Full resource path

The trap: id is the screen instance id, not the source screen id. They are different values and passing the source screen id as id fails. Google's own schema calls this out in bold, which is usually a sign it bites people.

Step 4: Immediately call the follow-up

Hand both values straight to stitch-mcp-create-design-system-from-design-md. Don't stop between the two steps or report success to the user yet — there's no design system until the second call returns.

ID format rules (critical — different tools need different formats)

ToolID format required
upload_design_mdNumeric only: 3780309359108792857
create_design_system_from_design_mdNumeric only, plus the screen-instance pair
get_projectFull path: projects/3780309359108792857

Integration

  • Produce the DESIGN.md first with stitch-design-md
  • Always follow with stitch-mcp-create-design-system-from-design-md
  • Once the design system exists, apply it with stitch-mcp-apply-design-system or pass its asset id to generate_screen_from_text

리뷰

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

댓글

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

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

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

0 / 1,000자

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

같은 저장소의 스킬

Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes, keyboard navigation, focus management, and screen reader support.

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

gabelul/stitch-kit452026년 7월 21일 업데이트

Adds a purposeful animation layer to Stitch-generated components — CSS transitions, Framer Motion (React/Next.js), or Svelte transitions. Always respects prefers-reduced-motion.

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

gabelul/stitch-kit452026년 7월 21일 업데이트

Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex values, typography rules, and Stitch-ready prompt snippets. Use this before stitch-loop or any multi-page build to establish design consistency.

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

gabelul/stitch-kit452026년 7월 21일 업데이트

Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4 @theme block, and a semantic design system document. Run this before framework conversion skills.

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

gabelul/stitch-kit452026년 7월 21일 업데이트

Converts a Stitch screen, a local HTML file, or a URL into clean, platform-agnostic HTML5 + CSS — semantic markup, CSS custom properties for theming, dark mode via prefers-color-scheme, mobile-first responsive, zero framework dependencies. Works in browsers, WebViews, Capacitor, and Ionic. Only the Stitch route needs an API key.

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

gabelul/stitch-kit452026년 7월 21일 업데이트

Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive questioning — then produces a rich PRD document and auto-generates Stitch screens. Your design buddy that thinks deeply before designing.

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

gabelul/stitch-kit452026년 7월 21일 업데이트

gabelul의 스킬 모두 보기

이 스킬의 문제 신고