프런트엔드 & UI
design-skills · Bento
크림 바탕에 크기가 제각각인 블록 그리드, Inter 타입, 촘촘한 스케일.
무엇인가
콘텐츠를 크기가 다른 그리드 블록으로 배치하는 벤토 박스 레이아웃 가이드라인 스킬. 전면 Inter, 12에서 32까지의 촘촘한 타입 스케일, 크림 바탕 위 피치와 블루 액센트.
Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
디자인에 왜 중요한가
- 블록 크기의 변주가 위계를 담아, 그리드 자체가 우선순위를 매깁니다.
- 12에서 32까지의 촘촘한 타입 스케일이 작은 타일 안에 빽빽한 텍스트를 담아냅니다.
- 크림색 #FFF5E6 면이 두꺼운 테두리 없이도 블록 경계를 또렷하게 지켜 줍니다.
다루는 내용
- Brand
- Style foundations
- Rules: do
- Component rule expectations
- Required output structure
- Quality gates
설치 방법
design-skills · Bento
-
저장소를 클론하세요.
git clone https://github.com/bergside/awesome-design-skills -
Codex에 스킬 파일 경로를 지정하세요.
skills/bento/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
콘텐츠 우선순위에 따라 각 블록의 크기를 정하도록 Codex에 요청하세요.
-
타일을 배치하기 전에 4에서 32까지의 스케일로 여백 토큰을 정의하세요.
-
이 스킬이 엣지 케이스로 꼽는 오버플로와 긴 라벨 처리를 요청하세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.