stitch-design-taste
Google Stitch를 위한 프리미엄 UI 디자인 시스템 생성
Claude 에이전트는 종종 범용적이고 AI답게 보이는 인터페이스를 생성합니다. 이 스킬은 Inter 폰트, 네온 글로우, 중앙 정렬 히어로 섹션과 같은 일반적인 함정을 피하는 프리미엄, 비범용적 UI 사양을 생성하기 위해 엄격한 디자인 표준을 적용합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"stitch-design-taste" 사용 중입니다. 핀테크 대시보드용 디자인 사양 생성
예상 결과:
Canvas White (#F9FAFB) 배경, Charcoal Ink (#18181B) 텍스트, 성장 지표용 Emerald Signal (#10B981) 강조색, 헤드라인용 가중치 700-900의 Geist 폰트, 모든 숫자에 대한 모노스페이스, 스프링 물리 애니메이션 사양(stiffness: 100, damping: 20), Inter 폰트, 네온 글로우, 범용 플레이스홀더 데이터에 대한 명시적 금지를 포함한 DESIGN.md 파일.
"stitch-design-taste" 사용 중입니다. 에디토리얼 매거진 사이트용 디자인 사양 생성
예상 결과:
높은 창의성(9), 높은 variance(8), 인라인 이미지 타이포그래피가 있는 비대칭 히어로 레이아웃, 디스플레이용 독특한 모던 세리프(Fraunces, Instrument Serif), 본문 텍스트의 엄격한 65ch 최대 너비, 계단식 리빌이 있는 모션 오케스트레이션이 포함된 DESIGN.md 파일.
보안 감사
안전Static analysis flagged 205 potential issues, all evaluated as false positives. The skill contains only markdown documentation files describing design system specifications. No executable code, shell commands, or cryptographic operations exist. All detected patterns are design terminology being misinterpreted by the scanner (e.g., CSS hash notation, font weight values, design system references). Safe for publication.
품질 점수
만들 수 있는 것
프리미엄 랜딩 페이지 생성
범용적인 AI 미학을 피하는 고급 랜딩 페이지용 디자인 사양을 생성합니다. 전문적이고 독특한 웹Présence를 원하는 스타트업에 적합합니다.
일관된 디자인 시스템 구축
타이포그래피, 색상, 간격, 컴포넌트 동작을 단일 진실 공급원에 문서화하여 제품スイ트 전반에 걸쳐 일관된 시각적 언어를 확립합니다.
디자인 제약 조건으로 프로토타이핑
신속한 프로토타이핑 가이드레일로 안티패턴 목록을 사용합니다. 명시적 금지는 가능한 디자인 실수를 사전에 방지합니다.
이 프롬프트를 사용해 보세요
stitch-design-taste 스킬을 사용하여 [프로젝트 유형, 예: 'SaaS 대시보드']에 대한 DESIGN.md를 [창의성 수준 1-10] criatividade 설정과 [밀도 수준 1-10] 밀도로 생성하세요.
stitch-design-taste 스킬을 사용하여 [프로젝트 설명]용 DESIGN.md를 생성하세요. 분위기는 [분위기 설명, 예: '볼드 타이포그래피가 있는 에디토리얼 매거진']입니다. variance를 8로, motion을 6으로 설정하세요.
stitch-design-taste 스킬을 사용하여 데이터 집약적 대시보드용 DESIGN.md를 생성하세요. 밀도를 9로, variance를 7로 설정하고 모든 수치에 대해 monospace를 활성화하세요. 상태 표시기에 지속적인 애니메이션을 포함하세요.
stitch-design-taste 스킬을 사용하여 미니멀리스트 포트폴리오용 DESIGN.md를 생성하세요. 창의성을 3으로, 밀도를 2로, variance를 2로 설정하세요. Electric Blue를 단일 강조색으로 사용하세요. 세리프 폰트 없음.
모범 사례
- 토큰을 상세화하기 전에 분위기 설명부터 시작하세요 — 응집력 있는 디자인 언어를 보장하려면 분위기를 이해하는 것이 선행되어야 합니다
- 정확히 하나의 강조색만 선택하고 사양 전체에서 일관되게 유지하세요 — 여러 강조색은 프리미엄 느낌을 약화시킵니다
- 명시적 안티패턴을 포함하세요 — 금지 목록은 출력을 비범용적이고 독특하게 만드는 핵심입니다
피하기
- Inter 폰트 사용 — 범용적인 AI 모양 인터페이스를 생성합니다; Geist, Satoshi, Cabinet Grotesk 또는 Outfit을 대신 사용하세요
- 보라색 또는 네온 그라데이션 효과 추가 — 이것은 'AI 생성'임을 알리며 프리미엄 컨텍스트에서 엄격히 금지됩니다
- 중앙 정렬 히어로 레이아웃 — 이것들은 범용적이며 금지됩니다; 비대칭 분할 화면이나 왼쪽 정렬 구조를 대신 사용하세요