프런트엔드 & UI
UI-UX Pro Max · UI Styling
shadcn 컴포넌트와 Tailwind 유틸리티로 접근성 있는 인터페이스를 만듭니다.
무엇인가
Radix 프리미티브 위의 shadcn 컴포넌트 레이어, Tailwind 유틸리티 스타일링 레이어, 캔버스 비주얼 디자인 레이어를 합칩니다. 테마, 접근성, 반응형 규칙, 커스터마이징을 위한 레퍼런스 파일이 딸려 있습니다.
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing
디자인에 왜 중요한가
- 다이얼로그와 메뉴가 Radix의 포커스 관리를 물려받아, 접근성을 나중에 덧붙일 필요가 없습니다.
- 테마 컬러가 CSS 변수에 담겨 있어 다크 모드가 일관되게 유지됩니다.
- 모바일 우선 브레이크포인트라 레이아웃이 작게 시작해 위로 쌓아 올라갑니다.
다루는 내용
- Core stack
- Component library guide
- Theme and customization
- Accessibility patterns
- Responsive design
- Visual design system
설치 방법
UI-UX Pro Max · UI Styling
-
저장소를 클론하세요.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Codex에 스킬 파일 경로를 지정하세요.
cli/assets/skills/ui-styling/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
npx shadcn@latest init으로 프레임워크와 테마를 설정하세요.
-
npx shadcn@latest add button card dialog form으로 컴포넌트를 추가하세요.
-
scripts/tailwind_config_gen.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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.