코딩 에이전트에게 디자인 감각을 심어주는 MD 모음

안녕하세요 여러분, 피피팀 시원🌊입니다.

오늘은 코딩 에이전트에게 디자인 감각을 심어주는 DESIGN.md · SKILL.md 모음을 소개해 드릴게요. 텍스트 파일 하나로 AI가 만드는 UI 퀄리티를 확 끌어올릴 수 있는 것이 특징입니다.

📍 Awesome-Design-Md 🔗 https://github.com/VoltAgent/awesome-design-md ✓ 애플·스포티파이·노션 등 55개 브랜드 디자인 시스템을 텍스트 파일 하나로 압축 ✓ 파일 복사 → AI에게 참조 → 브랜드 스타일 UI 완성, 별도 설정 없음 ✓ Google Stitch 포맷 호환 / Claude Code·Cursor·Codex 모두 지원

📍 OMD(oh-my-design) 🔗 https://oh-my-design-lemon.vercel.app/ ✓ 한국 기업 포함하여 대기업 디자인 시스템 58개 보유. ✓ 취향대로 커스텀하여 세팅하면 DESIGN.md 저장 가능

📍 Google Stitch-Skills 🔗 https://github.com/google-labs-code/stitch-skills ✓ DESIGN.md 개념을 처음 만든 Google이 직접 배포하는 공식 스킬 팩 ✓ DESIGN.md 생성부터 React 변환, 앱 화면 영상화까지 한 번에 ✓ npx 한 줄 설치 / design-md·enhance-prompt·react·remotion 4종 스킬 포함

📍 Taste-Skill 🔗 https://github.com/Leonxlnx/taste-skill ✓ AI가 만드는 평범한 UI를 막아주는 디자인 감각 주입 스킬의 원조 (⭐ 5.5k) ✓ DESIGN_VARIANCE·MOTION_INTENSITY·VISUAL_DENSITY 3가지 설정값으로 미세 조정 가능 ✓ taste·redesign·soft·output·minimalist·brutalist 7종 스킬 포함

📍 Supanova-Design-Skill 🔗 https://github.com/uxjoseph/supanova-design-skill ✓ taste-skill을 한국 랜딩페이지 용으로 완전히 재구성한 한국어 특화 버전 ✓ Pretendard 폰트·한국어 CTA 패턴 내장 / React 없는 단일 HTML 출력 ✓ SKILL.md 복사 후 @SKILL.md 참조만 하면 바로 적용

📍 Openai/Figma-Implement-Design 🔗 https://github.com/openai/skills/blob/main/skills/.curated/figma-implement-design/SKILL.md ✓ OpenAI가 직접 만든, Figma URL 하나로 프로덕션 코드까지 1:1 변환되는 공식 스킬 ✓ get_design_context → get_screenshot → 픽셀 퍼펙트 구현 순서로 자동 실행 ✓ Figma MCP 서버 연동 / React·Tailwind 기본 출력

AI 코딩 에이전트를 쓰다 보면 결과물이 다 비슷하게 느껴지는 순간이 오더라고요. 내가 작업하는 용도에 맞는 스킬 파일 하나만 프로젝트에 넣어두면 AI의 디자인 감각이 확 달라집니다 !