UI 디자인에 좋은 Codex 스킬 추천.

기본 상태의 Codex는 무난하지만 어디서 본 듯한 화면을 디자인합니다. 디자인 스킬은 여기에 감각, 즉 타이포그래피, 간격, 레이아웃에 대한 관점을 더해 줍니다. 알아 둘 만한 스킬과 플러그인, 각각 무엇에 강한지, 어떻게 설치하는지 정리했습니다.

2026년 11월 6일 업데이트 · 7분 분량

디자인 스킬이 실제로 하는 일

스킬은 작업에 필요할 때 Codex가 불러오는 지침 묶음입니다. 디자인 스킬은 보통 어떤 폰트와 타입 스케일을 쓸지, 여백을 얼마나 둘지, 템플릿처럼 보여서 피해야 할 레이아웃 패턴은 무엇인지, 결과를 어떻게 검토할지를 Codex에 알려 줍니다. 모델은 그대로지만, 모델이 참고하는 브리프가 훨씬 좋아집니다.

아래 스킬 대부분은 Codex 플러그인으로 배포되므로 한 번 설치하면 한 세트가 추가됩니다. 설치 후 새 Codex 세션을 시작해야 스킬이 로드되며, $ 뒤에 이름을 붙여 호출하거나 요청 내용이 맞으면 Codex가 알아서 고르게 할 수 있습니다.

1. Taste Skill(design-taste-frontend)

추천 용도: AI가 만든 티가 나면 안 되는 랜딩 페이지, 마케팅 사이트, 리디자인.

Taste Skill은 Leonxlnx가 만든 MIT 라이선스 오픈소스 스킬로, GitHub에서 가장 인기 있는 디자인 스킬 중 하나입니다. 대표 스킬인 design-taste-frontend는 클라이언트 브리프를 바탕으로 사전 조사된 20가지 아트 디렉션 중 하나를 고르고, 출처 표기가 된 오픈 라이선스 사진을 찾고, 브라우저에서 세 가지 너비로 결과를 확인합니다. 2.5 버전(2026년 11월)은 회사 웹사이트와 마케팅 웹사이트에 집중하며, 앱 화면은 더 이상 다루지 않습니다. Node.js 22 이상과 Chrome, Edge, Chromium 중 하나가 필요합니다.

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

2. 스타일 스킬: 소프트, 미니멀, 브루탈리즘

추천 용도: 원하는 스타일이 이미 정해져 있을 때.

같은 제작자가 이전에 만든 단일 스타일 스킬들은 별도 컬렉션으로 관리됩니다. 각 스킬은 이름으로 호출할 때만 실행됩니다.

high-end-visual-design: 부드러운 대비, 넉넉한 간격, 스프링 기반 모션을 갖춘 차분하고 세련된 UI.
minimalist-ui: 절제된 팔레트와 깔끔한 구조의 에디토리얼 제품 UI.
industrial-brutalist-ui: 강렬한 스위스 타이포그래피, 날카로운 대비, 실험적인 레이아웃.
gpt-taste: GPT 모델과 Codex에 맞춰 조정한 더 엄격한 버전으로, 레이아웃 변화가 더 많고 모션이 더 대담합니다.

codex plugin marketplace add Leonxlnx/taste-skill-classics
codex plugin add taste-skill-classics@taste-skill-classics

3. 이미지 우선 스킬

추천 용도: 코드를 쓰기 전에 비주얼 방향을 그림으로 탐색할 때.

이 스킬들은 에이전트가 디자인 이미지를 먼저 생성하게 합니다. imagegen-frontend-web은 랜딩 페이지 섹션마다 이미지를 한 장씩 만들고, imagegen-frontend-mobile은 일관된 앱 화면 세트를 만들며, image-to-code는 이미지를 생성해 분석한 뒤 그에 맞춰 페이지를 구현합니다. 이미지를 생성할 수 있는 에이전트가 필요합니다.

codex plugin marketplace add Leonxlnx/imagegen-skills
codex plugin add imagegen-skills@imagegen-skills

4. Anthropic의 frontend-design 스킬

추천 용도: 의도가 담긴 디자인 쪽으로 가볍게 방향을 잡아 주는 범용 스킬이 필요할 때.

Anthropic은 공개 저장소 anthropics/skills에 Apache 2.0 라이선스로 frontend-design을 공개하고 있습니다. 미적 방향과 타이포그래피, 그리고 템플릿 기본값처럼 보이지 않는 선택에 대한 가이드를 담고 있습니다. Claude용으로 작성되었지만 같은 SKILL.md 형식을 쓰므로, frontend-design 폴더를 ~/.agents/skills에 복사하면 Codex에서도 쓸 수 있습니다.

5. Figma 플러그인

추천 용도: 디자인과 디자인 시스템을 Figma에서 관리하는 팀.

OpenAI 플러그인 카탈로그에는 Code to Canvas, Code Connect, 디자인 시스템 규칙을 지원하는 Figma 플러그인이 있습니다. 플러그인 디렉터리에서 찾거나 Codex CLI에서 /plugins를 실행하세요.

Codex Design의 역할

저희가 만든 플러그인 Codex Design은 스타일 스킬이 아닙니다. Codex에 캔버스를 제공해 화면과 레퍼런스 이미지를 나란히 놓고, 폰트, 색상, 간격을 시각적으로 수정할 수 있게 합니다. 위의 어떤 스킬과도 함께 쓸 수 있습니다. 감각을 더하는 스킬로 디자인을 잡고, 그 스킬이 만든 여러 방향을 캔버스에서 비교하세요. 프롬프트 하나로 Codex Design을 설치할 수 있습니다.

우리 디자인 시스템용 스킬 만들기

최고의 디자인 스킬은 직접 만든 스킬인 경우가 많습니다. 제품에 팔레트, 폰트, 컴포넌트가 있다면 한 번 정리해 두세요. 그러면 Codex가 디자인하는 모든 화면이 이를 따릅니다. 저장소에 .agents/skills/acme-ui/SKILL.md로 저장하세요.

---
name: acme-ui
description: Acme’s visual design rules. Use when designing or reviewing any Acme screen, page, or component.
---

# Acme UI

## Foundations
- Colors: ink #1F2430, accent #3B5BDB, surface #F7F8FA. No other hues.
- Type: Inter. Body 16px/1.5, headings 600 weight, never more than 3 sizes per screen.
- Spacing: multiples of 8px. Cards use 24px padding and 12px radius.

## Components
- Primary buttons are solid accent, one per screen.
- Forms put labels above fields, never placeholders as labels.

## Before you finish
- Check contrast meets WCAG AA.
- Check the layout at 390px and 1440px wide.

description은 구체적으로 쓰세요. Codex는 description을 보고 스킬을 언제 쓸지 판단하므로, “Design rules”보다 “Use when designing or reviewing any Acme screen”처럼 쓰는 편이 잘 작동합니다.

팁

스타일 스킬은 한 번에 하나만 쓰세요. 미니멀 스킬과 브루탈리즘 스킬은 서로 충돌하는 지시를 내립니다.
중요할 때는 스킬을 이름으로 호출하세요. Codex가 알아서 고르길 기다리지 말고 $minimalist-ui처럼 직접 부르세요.
설치하기 전에 스킬 내용을 읽어 보세요. 스킬은 에이전트의 권한으로 실행되는 지침이고, 플러그인은 도구와 훅을 추가할 수 있습니다.