디자인 스킬

현재 코드베이스(또는 폴더)를 분석해 "디자인 컨텍스트 브리프"(스택/디자인 토큰/컴포넌트/ 라우트/실제 UI 카피/큐레이션된 에셋/레포 링크)를 합성하고, 그걸 Claude Design (claude.ai/design)에 자동으로 전달해 디자인을 생성한 뒤 결과 링크를 터미널에 클릭 가능한 형태로 돌려주는 스킬. 터미널 한 번의 호출로 코드베이스 → Claude Design 컨텍스트 이관을 수행한다. claude.ai/design 은 사용자의 로그인된 Chrome(claude-in-chrome)으로 구동하되, 상호작용 레이어가 막히면(알려진 chrome-extension 충돌 버그) 깔끔하게 수동 핸드오프로 전환한다. 렌더링 스크린샷 캡처는 하지 않는다. 트리거: "/claude-design", "이 코드베이스를 클로드 디자인으로 옮겨줘", "코드베이스 분석해서 claude design에 전달", "랜딩 디자인 뽑아줘", "claude.ai/design에 보내줘", "클로드 디자인에 디자인 요청해줘", "이 레퍼런스로 디자인 만들어줘", "Claude Design에 시안 요청".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

프로젝트 DESIGN.md를 UI/시각 작업의 brand context로 적용. 컴포넌트·색상·폰트·레이아웃 수정 같은 구체적 요청과 톤·분위기 표현 — KR '좀 더 따뜻하게', EN 'make it warmer/cooler', 日本語「もう少し暖かく」, 繁體中文「更溫暖一點」 — 모두에 트리거. DESIGN.md 부재 시 omd:init 우선. 화면 전체 신규 디자인은 omd:harness, 교정 기록은 omd:remember.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build vue-web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any vue-web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Turn a game-level brief or existing scene snapshot into a reviewable spatial plan, then apply approved changes with coordinate, navigation and scene checks. Use for layouts, encounter placement and terrain plans.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Design and implement game HUDs, menus, icons and portrait systems from visual proposals through reusable engine assets and input checks. Use when a game interface needs a coherent visual and behavior contract.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Choose a workflow for 3D concepts, meshes, materials, animation, game VFX, UI, levels, audio and native visual review.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Connection management, room patterns, reconnection strategies, message buffering, and binary protocol design.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

VP Engineering perspective - org design (team topologies), process improvement, cross-team dependencies, engineering culture, OKRs, incident management maturity, platform strategy, DX optimization, release management at scale

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

50+ named UX rules with numeric thresholds, 30+ UI styles catalog, industry anti-patterns, pre-delivery checklist

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Generate design docs, ADRs, and concept docs from existing code by reverse engineering intent

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Topic design, partition strategies, consumer group patterns, exactly-once processing, and dead letter queue handling.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Protobuf schema design, streaming patterns, interceptor chains, deadline propagation, and error handling for gRPC services.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Schema design, resolver patterns, DataLoader, N+1 prevention, and subscription patterns for GraphQL APIs.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Full-stack backend architecture and frontend-backend integration guide. TRIGGER when: building a full-stack app, creating REST API with frontend, scaffolding backend service, building todo app, building CRUD app, building real-time app, building chat app, Express + React, Next.js API, Node.js backend, Python backend, Go backend, designing service layers, implementing error handling, managing config/auth, setting up API clients, implementing auth flows, handling file uploads, adding real-time features (SSE/WebSocket), hardening for production. DO NOT TRIGGER when: pure frontend UI work, pure CSS/styling, database schema only.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Django architecture patterns, REST API design with DRF, ORM best practices, caching, signals, middleware, and production-grade Django apps.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

React error boundary hierarchy, fallback UI patterns, offline-first fallback, retry mechanisms, and graceful degradation.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Mapping design, query optimization, aggregation patterns, index lifecycle management, and search relevance tuning.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Figma-to-code translation, design tokens, spacing/typography scales, responsive breakpoints, and design system bridge patterns.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Generate design systems with color palettes, typography, spacing scales, component tokens, and Tailwind config

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Reverse-engineer and clone a website in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide the target URL as an argument.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Voice framework, visual identity standards, color palette management, typography specs, brand consistency

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Type design analysis — encapsulation, invariant expression, usefulness, and enforcement.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Execute the implementation planning workflow using the plan template to generate design artifacts.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.