Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

omd

Apply a project's DESIGN.md (Google Stitch format + OmD v0.1 brand-philosophy layer) as authoritative brand context when generating or modifying UI. Use whenever the user asks for UI work — new components, styling changes, layout, microcopy, empty/error states, motion — and a DESIGN.md exists at the project root. Also use when the user asks to "apply the brand", "match the design", "follow the design system", or references OmD, DESIGN.md, or the brand explicitly.

336 repo starsObserved in 1 repos
Design
GitHub

omd:apply

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

336 repo starsObserved in 1 repos
Design
GitHub

omd:asset-fetch

사용자 product UI 생성 시 placeholder 자리를 generic SVG가 아닌 **실제 free-license CDN 자산**으로 채운다. 로고·일러스트·아이콘·사진·폰트·패턴 카탈로그를 verified URL만으로 운영. '에셋 가져와줘', '플레이스홀더 진짜 이미지로', '로고 자리 채워줘', 'unsplash에서 사진 가져와' 류 요청에 트리거. omd:apply / omd:harness 안에서 자동 호출됨.

336 repo starsObserved in 1 repos
Design
GitHub

omd:codex-image

이미지 placeholder를 동적으로 materialize. Codex 채널에서는 내장 image-generation primitive 호출, Claude Code 채널에서는 omd-asset-curator로 fall back, OpenCode에서는 spec dump. HTML/MD의 `<!-- omd:gen-image -->` 블록을 단일 source of truth로 사용. '이미지 생성해줘', '플레이스홀더 채워줘', '코덱스로 이미지 만들어' 류 트리거.

336 repo starsObserved in 1 repos
Design
GitHub

omd-component-harvest

기존 references/<id>의 §8 Component Patterns + frontmatter `tokens.components`를 멀티서피스(여러 라우트 + 메뉴/모달 인터랙션) + 공개 디자인시스템(Storybook/Primer/Polaris/Cedar/Geist/*.design) 크롤로 풍부화. 단일 랜딩 스냅샷의 '버튼 수준'을 모달·탭·테이블·토스트·폼상태까지 확장하되, 소스가 빈약하면(랜딩만 있는 앱 중심 기업) 억지로 만들지 않고 정직하게 cap. 완료 시 `tokens.components_harvested: true` 마커. '컴포넌트 풍부화', '컴포넌트 하베스트', 'X 컴포넌트 보강', 'component harvest' 류에 트리거. 토큰 자체가 없으면 먼저 omd-token-backfill/omd-add-reference.

336 repo starsObserved in 1 repos
Design
GitHub

omd:design

사용자와 대화하며 디자인 선호도를 파악하고, oh-my-design 서베이를 통해 DESIGN.md를 생성합니다. '디자인 시스템 만들어줘', 'DESIGN.md 생성', '디자인 잡아줘', 'UI 스타일 정해줘' 등 디자인 시스템 구성이 필요할 때 트리거됩니다.

336 repo starsObserved in 1 repos
Design
GitHub

omd:designer-review

시각 + 브랜드 일관성 리뷰. HTML/MD/JSX artifact를 받아 brand DESIGN.md 대비 typo hierarchy, 색 budget, radius scale, 컴포넌트 state, 모바일 반응형 검수. severity BLOCK/WARN/FYI + line ref 출력. 'UI 리뷰', '디자인 검토', 'DESIGN.md 대비 검수' 류 트리거.

336 repo starsObserved in 1 repos
Design
GitHub

omd:experiment-gallery

N개 brand experiment를 한 화면에서 비교하는 gallery index.html을 생성. 각 카드는 brand name, wow rating, multi-turn refinement deltas, iframe scaled preview, standalone link 포함. '결과물 한 번에 보여줘', '갤러리 만들어', '5개 비교 뷰', 'experiment 결과 정리' 류 트리거. omd:harness가 N개 brand batch 작업 끝낸 직후 자동 호출되거나 사용자가 명시적으로 호출.

336 repo starsObserved in 1 repos
Design
GitHub

omd:feel

디자인·프론트 업계가 '감'으로 쓰던 인터페이스 디테일을 수치화한 규칙으로 적용(APPLY)하거나 감사(AUDIT)한다. Jakub Krehel의 make-interfaces-feel-better 철학을 계승 + HIG/Material/WCAG/DS 토큰/실무자 리서치로 확장한 17축·113규칙(provenance 등급별). 모션 타이밍·이징·동심원 radius·tabular-nums·44px 타깃·focus ring·prefers-reduced-motion 등. 'feel 좋게 다듬어줘', '인터페이스 디테일 적용', 'feel 점검', '마이크로 인터랙션 손봐줘', 'make this feel better', 'polish the interactions', 「インターフェースの細部を詰めて」, 「介面細節打磨」 류에 트리거. 브랜드 토큰은 DESIGN.md(omd:apply)가 우선.

336 repo starsObserved in 1 repos
Design
GitHub

omd:harness

화면 전체나 신규 surface를 처음부터 디자인할 때의 진입점 — Discovery→Wireframe→Components→Microcopy→Validation 파이프라인을 omd-master 오케스트레이터로 실행. 트리거: '랜딩페이지', '랜딩 페이지', '랜딩 만들어줘', '홈 화면', '첫 화면', '프로토타입', '그럴싸한', '구색 갖춰', 'first screen', 'first impression', 'landing page', 'landing', 'prototype', 'MVP UI', 'home', 'production-ready', 'wireframe to production', '랜딩 처음부터', 'production-ready', '一からデザイン', '從頭設計'. 자연어 발화('그럴싸한 랜딩 만들어줘', 'MVP UI 잡아줘', '프로토타입이라도 구색 갖춰서')에도 자동 트리거. 단일 컴포넌트 수정은 omd:apply.

336 repo starsObserved in 1 repos
Design
GitHub