프런트엔드 & UI
UI-UX Pro Max · Banner Design
치수에 맞춘 배너를 HTML로 디자인한 뒤 PNG로 내보냅니다.
무엇인가
다섯 단계짜리 배너 워크플로. 요구사항 수집, 아트 디렉션 리서치, 생성한 비주얼로 HTML과 CSS 배너 제작, 플랫폼 픽셀에 정확히 맞춘 스크린샷, 그리고 반복을 위한 시안 제시까지.
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, Linked
디자인에 왜 중요한가
- 모든 배너가 플랫폼 픽셀에 정확히 맞춰 내보내지므로 잘리거나 크기가 뭉개지지 않습니다.
- 생성한 비주얼은 텍스트 없이 렌더링되어, 헤드라인은 또렷한 HTML로 남습니다.
- 요청마다 세 가지 아트 디렉션을 내놓아, 정하기 전에 비교할 수 있습니다.
다루는 내용
- Workflow
- Banner size quick reference
- Art direction styles
- Design rules
- Prerequisites
설치 방법
UI-UX Pro Max · Banner Design
-
저장소를 클론하세요.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Codex에 스킬 파일 경로를 지정하세요.
cli/assets/skills/banner-design/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
목적, 플랫폼, 콘텐츠, 브랜드, 스타일, 수량 질문에 답하세요.
-
아트 디렉션마다 세이프 존을 적용한 HTML 배너를 하나씩 만듭니다.
-
각 배너를 지정된 너비와 높이로 스크린샷하고, 용량이 넘치면 압축합니다.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.