프런트엔드 & UI
image-to-code
디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다.
무엇인가
시각적인 웹 작업을 위한 이미지 우선 워크플로. 에이전트가 섹션별 레퍼런스 이미지를 생성하고, 거기서 타이포그래피와 여백, 컬러, 컴포넌트를 추출한 다음 그에 맞춰 사이트를 구현합니다.
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In C
디자인에 왜 중요한가
- 코드가 실제 시각적 레퍼런스를 따르므로 구현이 뻔한 레이아웃으로 흐르지 않습니다.
- 섹션마다 각자 큰 이미지를 받아 텍스트와 여백을 분석할 수 있게 유지합니다.
- 히어로는 헤드라인 세 줄 이내로, 중첩된 컨테이너 스택 없이 유지됩니다.
다루는 내용
- Mandatory image-first rule
- Generate enough images rule
- Deep image analysis requirement
- Hero minimalism rules
- Anti-drift implementation rule
- Anti-AI-slop rules
설치 방법
image-to-code
-
저장소를 클론하세요.
git clone https://github.com/Leonxlnx/taste-skill -
Codex에 스킬 파일 경로를 지정하세요.
skills/image-to-code-skill/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
섹션 수를 말하면, Codex에서는 스킬이 섹션당 이미지를 하나씩 생성합니다.
-
버튼이나 타입 디테일이 읽히지 않으면 더 가까운 디테일 렌더를 요청하세요.
-
구현 파일을 쓰기 전에 명료성 점검을 먼저 실행하게 하세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
codex-design 목록에서 더 보기 ↗다른 Codex 디자인 플러그인
프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다. 
디자인 시스템 무엇을 하나 Stitch Design Taste Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-mobile 프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-web 랜딩 페이지 섹션마다 가로형 레퍼런스 이미지를 하나씩 생성합니다. 다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 Codex 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.