Skip to content
alyn
kwakseongjae

@kwakseongjae

kwakseongjae

GitHub profile
Skills
40
GitHub stars
580
Installs
653

Top skills by kwakseongjae

56
kwakseongjae

claude-design

현재 코드베이스(또는 폴더)를 분석해 "디자인 컨텍스트 브리프"(스택/디자인 토큰/컴포넌트/ 라우트/실제 UI 카피/큐레이션된 에셋/레포 링크)를 합성하고, 그걸 Claude Design (claude.ai/design)에 자동으로 전달해 디자인을 생성한 뒤 결과 링크를 터미널에 클릭 가능한 형태로 돌려주는 스킬. 터미널 한 번의 호출로…

580653Design
56
kwakseongjae

ego-browser

When you need a browser, read this Skill by default. Use it to open and operate websites, fill forms, click buttons, take screenshots, extract page data, sign in, and perform other browser…

580653Design
56
kwakseongjae

hangul

Fixes the Korean (Hangul) that coding agents get wrong, in web UI and in documents of any length. Typography for web UI: line breaking (break-all, keep-all, overflow-wrap), letter-spacing…

580653Design
56
kwakseongjae

omd-3d-hero

A rendered 3D hero from the project's DESIGN.md: a soft-lit studio (cyclorama, contact shadows, ambient occlusion) with a floating pile of brand-colored objects shaped by the radius tokens…

580653Design
56
kwakseongjae

omd-brand-look

Repaint one screen with the measured tokens of verified real-company references (verified_v2 only), render it at 1440·1024·768·390 in a real browser, and report rule-by-rule PASS/FAIL with…

580653Design
56
kwakseongjae

omd-cjk-type-shader

One effect, done well: 먹 번짐 — a large Korean, Japanese or Chinese display headline that reads as sumi ink printed on hanji. The heading stays real, selectable DOM text in ink color from the…

580653Design
56
kwakseongjae

omd-restraint

절제미를 측정 가능한 규칙으로 — 덜어내기(subtraction)·여백·위계를 AUDIT(렌더된 페이지를 데스크톱·모바일에서 재서 규칙별 PASS/FAIL+수치)하거나 APPLY(인벤토리 → 필요 없는 것 삭제 → 중복 병합 → 비운 자리를 초점 요소에 준다 → 재측정)한다. 초점 1개(1등 ≥ 2× 2등), 첫 화면 조각 ≤ 5, 서체…

580653Design
56
kwakseongjae

omd-shader-hero

One full-bleed launch hero in two inks from the project's DESIGN.md: the base color and exactly one brand color, as a slowly folding (or, with data-shape="ripple", rippling) ordered-dither…

580653Design
54
kwakseongjae

omd-apply

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

580653Design
54
kwakseongjae

omd-autopilot

One-prompt autonomous product design and implementation. Use automatically for broad greenfield UI requests such as 'from scratch', '새 제품/화면을 알아서 만들어줘', or requests that delegate DESIGN.md…

580653Design
54
kwakseongjae

omd-harness

사용자와 단계별로 검토하는 guided design harness. Discovery→Wireframe→Components→Microcopy→Validation을 omd-master가 실행하고 journey/system/validation의 필수 체크포인트에서 멈춘다. '/omd-harness', '체크포인트마다 검토', '나와 단계별로…

580653Design
54
kwakseongjae

omd-init

프로젝트 루트에 DESIGN.md를 부트스트랩 — 실제 기업 레퍼런스 중 컨텍스트 매칭으로 추천하고 선택된 레퍼런스의 톤&매너를 보존한 variation을 생성. DESIGN.md 부재 상태에서의 UI 작업 또는 '디자인 시스템 세팅', 'set up our design system', 「デザインシステムを作って」, 「建立設計系統」류의…

580653Design
54
kwakseongjae

omd-reference-capture

선택된 reference brand의 라이브 사이트에서 디자인 컨텍스트(토큰·구조·visual reference)를 캡쳐. brand homepage 패칭, 컴퓨티드 스타일 inspect, 로고/스크린샷을 assets/_reference// 로 가져와 attribution.md + LICENSE-NOTE.md와 함께 저장. '뱅크샐러드…

580653Design
53
kwakseongjae

google-analytics

Analyze Google Analytics data, review website performance metrics, identify traffic patterns, and suggest data-driven improvements. Use when the user asks about analytics, website metrics…

580653Data analysis
52
kwakseongjae

omd-aphrodite

Maximum-craft one-page landing — the wow bar. omd:landing 의 구조 위에 마감(서체 조달·그레인·깊이·색보정·스크롤 타임라인)과 최고급 에셋을 얹고, 랜딩 검사 전 항목 통과를 합격선으로 삼는다. Trigger: '와우', '압도적인', '최고급', '쇼케이스용', 'aphrodite'…

580653Design
52
kwakseongjae

omd-asset-fetch

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

580653Design
52
kwakseongjae

omd-codex-image

이미지 placeholder를 동적으로 materialize. Codex 채널에서는 내장 image-generation primitive 호출, Claude Code 채널에서는 omd-asset-curator로 fall back, OpenCode에서는 spec dump. HTML/MD의 `` 블록을 단일 source of truth로…

580653Images & art
52
kwakseongjae

omd-designer-review

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

580653Design
52
kwakseongjae

omd-experiment-gallery

N개 brand experiment를 한 화면에서 비교하는 gallery index.html을 생성. 각 카드는 brand name, wow rating, multi-turn refinement deltas, iframe scaled preview, standalone link 포함. '결과물 한 번에 보여줘', '갤러리 만들어'…

580653Design
52
kwakseongjae

omd-feel

디자인·프론트 업계가 '감'으로 쓰던 인터페이스 디테일을 수치화한 규칙으로 적용(APPLY)하거나 감사(AUDIT)한다. Jakub Krehel의 make-interfaces-feel-better 철학을 계승 + HIG/Material/WCAG/DS 토큰/실무자 리서치로 확장한 17축·113규칙(provenance 등급별). 모션…

580653Design
52
kwakseongjae

omd-final-qa

출간 ready 직전 read-only critic. 8-item rubric 강제. 'looks good' rubber-stamp 금지. 라인 ref 필수. 2-round revision hard cap. '최종 QA', '출간 검수', 'rubric으로 평가' 류 트리거.

580653Testing
52
kwakseongjae

omd-humanize

제품 문서·UX 카피·랜딩 카피를 KO/EN/JA/ZH-CN/ZH-TW 각 언어의 자연스러운 문장으로 다듬되 사실·수치·명령어·링크·브랜드 voice를 보존한다. 영어·일본어·중국어 문장이나 여러 locale을 함께 다듬는 'AI 티 없애줘', '번역투 고쳐줘', '문장이 기계적이야', '현지 사용자처럼 다듬어줘', 'humanize…

580653Anti-slop
52
kwakseongjae

omd-kr-writer

oh-my-design 블로그 글을 12개 voice preset으로 작성하거나 다듬는다. 한국어 표기·띄어쓰기·번역투·높임과 상황별 문체는 hangul 스킬을 따르고, 보고서·피치덱·공지·이메일·보도자료 같은 문서 자체는 hangul이 맡는다 — toss-tech-design (default), karrot-neighborly…

580653Design
52
kwakseongjae

omd-lab-02-design-harness

OmD Lab #02 — 디자인 하네스 정교화 실험. 동일 task를 v1, v2, v3... 버전별 하네스 설정으로 돌려서 산출물 품질·토큰 비용·iteration 수·persona ABANDON 율을 비교. 트리거 — '/omd-lab-02', '하네스 lab 시작', '디자인 하네스 v2 돌려서 비교', 'lab #02 자동 비교'.

580653Design
52
kwakseongjae

omd-landing

Scroll-native one-page landing that overwhelms — concept, composition, asset placement, and scroll choreography derived from DESIGN.md and the measured landing-craft codex. Trigger: '랜딩…

580653Design
52
kwakseongjae

omd-learn

.omd/preferences.md의 status:pending 항목을 Core v2 System Graph에 합쳐 DESIGN.md를 재생성하고 status를 applied로 플립. '프리퍼런스 정리해줘', 'fold preferences', 'apply all corrections', 「好みをDESIGN.mdに反映」, 「套用偏好」류의…

580653Design
52
kwakseongjae

omd-orchestrator

멀티 에이전트 디자인 워크플로우 supervisor. writer, locale adaptation, humanize, UI slop audit, designer review, final QA, image materialization을 routing한다. 2-round revision cap을 유지하며 다국어 문서·UI 개선·출간…

580653Design
52
kwakseongjae

omd-slop-audit

실제 제품 route의 UI·UX copy를 검사해 제품 맥락 없이 반복된 생성형 기본 패턴, 브랜드 근거 없는 장식, 카드·그라데이션·아이콘 타일 남용, 번역투와 추상 카피를 rule ID와 line ref로 진단한다. 'AI slop 잡아줘', '템플릿 같아', '왜 AI가 만든 화면 같지?', 'anti-slop audit' 요청에…

580653Anti-slop
52
kwakseongjae

omd-sync

DESIGN.md 변경분을 CLAUDE.md / AGENTS.md / .cursor/rules/omd-design.mdc shim 3종에 전파. 'shim 갱신', 'drift 확인', 'ship', 'publish', 「shimを更新」, 「同步 CLAUDE.md」류의 요청에 트리거. DESIGN.md가 수정됐는데 shim이 오래됐을 때…

580653Design
50
kwakseongjae

omd-issue

oh-my-design 사용 중 불만·결함·아쉬운 점을 구조화된 GitHub 이슈로 접수하고, 쌓인 이슈를 배치로 처리한다. 사용자 모드('이슈 등록해줘', '이거 불편한데 신고할래', '버그 리포트', 'file an issue', '기능 요청')와 내부 도그푸딩 모드(스킬을 돌리다 미흡한 부분을 발견한 오케스트레이터·서브에이전트가…

580653Design
50
kwakseongjae

omd-media

Brand-consistent asset sets from DESIGN.md — hero, section illustrations, icon sets, OG image — generated through whichever channel the user actually has (grok build image_gen, Codex…

580653Design
50
kwakseongjae

omd-remember

사용자의 디자인 선호·교정을 .omd/preferences.md에 기록. '이거 기억해줘', '앞으로는 이렇게', 'remember this', 'going forward never X', 「覚えておいて」, 「記住這個」류의 발화 또는 omd:apply가 교정을 감지했을 때 트리거. 기록된 내용은 omd:learn으로 DESIGN.md에…

580653Design
50
kwakseongjae

omd-taste

시스템이 학습한 사용자의 디자인 취향을 한 뷰로 렌더. .omd/preferences.md + foldin-proposal.json + DESIGN.md를 읽어 반영됨/대기 중/보류됨/모르는 것 4그룹으로 보여준다. '/omd-taste', '내 취향 보여줘', '취향 현황', 'what are my preferences', 'show…

580653Anti-slop
49
kwakseongjae

omd-locale-adapter

한국어 canonical 문서·UX copy를 EN/JA/ZH-CN/ZH-TW로 번역이 아니라 locale adaptation한다. thesis·사실·명령어는 보존하되 문장 순서, 주어, register, 제품 용어와 호흡은 각 언어에서 다시 쓴다. '다국어 적용', '영문/일문/간체/대만어 버전', 'locale 문서 만들어줘' 요청에…

580653Design
49
kwakseongjae

omd-setup

Guided setup of the tools the design harness can use — image/video generation channels, browser, encoders. Detects what the user already has, explains pros/cons/costs, asks instead of…

580653Design
49
kwakseongjae

omd:add-reference

Reference catalog authoring compatibility gate. Core v2 cutover가 끝나기 전에는 신규 legacy DESIGN.md 쓰기를 차단하고 안전한 재개 조건을 설명한다.

580653Design
48
kwakseongjae

omd-showcase

Turn a rendered page (or several, side by side) into a scroll demo video — deterministic frame capture, ffmpeg H.264/GIF, labels per arm. Trigger: '시연 영상', '스크롤 영상 만들어', 'showcase', 'demo…

580653Design
48
kwakseongjae

omd-update

Safely update an existing oh-my-design installation in place and verify it afterward. Use when the user asks to update, upgrade, refresh, reinstall, or check whether their OmD skills…

580653Design
48
kwakseongjae

omd:batch-launch

Reference batch writer compatibility gate during the DESIGN.md Core v2 catalog cutover.

580653Design
47
kwakseongjae

omd-component-harvest

Legacy catalog component writer safety gate. Use when component harvesting is requested, but stop before editing until the Core v2 graph-backed catalog writer and readers are available.

580653Design