stitch-enhance-prompt

stitch-enhance-prompt is a skill for Claude Code from jh941213/codex-lattice. It costs 89 tokens per session (3,463 once invoked), scanned A, original, MIT.

A prompt-writing workflow that turns a vague website or interface idea into a detailed prompt for Stitch, a tool that generates website screens.

In plain words
What is it for?
Use it to expand ideas such as a dashboard or login page into structured instructions informed by an optional DESIGN.md file.
Why use it?
It fills in missing details about content, visual style, layout, users, and interactions so the requested screen is more clearly specified.

Skill for Claude Code

Written for Claude Code: allowed-tools in frontmatter.

Good fit Use it to expand ideas such as a dashboard or login page into structured instructions informed by an optional DESIGN.md file.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/jh941213/codex-lattice/stitch-enhance-prompt
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-enhance-prompt
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.

agentmods badge for stitch-enhance-prompt

README.md
[![agentmods](https://agentmods.dev/badge/skills/jh941213/codex-lattice/stitch-enhance-prompt/github.svg)](https://agentmods.dev/skills/jh941213/codex-lattice/stitch-enhance-prompt)
Your own site
<a href="https://agentmods.dev/skills/jh941213/codex-lattice/stitch-enhance-prompt"><img src="https://agentmods.dev/badge/skills/jh941213/codex-lattice/stitch-enhance-prompt/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.

agentmods 80×15 button for stitch-enhance-prompt

Your own site · 80×15
<a href="https://agentmods.dev/skills/jh941213/codex-lattice/stitch-enhance-prompt"><img src="https://agentmods.dev/badge/skills/jh941213/codex-lattice/stitch-enhance-prompt.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 89 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,463 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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00089 $0.03463
Opus 5 $0.00044 $0.01732
Sonnet 5 $0.00018 $0.00693
Haiku 4.5 $0.00009 $0.00346

Measured 12d ago against content hash 48c9cc6c0f1a, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

stitch-enhance-prompt 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 12d 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-enhance-prompt/SKILL.md · 362 lines

How it starts

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

Stitch Prompt Enhancer

모호한 UI 아이디어를 Stitch에 최적화된 상세하고 구조화된 프롬프트로 변환합니다.

개요

Stitch는 상세하고 구체적인 프롬프트에서 더 좋은 결과를 생성합니다. 이 스킬은:

  1. 구체성 향상: 모호한 설명을 상세한 사양으로 변환
  2. UI/UX 키워드 추가: Stitch가 이해하는 디자인 용어 주입
  3. 디자인 시스템 컨텍스트: DESIGN.md에서 스타일 정보 통합
  4. 구조화된 출력: 최적의 생성 결과를 위한 프롬프트 구조화

Stitch 프롬프팅 원칙

효과적인 프롬프트의 3요소

요소 설명 예시
콘텐츠 무엇을 보여줄지 "사용자 프로필 카드"
스타일 어떻게 보일지 "미니멀, 둥근 모서리, 부드러운 그림자"
레이아웃 어떻게 배치할지 "중앙 정렬, 3열 그리드"

프롬프트 품질 스펙트럼

❌ 나쁜 프롬프트: "로그인 페이지"

⚠️ 괜찮은 프롬프트: "이메일과 비밀번호 필드가 있는 로그인 페이지"

✅ 좋은 프롬프트: "
미니멀한 로그인 페이지:
- 중앙에 배치된 카드 형태의 로그인 폼
- 상단에 로고와 환영 메시지
- 이메일 입력 필드 (아이콘 포함)
- 비밀번호 입력 필드 (보이기/숨기기 토글)
- 파란색 기본 버튼 '로그인'
- '비밀번호 찾기' 링크
- '계정 만들기' 보조 버튼
- 부드러운 그라데이션 배경
"

향상 프로세스

Step 1: 입력 분석

사용자의 원본 아이디어를 분석합니다:

입력: "대시보드 만들어줘"

분석:
- 타입: 대시보드 (관리/분석 UI)
- 누락된 정보:
  - 어떤 데이터?
  - 어떤 스타일?
  - 주요 기능?

Step 2: 컨텍스트 수집

관련 정보를 수집합니다:

  1. DESIGN.md 확인 (있는 경우)

    • 색상 팔레트
    • 타이포그래피 규칙
    • 컴포넌트 스타일
  2. 도메인 추론

    • 사용자 언급에서 도메인 파악
    • 일반적인 패턴 적용

Step 3: 프롬프트 확장

확장 체크리스트
  • 페이지 목적: 이 페이지의 주요 목표는?
  • 사용자 유형: 누가 이 페이지를 사용하는가?
  • 핵심 요소: 반드시 포함해야 할 요소는?
  • 레이아웃 구조: 어떤 섹션으로 구성되는가?
  • 상호작용: 주요 액션은 무엇인가?
  • 시각적 스타일: 어떤 분위기를 전달하는가?

Step 4: 구조화된 출력 생성

향상 템플릿

기본 템플릿

## [페이지 유형]: [페이지 이름]

### 개요
[페이지의 목적과 주요 기능 1-2문장 설명]

### 시각적 스타일
- **분위기**: [형용사들 - 예: 모던, 미니멀, 전문적]
- **색상**: [주요 색상 설명 또는 DESIGN.md 참조]
- **타이포그래피**: [폰트 스타일 설명]

### 레이아웃 구조
1. **헤더**: [헤더 구성 요소]
2. **메인 섹션**: [주요 콘텐츠 영역]
3. **사이드바** (선택): [보조 정보]
4. **푸터**: [푸터 구성 요소]

### 핵심 요소
- [요소 1]: [설명]
- [요소 2]: [설명]
- [요소 3]: [설명]

### 상호작용
- [액션 1]: [동작 설명]
- [액션 2]: [동작 설명]

### 디자인 시스템
[DESIGN.md 섹션 6 복사 또는 스타일 가이드]

향상 예시

예시 1: 간단한 입력

원본 입력:

"랜딩 페이지"

향상된 프롬프트:

## 랜딩 페이지: SaaS 제품 소개

### 개요
잠재 고객에게 제품 가치를 전달하고 가입을 유도하는 현대적인 랜딩 페이지

### 시각적 스타일
- **분위기**: 신뢰감 있고 전문적, 친근한 느낌
- **색상**:
  - 기본: 진한 파랑 (#2563EB) - 신뢰와 안정
  - 강조: 밝은 주황 (#F97316) - CTA 버튼
  - 배경: 순백색 (#FFFFFF) with 미묘한 그레이 섹션
- **타이포그래피**: Inter 폰트, 큰 헤딩 (48-72px), 넉넉한 줄간격

### 레이아웃 구조

1. **네비게이션 바**
   - 좌측: 로고
   - 중앙: 메뉴 링크 (Features, Pricing, About, Contact)
   - 우측: "로그인" 텍스트 링크 + "무료 시작" 기본 버튼

2. **히어로 섹션**
   - 좌측 (60%):
     - 대형 헤드라인 (제품 가치 제안)
     - 부제목 (1-2문장 설명)
     - CTA 버튼 그룹 ("무료 체험" + "데모 보기")
     - 신뢰 지표 (사용 기업 로고 또는 사용자 수)
   - 우측 (40%):
     - 제품 스크린샷 또는 3D 일러스트
     - 미묘한 그림자로 떠있는 효과

3. **기능 섹션**
   - 섹션 제목: "왜 [제품명]인가요?"
   - 3열 그리드의 기능 카드
   - 각 카드: 아이콘 + 제목 + 설명 (2-3줄)

4. **사회적 증거 섹션**
   - 고객 로고 배너 (그레이스케일)
   - 선택: 추천 인용문 카드

5. **CTA 섹션**
   - 배경: 미묘한 그라데이션
   - 대형 텍스트: 행동 유도 문구
   - 큰 CTA 버튼

6. **푸터**
   - 4열: 제품, 회사, 리소스, 법적 링크
   - 하단: 저작권 + 소셜 아이콘

### 핵심 요소
- **CTA 버튼**: 둥근 모서리 (8px), 넉넉한 패딩, 호버 시 약간 어두워짐
- **기능 카드**: 흰색 배경, 미묘한 테두리 또는 그림자, 호버 시 살짝 상승
- **신뢰 지표**: 회색조 로고, 자연스러운 간격

### 상호작용
- 네비게이션 링크: 호버 시 색상 변경
- CTA 버튼: 호버 시 살짝 어두워지고 미세한 상승
- 기능 카드: 호버 시 그림자 강화 및 미세 상승

### 참고사항
- 모바일 반응형 고려 (DESKTOP 우선 생성)
- 이미지 플레이스홀더 사용 가능
- 접근성: 충분한 색상 대비, 큰 클릭 영역

Read the full file on GitHub · 362 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.

  1. 12d ago First seen · 362 lines · 89 tokens per session scan A 48c9cc6c0f1a

Subscribe to this mod's changes

stitch-enhance-prompt is a skill published in the GitHub repository jh941213/codex-lattice (19 stars, last pushed 3mo ago), licensed MIT. It adds 89 tokens to every session and 3,463 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.

Related

Other skills, from other repositories

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

visual-ralph

Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ralph with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.

Yeachan-Heo/oh-my-codex · 50 tokens

accessibility

Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.

microsoft/hve-core · 47 tokens

make-resume

A Chinese-language tool for creating editable HTML resumes that can be changed in a browser and printed to PDF. It uses available resume templates when they are installed and otherwise provides a simpler fallback.

Hisn00w/ASu-skills · 86 tokens