프런트엔드 & UI
Framed Grid Layout
얇은 프레임과 모서리 브래킷으로 정밀한 에디토리얼 레이아웃을 만듭니다.
무엇인가
모든 섹션이 1px 프레임 박스 안에서 공유 컬럼에 딱 맞춰지는 12컬럼 그리드 패턴. L자 모서리 브래킷은 낮은 불투명도의 대각선 질감 위에 배경 레이어로 그려집니다.
Create minimal framed grid layouts with thin visible boundary lines, L-shaped corner brackets, subtle diagonal line texture, and strict section alignment. Use when asked for clean, neutral, precise, structured, editorial
디자인에 왜 중요한가
- 모든 섹션이 테두리 색 하나, 브래킷 크기 하나, 여백 스케일 하나를 공유합니다.
- 모서리 브래킷에 별도 마크업이 필요 없어 구조가 CSS 안에 머뭅니다.
- 질감 레이어를 걷어내도 레이아웃은 여전히 또렷하게 읽힙니다.
다루는 내용
- Use when
- Layout rules
- Base tokens
- Parent grid
- L-shaped corner brackets
- Section spans
설치 방법
Framed Grid Layout
-
저장소를 클론하세요.
git clone https://github.com/MengTo/Skills -
Codex에 스킬 파일 경로를 지정하세요.
agent-skills/web-design/framed-grid-layout/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
기술 문서나 에디토리얼 페이지를 요청하면 부모 그리드를 먼저 받습니다.
-
섹션 폭을 즉흥적으로 잡지 말고 명시적인 span 클래스를 지정하세요.
-
두 브레이크포인트 모두에서 프레임 가장자리가 세로와 가로로 맞아떨어지는지 확인하세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.