프런트엔드 & UI
Container Lines
콘텐츠 컨테이너 가장자리에 은은한 세로 가이드 선을 긋습니다.
무엇인가
콘텐츠 컨테이너 양쪽 가장자리에 1px 세로 선을 더하고, 선택적으로 작은 모서리 사각형을 얹는 CSS 패턴. 가이드는 콘텐츠 뒤에 앉아 포인터 이벤트를 무시합니다.
Add vertical container-size guide lines with mini corner squares for precise, structured web layouts. Use when asked for container lines, measured layout guides, vertical boundary lines, editorial grid markers, or small
디자인에 왜 중요한가
- 컨테이너 폭을 드러내, 헐거운 히어로 섹션에 구조적 긴장감을 줍니다.
- 가이드가 컨테이너의 max-width와 패딩을 공유하므로 절대 어긋나지 않습니다.
- 포인터 이벤트가 꺼져 있어 선이 클릭이나 선택을 막지 않습니다.
다루는 내용
- Use when
- Rules
- Base tokens
- Page container lines
- Corner squares
- Minimal section wrapper
설치 방법
Container Lines
-
저장소를 클론하세요.
git clone https://github.com/MengTo/Skills -
Codex에 스킬 파일 경로를 지정하세요.
agent-skills/web-design/container-lines/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
레이아웃 셸에 container-lines 클래스를 추가하세요.
-
모서리 사각형은 실제 컨테이너나 섹션 모서리에만 두세요.
-
라이트와 다크 배경 모두에서 선이 은은하게 유지되는지 확인하세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.