디자인 시스템
Agency Grid Layout Minimal
큼직한 헤드라인과 자잘한 대문자 라벨을 갖춘 에디토리얼 멀티컬럼 그리드.
무엇인가
에이전시 사이트를 위한 레이아웃 방향성. 넓은 그리드 셸, 큼직한 디스플레이 헤드라인, 옆 컬럼의 작은 대문자 메타데이터, 건축적인 이미지 블록.
Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.
디자인에 왜 중요한가
- 엄격한 컬럼 배치가 모든 요소의 위치를 의도적으로 읽히게 합니다.
- 디스플레이 헤드라인과 자잘한 메타데이터 사이의 크기 대비가 위계를 짊어집니다.
- 여백을 채우지 않고 남겨 두어 페이지를 에디토리얼하게 유지합니다.
다루는 내용
- Scope
- Visual target
- Implementation guidance
- Recommended patterns
- Tuning knobs
- Avoid
설치 방법
Agency Grid Layout Minimal
-
저장소를 클론하세요.
git clone https://github.com/MengTo/Skills -
Codex에 스킬 파일 경로를 지정하세요.
agent-skills/web-design/agency-grid-layout-minimal/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
먼저 컬럼 구분이 눈에 보이는 넓은 max-width 셸을 잡으세요.
-
히어로 헤드라인을 대부분의 컬럼에 걸쳐 앉히고, 보조 카피는 옆 컬럼에 두세요.
-
서비스 행을 자잘한 메타데이터 라벨이 붙은 멀티컬럼 목록으로 만드세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.