프런트엔드 & UI
imagegen-frontend-web
랜딩 페이지 섹션마다 가로형 레퍼런스 이미지를 하나씩 생성합니다.
무엇인가
웹사이트 디자인 레퍼런스를 위한 이미지 디렉션 스킬. 섹션마다 별도의 가로형 이미지를 생성하며, 팔레트는 하나로 고정하되 히어로 구성은 세트 전체에서 다양하게 가져갑니다.
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections pro
디자인에 왜 중요한가
- 8개 섹션짜리 랜딩 페이지는 압축된 보드 한 장이 아니라 읽기 쉬운 시안 8장으로 나옵니다.
- 히어로 구성이 흔해 빠진 좌측 텍스트, 우측 이미지 기본값을 벗어나 다양해집니다.
- 생성된 프레임 전체에서 팔레트 하나, 타입 스케일 하나, CTA 계열 하나가 유지됩니다.
다루는 내용
- Image count and page slicing
- The combinatorial variation engine
- Hero minimalism rules
- Color and material rules
- Multi-image consistency rule
- Default site packs
설치 방법
imagegen-frontend-web
-
저장소를 클론하세요.
git clone https://github.com/Leonxlnx/taste-skill -
Codex에 스킬 파일 경로를 지정하세요.
skills/imagegen-frontend-web/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
원하는 섹션 수를 말하세요. 말하지 않으면 랜딩 페이지는 기본 6개로 잡힙니다.
-
스킬이 개수를 먼저 알리고, 각 출력물에 섹션 번호로 라벨을 답니다.
-
에디토리얼이나 시네마틱 같은 분위기 단어를 주면 히어로 스케일과 배경을 그쪽으로 이끕니다.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.