프런트엔드 & UI
imagegen-frontend-mobile
프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다.
무엇인가
iOS, Android, 크로스플랫폼 제품을 아우르는 모바일 화면 콘셉트와 플로우를 위한 이미지 전용 스킬. 화면을 깔끔한 폰 목업 안에 담아 보여 줄 뿐, 코드는 절대 쓰지 않습니다.
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, s
디자인에 왜 중요한가
- 화면이 폰 안의 웹사이트처럼 보이는 대신 세이프 에어리어와 시스템 영역을 지킵니다.
- 고정된 디자인 바이블이 모든 화면에서 팔레트와 타입, 아이콘을 일관되게 유지합니다.
- 여러 화면 세트가 서로 무관한 일회성 목업이 아니라 그럴듯한 플로우를 이룹니다.
다루는 내용
- Platform mode rule
- Generate enough screens rule
- App design bible rule
- Safe area and system region rule
- Device mockup frame rule
- Text size and readability rule
설치 방법
imagegen-frontend-mobile
-
저장소를 클론하세요.
git clone https://github.com/Leonxlnx/taste-skill -
Codex에 스킬 파일 경로를 지정하세요.
skills/imagegen-frontend-mobile/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
앱 카테고리와 화면 수를 말하면, 화면마다 각자의 이미지가 됩니다.
-
스킬은 먼저 플랫폼 모드부터 정합니다. iOS, Android, 또는 중립적인 크로스플랫폼.
-
텍스트가 작거나 프레이밍이 고르지 않은 화면은 다시 생성해 달라고 요청하세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
codex-design 목록에서 더 보기 ↗다른 Codex 디자인 플러그인
프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다. 
디자인 시스템 무엇을 하나 Stitch Design Taste Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다. 
프런트엔드 & UI 무엇을 하나 image-to-code 디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-web 랜딩 페이지 섹션마다 가로형 레퍼런스 이미지를 하나씩 생성합니다. 다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 Codex 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.