최신 SaaS 랜딩 페이지를 위한 구조적 그리드(노출된 그리드/레일 레이아웃) 디자인 시스템입니다. Linear, Vercel, Resend 및 Planetscale에서 영감을 받은 어두운 테마의 마케팅 사이트, 랜딩 페이지 또는 SaaS 제품 페이지를 구축할 때 사용하세요. 눈에 보이는 그리드 미학을 위한 CSS 기초, 섹션 패턴, 구성 요소 레시피 및 반응형 테두리 논리를 제공합니다.
명령줄에서 structural-grid AI 스킬을 개발 환경에 빠르게 설치
출처: nabinkhair42/structural-grid-skill.
You are implementing a Structural Grid (also called "Exposed Grid" or "Rail Layout") design pattern. This is the modern SaaS design pattern used by Linear, Vercel, Resend, Profound, and Planetscale — where the underlying page grid is promoted to a first-class visual element.
Add these to your global CSS. All measurements derive from a single --rail-offset variable.
Always use overflow-x: clip on .page-rails, NEVER overflow-x: hidden. hidden creates a new scroll container which breaks position: sticky on any descendant. clip clips overflow visually without affecting scroll/sticky behavior.
최신 SaaS 랜딩 페이지를 위한 구조적 그리드(노출된 그리드/레일 레이아웃) 디자인 시스템입니다. Linear, Vercel, Resend 및 Planetscale에서 영감을 받은 어두운 테마의 마케팅 사이트, 랜딩 페이지 또는 SaaS 제품 페이지를 구축할 때 사용하세요. 눈에 보이는 그리드 미학을 위한 CSS 기초, 섹션 패턴, 구성 요소 레시피 및 반응형 테두리 논리를 제공합니다. 출처: nabinkhair42/structural-grid-skill.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/nabinkhair42/structural-grid-skill --skill structural-grid최신 SaaS 랜딩 페이지를 위한 구조적 그리드(노출된 그리드/레일 레이아웃) 디자인 시스템입니다. Linear, Vercel, Resend 및 Planetscale에서 영감을 받은 어두운 테마의 마케팅 사이트, 랜딩 페이지 또는 SaaS 제품 페이지를 구축할 때 사용하세요. 눈에 보이는 그리드 미학을 위한 CSS 기초, 섹션 패턴, 구성 요소 레시피 및 반응형 테두리 논리를 제공합니다. 출처: nabinkhair42/structural-grid-skill.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/nabinkhair42/structural-grid-skill --skill structural-grid 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/nabinkhair42/structural-grid-skill