variant-design
영어 | 중국어
빈 캔버스 문제를 해결합니다. 프롬프트(Prompt) 입력 → 완전히 구현된 3가지 개별 디자인 생성 → 변형(vary) → 내보내기(export).
Variant 디자인 커뮤니티에서 영감을 받고, Impeccable design system을 기반으로 하는 Claude Code 스킬입니다. 프롬프트를 입력하면 세 가지의 서로 다른 디자인 방향(divergent design directions)을 얻게 되는데, 각 방향은 다른 스튜디오의 미학을 반영합니다. 이후 한 단어 행동(one-word actions)으로 반복 작업(iterate)할 수 있습니다.
인터랙티브 웹사이트
실시간 웹사이트 → · 웹사이트 소스 · 스킬 설치
이중 언어 프롬프트 플레이그라운드를 사용하여 다음을 수행할 수 있습니다:
- 제품, 대상 고객(audience), 톤, 제약 조건 등을 설명합니다.
- 세 가지의 프롬프트 인지적 위치(prompt-aware positions): Narrative, System, 그리고 Contrast를 비교합니다.
- 가장 강력한 방향을 전체 스킬로 가져와 반복 작업 및 코드 내보내기를 수행합니다.
React + Vite 웹사이트를 로컬에서 실행하려면 다음 명령어를 사용하세요:
git clone https://github.com/YuqingNicole/variant-design-skill.git
cd variant-design-skill/website
npm ci && npm run dev
샘플 출력물
단일 프롬프트에서 생성된 세 가지 변형 디자인—각각 다른 스튜디오의 느낌을 줍니다:
| A — 에디토리얼(Editorial) | B — 다크 대시보드(Dark Dashboard) | C — SaaS 랜딩(SaaS Landing) |
|---|
| Editorial | Dashboard | SaaS |
기능 설명
생성 모드 (기본값)
- 시나리오 감지 (Detects your scenario) — 대시보드, SaaS 랜딩 페이지, 에디토리얼(editorial), 이커머스, 모바일 앱, 크리에이티브 도구, 교육, 포트폴리오, 식음료(food & beverage), 패션 및 라이프스타일
- 디자인 시스템 참조 로드 (Loads design system references) — 타이포그래피, 색상 이론 (OKLCH), 공간 디자인, 모션(motion), 마이크로 인터랙션(micro-interactions), 상호작용(interaction), 반응형(responsive), UX 라이팅
- 3가지 구별되는 변형 생성 (Generates 3 distinct variations) — 각 변형은 작동하는 작업 제어 장치(working task controls)를 통해 고유한 제품 트레이드오프(product trade-off)를 표현하며, 시각적 토큰(visual tokens)은 브랜드 잠금(brand lock) 하에 고정됩니다.
- 기계적 및 시각적 품질 게이트 실행 (Runs mechanical and visual quality gates) — 생성된 코드를 스캔한 후, 렌더링된 결과물에서 일반적인 AI 미학 지문(AI aesthetic fingerprints)을 확인합니다.
- 작동하는 코드 배포 (Ships working code) — 컨텍스트 인식 출력(Context-aware output): React 프로젝트를 자동 감지하고
.tsx 컴포넌트를 생성하며, 그렇지 않은 경우 의존성 없는 인터랙티브 HTML을 생성합니다. 실제 콘텐츠이며 더미 텍스트(lorem ipsum)는 없습니다.
- 변형 액션 제공 (Offers variation actions) — 추가 진행(push further), 다듬기(polish), 비평(critique), 스타일 교체(swap styles), 색상 리믹스(remix colors), 레이아웃 셔플(shuffle layouts), 모션 추가(add motion), 극대화(dramatize), 인터랙티브하게 만들기(make interactive)
UX 검토 모드 (UX Review Mode)
휴리스틱스부터 전환 디자인까지 모든 것을 다루는 Nielsen Norman Group 연구에 기반한 포괄적인 사용성 평가.
- 휴리스틱 평가(Heuristic evaluation) — 닐슨의 10가지 휴리스틱을 기반으로 플로우를 따라가며 진행하며, 위반 사항은 심각도에 따라 등급화됨 (1=미관적 오류 ~ 4=치명적)
- 인지 부하 분석(Cognitive load analysis) — 불필요한 복잡성의 원인을 파악하고 감소 전략을 제안함
- 정신 모델 진단(Mental model diagnosis) — 사용자가 기대하는 것과 시스템이 실제로 작동하는 것 사이의 불일치를 찾음
- 어포던스 감사(Affordance audit) — 상호작용처럼 보이지만 실제로는 그렇지 않은 요소(또는 그 반대)를 식별함
- 게슈탈트 검사(Gestalt check) — 근접성, 유사성, 그룹화 신호가 의도된 관계와 일치하는지 확인함
- 다크 패턴 스캔(Dark pattern scan) — 조작적인 패턴(확인 수치심 유발, 로치 모텔, 숨겨진 비용 등)을 식별함
- 정보 구조(Information architecture) — 탐색 레이블, 계층 깊이, 검색 디자인, 카드 분류 검증
- 접근성 감사(Accessibility audit) — WCAG 2.1 AA 준수 여부, 키보드 탐색, ARIA 패턴, 색상 대비 확인
- 모바일 상호작용(Mobile interaction) — 터치 타겟, 엄지 영역(thumb zones), 제스처 충돌, iOS 대 Android 관습
- 온보딩 검토(Onboarding review) — 첫 사용 경험, Aha 순간 경로, 빈 상태(empty states), 활성화 퍼널
- 데이터 시각화(Data visualization) — 차트 유형 선택, 색상 인코딩, 대시보드 정보 밀도
- 디자인 토큰 검토(Design token review) — 토큰 계층 구조, 명명 규칙(naming conventions), 테마 및 다크 모드
- 전환 설계(Conversion design) — 신뢰 신호, CTA 카피, 가격 페이지 구조, 양식 마찰 지점
ux review → 현재 디자인에 대한 전체 휴리스틱 평가
review this design → 플로우를 따라가며, 심각도 등급과 함께 위반 사항을 표시
cognitive load → 복잡하게 느껴지게 만드는 요소를 파악
...
분석 모드 (기존 사이트)
- 기존 코드 스캔: 디자인 토큰을 위해 HTML, CSS, JSX, Vue, Svelte 파일을 읽습니다.
- 디자인 기본 요소 추출: 색상(colors), 글꼴(fonts), 간격(spacing), 컴포넌트(components), 전환 효과(transitions), 브레이크포인트(breakpoints)를 추출합니다.
- 불일치 감지: 거의 중복되는 색상, 그리드에서 벗어난 간격, 누락된 호버 상태(hover states), 대비 실패(contrast failures), 글꼴 크기 문제 등을 감지합니다.
- 스타일 보고서 생성: 심각도 레벨과 우선순위 수정 목록이 포함된 점수화된 감사 보고서를 생성합니다.
- 토큰 생성: 흩어져 있는 하드코딩 값들로부터 통합된 CSS 사용자 정의 속성(CSS custom properties) 파일을 만듭니다.
- 스타일 매칭 페이지 생성: 기존 디자인 시스템을 정확하게 따르는 새 페이지를 생성합니다.
- 마이그레이션 계획 수립: 일관성이 부족한 코드베이스를 통합하기 위한 단계별 체크리스트를 만듭니다.
audit → 전체 스타일 일관성 보고서
tokens → 기존 CSS에서 토큰 추출
match → 기존 스타일에 맞는 새 페이지 생성
...
설치
SKILL.md, skills/, references/, scripts/, assets/, 그리고 VERSION을 모두 보존하며 전체 리포지토리를 설치해야 합니다. SKILL.md만 복사하는 것은 불충분합니다. 이는 하위 스킬 및 실행 가능한 헬퍼(helper)로 연결되기 때문입니다.
Codex의 경우, 해당 스킬 디렉터리 내에 클론합니다 (다른 설정된 스킬 루트를 사용하세요):
git clone https://github.com/YuqingNicole/variant-design-skill.git ~/.codex/skills/variant-design
Claude Code 또는 다른 로컬 에이전트의 경우, 동일한 전체 폴더를 해당 에이전트의 스킬 위치에 설치하거나, 작업 공간으로 클론한 후 에이전트에게 절대 경로 SKILL.md 경로를 지정합니다. Hermes/OpenClaw AGENTS.md의 경우, 텍스트를 붙여넣기 하는 대신 이 설치된 진입점(entrypoint)을 가리키는 포인터를 추가해야 합니다. 에이전트는 번들된 헬퍼를 위해 파일 접근 권한과 Node.js가 필요합니다.
웹 프로젝트나 API 통합의 경우, 참조된 디렉터리들을 환경의 파일 검색/실행 도구와 함께 진입점(entrypoint)을 통해 사용할 수 있도록 준비해야 합니다. 프롬프트 텍스트만으로는 미리보기 서버나 스냅샷 명령어를 제공할 수 없습니다.
선택적 릴리스 확인은 최대 24시간에 한 번 실행되며, 사용 가능한 릴리스를 보고하고 자동으로 업데이트되지 않습니다.
생성(Generate) → 비교(compare) → 선택(choose) → 개선(refine) → 내보내기(export)
- 세 가지 방향(directions)은 동일한 핵심 작업(core task), 데이터, 그리고 필수 기능을 유지합니다. 각 항목은 무엇을 최적화하는지, 무엇을 희생시키는지, 언제 사용해야 하는지를 설명하고 근거 기반의 추천을 제공합니다.
- 비교 페이지가 기본적으로 열립니다. React 출력물은 세 개의 독립적인 마운트(isolated mounts)와 직접적인 미리보기 URL을 얻으며, 프로젝트 유형 검사에는 생성된 파일이 포함되어야 합니다. 네이티브 어댑터는 프레임워크별 종속성(framework-specific dependencies)을 처리합니다.
- 'B vary subtle — hero'는 B를 선택하지 않고도 B를 편집합니다. 'pick B'는 B를 명시적으로 선택합니다. 'undo B'는 A와 C, 그리고 선택된 승자는 보존하면서 B의 마지막 파일과 토큰을 복원합니다.
- Schema v2는 각 방향의 파일, 토큰, 버전, 비교 내용, 그리고 기록을 개별적으로 저장합니다. 모든 교체(replacement) 앞에는 영구적인 스냅샷(durable snapshot)이 존재하며, Git만으로는 스냅샷이 아닙니다.
- 우선순위(Precedence): 사용자 제약 조건(user constraints) → 제품 작업 및 기존 디자인 시스템 → 접근성(accessibility) → 스타일 조언. 해결되지 않은 접근성 충돌을 보고합니다. 브랜드가 잠긴 출력물은 폰트/토큰을 유지하며, 자유로운 탐색은 이를 변경할 수 있습니다. 애니메이션 할당량(animation quota)은 없습니다.
구현 및 검증: 미리보기 및 기록, 컨텍스트 스키마, 회귀 테스트. 기존의 라우트 우선 라우팅(route-first routing), 로컬 영역(local zones), 그리고 제품 무결성 게이트(Product Integrity Gate)는 그대로 유지됩니다.
사용법
기본 트리거(Basic triggers)
가장 간단한 방법입니다. 원하는 것을 설명하기만 하면 됩니다:
design a dashboard for a crypto trading terminal
show me 3 directions for a SaaS landing page
give me UI options for a wellness app
지정된 트리거(Directed triggers) — 스타일 고정 또는 사이트 참조
미적인 방향(aesthetic direction), 팔레트, 또는 일치시키고 싶은 기존 사이트를 명시하여 더 구체적으로 지정할 수 있습니다:
developer tools homepage, code-first hero with CLI snippet, dark Data/Technical direction
landing page for an AI agent tool — Dark Indigo palette, Geist font, Code-First layout from saas.md
...
팁: 지정하는 제약 조건(방향 + 팔레트 + 레이아웃 패턴)이 많을수록 결과물은 더 목표 지향적으로 됩니다. 프롬프트가 개방적일수록 세 가지 변형은 더욱 다양하게 나타납니다.
지향적 프롬프트의 구성 요소 (Anatomy of a directed prompt)
[무엇에 대한 것인지] + [도메인] + [미학적 방향 또는 팔레트] + [레이아웃 힌트] + [특정 시그니처 디테일]
예시:
| 목표 | 프롬프트 |
|---|
| 특정 사이트의 분위기 일치시키기 | "개발자 도구 랜딩 페이지 — 어두운 데이터/기술적, CLI 코드 히어로, 다크 인디고 팔레트" |
| ... | |
변형 작업 (Variation actions)
초기 3가지 변형을 본 후에는 다음 작업을 통해 반복합니다:
| 작업 | 발생하는 일 |
|---|
| 강하게 변형하기(Vary strong) | 현재 방향성을 극단으로 밀어붙이기 |
| ... | |
빠른 반복 단축키 (Quick iteration shorthand)
Claude Code에서는 빠른 반복을 위해 단축키를 사용할 수 있습니다:
A vary strong → 변형 A를 최대치로 끌어올림
B remix colors → 변형 B에 대한 3가지 새로운 팔레트
C → mobile → C를 모바일 뷰포트로 표시
...
확인하게 될 내용 (What you'll see)
파일은 variant-output/에 작성되며, 브라우저 도구가 사용 가능한 경우 브라우저에서 자동 열립니다. 그렇지 않은 경우에는 정확한 URL/경로가 반환됩니다. 각 변형에는 터미널 내에 간결한 **요약 카드(Summary Card)**가 함께 제공됩니다 (최적화, 트레이드오프, 최적 적합 시나리오, 팔레트, 글꼴, 상호작용). 작업은 Reshape / Tune / Animate / Refine / Export 카테고리로 그룹화됩니다.
반복 작업 시에는 동일한 파일이 덮어쓰여 다시 열리며, 브라우저 탭이 자동으로 새로 고침됩니다. 터미널에는 전체 코드가 아닌 변경된 내용에 대한 2~3줄 요약이 표시됩니다.
컨텍스트는 세션 간에도 유지됩니다. 프로젝트 디렉토리에 재진입하면, 스킬은 variant-output/.variant-context.json을 읽어 마지막 팔레트, 글꼴, 방향 및 반복 횟수를 자동으로 재개합니다:
✦ 컨텍스트 재개: Amber Warm · Editorial · Instrument Serif + Instrument Sans · 편집 중 B · 선택됨 없음 · B 수정본 4
(컨텍스트를 초기화하여 새로 시작)
이미 확인한 선호 사항을 다시 지정할 필요가 없습니다. 현재 컨텍스트를 검사하려면 show context를 사용하고, 새로 시작하려면 reset context를 사용하세요.
**출력 형식(Output format)**은 컨텍스트를 인식합니다: 현재 디렉터리에 React 프로젝트(종속성으로 react가 포함된 package.json)가 있는 경우, 출력은 .tsx 컴포넌트입니다. 그렇지 않은 경우, 기본값은 종속성이 없는 HTML입니다. --react 또는 --html로 재정의할 수 있습니다. 자세한 내용은 아래를 참조하세요.
React 출력 (컨텍스트 인식)
React 프로젝트에서는 스킬이 자동으로 .tsx 출력을 사용합니다:
# In a React/Next/Vite project directory:
design a dashboard → generates variant-output/VariantA.tsx, VariantB.tsx, VariantC.tsx
Detects Next.js → adds "use client" where needed
...
생성된 .tsx 파일은 variant-output/에 저장됩니다. 프로젝트 빌드에 포함하려면 이 파일들을 src/components/로 이동하세요. 미리보기 명령어는 package.json 스크립트(npm run dev, pnpm dev 등)에서 추론됩니다.
참조 라이브러리 (Reference library)
도메인 참조 (Domain references)
시나리오별 자료 (초기 프롬프트, 팔레트, 타이포그래피, 레이아웃, 실제 커뮤니티 예시):
| 파일 | 도메인 |
|---|
references/dashboard.md | 데이터 대시보드, 분석(analytics), 모니터링, 트레이딩 터미널 |
| ... | |
디자인 시스템 참조 (Design system references) (흠잡을 데 없는)
모든 생성에 로드되는 기초 디자인 원칙:
| 파일 | 포함 범위 |
|---|
references/design-system/typography.md | 모듈형 스케일(Modular scale), 유동 타이포그래피(fluid type), 폰트 페어링, OpenType 기능, 수직 리듬(vertical rhythm) |
| ... | |
디자인 원칙 (Design principles)
- 실제 콘텐츠가 승리한다. 그럴듯한 헤드라인, 실제 데이터, 실제 카피를 사용하세요. 디자인에 생동감을 불어넣습니다.
- 충실히 구현하라. 절반만 실행된 미학은 단순한 디자인보다 더 나쁘게 보입니다.
- 절대 통일성을 추구하지 마라. 만약 A가 어두운 톤이라면, B도 어둡게 만들어서는 안 됩니다. 각각은 다른 스튜디오처럼 느껴져야 합니다.
- 타이포그래피를 최우선으로. 개성 있는 디스플레이 폰트와 신뢰할 수 있는 본문 폰트를 사용하세요. 기존 브랜드 폰트는 유지하고, 자유로운 탐색 과정에서도 의도적으로 서체를 선택해야 합니다.
- 컬러 = 하나의 대담한 OKLCH 선택. 확신을 가지고 사용된 단일 지배 색상이 다섯 가지 주저하는 색상보다 낫습니다. 항상 뉴트럴 컬러에 틴트를 입히세요.
- AI의 저품질 결과물은 금지한다. 보라색 그라디언트, 글래스모피즘(glassmorphism), 바운스 이징(bounce easing), 모든 것을 중앙에 배치하는 레이아웃은 사용하지 마십시오.
기여하기
