프런트엔드 & UI
UI-UX Pro Max · Slides
Chart.js와 레이아웃 패턴으로 HTML 프레젠테이션 덱을 만듭니다.
무엇인가
전략적인 HTML 프레젠테이션을 위한 작은 분배 스킬. 서브커맨드를 해석한 뒤 레이아웃 패턴, HTML 템플릿, 카피라이팅 공식, 슬라이드 전략을 담은 레퍼런스 파일을 불러옵니다.
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
디자인에 왜 중요한가
- 슬라이드가 HTML이라 타입과 여백이 실제 디자인 토큰을 따릅니다.
- Chart.js가 데이터 슬라이드를 맡아, 숫자가 붙여 넣은 이미지가 아니라 살아 있는 상태로 남습니다.
- 레이아웃 패턴을 정해진 세트에서 골라, 덱의 시각적 일관성을 유지합니다.
다루는 내용
- When to use
- Subcommands
- References
- Routing
설치 방법
UI-UX Pro Max · Slides
-
저장소를 클론하세요.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Codex에 스킬 파일 경로를 지정하세요.
cli/assets/skills/slides/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
create 서브커맨드에 주제와 슬라이드 수를 붙여 호출하세요.
-
references/create.md를 불러와 그 제작 워크플로를 따릅니다.
-
레퍼런스 파일에서 레이아웃 패턴과 카피라이팅 공식을 끌어옵니다.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.