디자인 시스템
UI-UX Pro Max · Design System
3계층 디자인 토큰, 컴포넌트 스펙, 토큰을 지키는 슬라이드 생성.
무엇인가
프리미티브, 시맨틱, 컴포넌트 토큰 계층을 CSS 변수로 다루고, 컴포넌트 상태 스펙과 같은 토큰으로 덱을 만드는 슬라이드 생성기까지 아우르는 디자인 시스템 스킬.
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design t
디자인에 왜 중요한가
- 시맨틱 토큰 계층 덕분에 라이트와 다크 전환이 재작성이 아니라 설정 변경으로 끝납니다.
- 컴포넌트 스펙이 기본, 호버, 액티브, 비활성 상태를 표로 정리해 핸드오프에 모호함을 남기지 않습니다.
- 검증기가 하드코딩된 hex 값을 짚어내, 컴포넌트와 슬라이드를 토큰 체계 위에 붙들어 둡니다.
다루는 내용
- Token architecture
- Component spec pattern
- Scripts
- Slide system
- Token compliance
- Best practices
설치 방법
UI-UX Pro Max · Design System
-
저장소를 클론하세요.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Codex에 스킬 파일 경로를 지정하세요.
cli/assets/skills/design-system/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
JSON 토큰 설정에 generate-tokens.cjs를 돌려 CSS 변수 파일을 뽑으세요.
-
Codex에 컴포넌트 스펙을 요청한 뒤, src/에 validate-tokens.cjs를 돌려 날것의 값을 잡아내세요.
-
search-slides.py에 위치와 맥락 플래그를 주어 덱에 쓸 레이아웃을 고르세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
codex-design 목록에서 더 보기 ↗다른 Codex 디자인 플러그인
프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다. 
디자인 시스템 무엇을 하나 Stitch Design Taste Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다. 
프런트엔드 & UI 무엇을 하나 image-to-code 디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-mobile 프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다. 다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 Codex 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.