디자인 시스템
Stitch Design Taste
Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다.
무엇인가
Google Stitch 화면 생성에 맞춰 최적화된 DESIGN.md 파일을 생성합니다. 분위기, 컬러, 타이포그래피, 컴포넌트, 레이아웃, 모션, 그리고 금지 패턴 목록까지 명시적으로 담습니다.
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion,
디자인에 왜 중요한가
- Stitch 화면은 네온 퍼플 그러데이션 대신 채도 80% 이하의 액센트 하나만 물려받습니다.
- 가운데 정렬 히어로와 동일한 카드 세 개짜리 행은 설정된 변주 기준을 넘으면 금지됩니다.
- 로딩과 빈 상태는 뻔한 스피너 대신 스켈레톤 형태로 정교하게 구성됩니다.
다루는 내용
- Overview
- Prerequisites
- Analysis and synthesis instructions
- Output format
- Best practices
- Common pitfalls to avoid
설치 방법
Stitch Design Taste
-
저장소를 클론하세요.
git clone https://github.com/Leonxlnx/taste-skill -
Codex에 스킬 파일 경로를 지정하세요.
skills/stitch-skill/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
프로젝트 분위기를 설명하면 스킬이 밀도, 변주, 모션 점수를 정합니다.
-
헥스 코드와 기능별 컬러 역할을 담은 7개 섹션짜리 DESIGN.md를 출력합니다.
-
그 파일을 Stitch에 바로 넘기거나, Stitch MCP 서버를 통해 전달하세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
codex-design 목록에서 더 보기 ↗다른 Codex 디자인 플러그인
프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다. 
프런트엔드 & UI 무엇을 하나 image-to-code 디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-mobile 프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-web 랜딩 페이지 섹션마다 가로형 레퍼런스 이미지를 하나씩 생성합니다. 다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 Codex 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.