stitch-design-md
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 서버 도구를 사용하여 스크린 메타데이터와 디자인 자산을 검색해야 합니다:
More from jh941213/my-claude-code-asset
shadcn-ui
|
34frontend
|
24stitch-react
Stitch 스크린을 React 컴포넌트 시스템으로 변환합니다 — 디자인 토큰 추출, 컴포넌트 분해, TypeScript 타입 생성, 자동 검증 포함. Triggers on: Stitch React, 컴포넌트 변환, React 변환, HTML to React. NOT for: 새 React 앱 생성, API 구현.
23stitch-enhance-prompt
모호한 UI 아이디어를 Stitch에 최적화된 상세 프롬프트로 변환합니다 — 구체성 향상, UI/UX 키워드 추가, 디자인 시스템 컨텍스트 주입. Triggers on: 프롬프트 향상, Stitch 프롬프트, UI 아이디어, 프롬프트 개선. NOT for: 직접 코딩, React 구현.
22ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
18react-patterns
|
17