What is stitch-design-md?

A design-analysis skill for Stitch, Google’s interface-design tool, that turns an existing project’s screens and assets into a DESIGN.md reference file.

Use it to document colors, styles, layouts, and other design decisions before generating additional Stitch screens.

It records the project’s visual language in words so future Stitch-generated screens can follow the same style. It requires access to the Stitch project and at least one designed screen.

stitch-design-md — Skill for Claude Code by jh941213

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add jh941213/codex-lattice --skill stitch-design-md

Clone the repo

git clone --depth 1 https://github.com/jh941213/codex-lattice

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/jh941213/codex-lattice/stitch-design-md/github.svg)](https://agentmods.dev/skills/jh941213/codex-lattice/stitch-design-md)

Your own site

<a href="https://agentmods.dev/skills/jh941213/codex-lattice/stitch-design-md"><img src="https://agentmods.dev/badge/skills/jh941213/codex-lattice/stitch-design-md/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/jh941213/codex-lattice/stitch-design-md"><img src="https://agentmods.dev/badge/skills/jh941213/codex-lattice/stitch-design-md.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 75 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 2,169 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00075	$0.02169
Opus 5	$0.00037	$0.01085
Sonnet 5	$0.00015	$0.00434
Haiku 4.5	$0.00007	$0.00217

Measured 10d ago against content hash 279ba4984907, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

stitch-design-md scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/stitch-design-md/SKILL.md · 243 lines

How it starts

The opening of the file, as written. The whole thing — 243 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Stitch DESIGN.md 스킬

당신은 전문 디자인 시스템 리더입니다. Stitch 프로젝트의 기술 자산을 분석하고, DESIGN.md 파일로 시맨틱 디자인 시스템을 합성하는 것이 목표입니다.

개요

이 스킬은 Stitch가 새로운 스크린을 생성할 때 기존 디자인 언어와 완벽하게 일치하도록 하는 "source of truth" 역할을 하는 DESIGN.md 파일을 생성합니다.

Stitch는 특정 색상 값으로 뒷받침되는 "시각적 설명"을 통해 디자인을 해석합니다.

사전 요구사항

Stitch MCP 서버 접근 권한
최소 1개의 디자인된 스크린이 있는 Stitch 프로젝트
Stitch 효과적인 프롬프팅 가이드 접근: https://stitch.withgoogle.com/docs/learn/prompting/

검색 및 네트워킹

Stitch 프로젝트를 분석하려면 Stitch MCP 서버 도구를 사용하여 스크린 메타데이터와 디자인 자산을 검색해야 합니다:

1. 네임스페이스 탐색

# list_tools를 실행하여 Stitch MCP 접두사 찾기
# 이 접두사(예: mcp_stitch:)를 모든 후속 호출에 사용

2. 프로젝트 조회 (Project ID가 없는 경우)

[prefix]:list_projects 호출 (filter: "view=owned")
→ 제목이나 URL 패턴으로 대상 프로젝트 식별
→ name 필드에서 Project ID 추출 (예: projects/13534454087919359824)

3. 스크린 조회 (Screen ID가 없는 경우)

[prefix]:list_screens 호출 (projectId: 숫자 ID만)
→ 스크린 제목 검토하여 대상 스크린 식별 (예: "Home", "Landing Page")
→ 스크린의 name 필드에서 Screen ID 추출

4. 메타데이터 가져오기

[prefix]:get_screen 호출 (projectId, screenId: 둘 다 숫자 ID만)
반환되는 정보:
- screenshot.downloadUrl: 디자인의 시각적 참조
- htmlCode.downloadUrl: 전체 HTML/CSS 소스 코드
- width, height, deviceType: 스크린 크기 및 대상 플랫폼
- designTheme: 색상 및 스타일 정보

5. 자산 다운로드

web_fetch 또는 read_url_content로 htmlCode.downloadUrl에서 HTML 코드 다운로드
선택적으로 screenshot.downloadUrl에서 스크린샷 다운로드
HTML을 파싱하여 Tailwind 클래스, 커스텀 CSS, 컴포넌트 패턴 추출

분석 및 합성 지침

1. 프로젝트 아이덴티티 추출

프로젝트 제목 찾기
특정 Project ID 찾기 (JSON의 name 필드에서)

2. 분위기 정의

스크린샷과 HTML 구조를 평가하여 전체적인 "분위기"를 포착합니다. 분위기를 설명하는 형용사 사용:

"Airy" (공기처럼 가벼운)
"Dense" (밀집된)
"Minimalist" (미니멀리스트)
"Utilitarian" (실용주의적)

3. 색상 팔레트 매핑

시스템의 핵심 색상을 식별합니다. 각 색상에 대해 제공:

항목	설명
설명적 이름	성격을 전달하는 자연어 이름 (예: "Deep Muted Teal-Navy")
Hex 코드	정밀한 색상 코드 (예: "#294056")
기능적 역할	사용 목적 (예: "기본 액션에 사용")

4. 기하학 및 형태 번역

기술적 border-radius 값을 물리적 설명으로 변환:

Tailwind 클래스	설명
`rounded-full`	알약 모양 (Pill-shaped)
`rounded-lg`	미묘하게 둥근 모서리
`rounded-xl`	넉넉하게 둥근 모서리
`rounded-none`	날카로운 직각 모서리

Read the full file on GitHub · 243 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

10d ago First seen · 243 lines · 75 tokens per session scan A 279ba4984907

Subscribe to this mod's changes

stitch-design-md is a skill published in the GitHub repository jh941213/codex-lattice (19 stars, last pushed 3mo ago), licensed MIT. It adds 75 tokens to every session and 2,169 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Design and UX

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

stitch-design-md