Communitygithub.com

brainzcode/premium-landing

완전한 프리미엄 랜딩 페이지를 제작합니다. 참조 스크린샷/URL을 복제하거나 텍스트 브리프를 기반으로 HTML, React, Next.js, Astro로 디자인합니다. 랜딩 페이지, 마케팅 페이지, 원페이지 사이트를 빌드, 디자인, 복제 또는 클론할 때 사용합니다.

premium-landing란 무엇인가요?

이 스킬은 개발자가 프리미엄 품질의 랜딩 페이지를 빠르게 제작할 수 있도록 지원합니다. 사용자가 제공한 스크린샷, PDF, URL 또는 간결한 브리프를 기반으로 '참조 모드' 또는 '브리프 모드' 중 하나를 선택하여 작업합니다. 이 스킬의 핵심은 단순한 코드 생성이 아닌, 320px에서 1920px까지 모든 너비에서 레이아웃이 깨지지 않고, 디자인 토큰이 일관되며, 모든 요소가 의도적으로 배치된 완성도 높은 페이지를 만드는 데 있습니다. HTML, React, Next.js, Astro 등 다양한 스택을 지원하며, 내부 참조 문서(house-rules, traps, design-system 등)를 통해 반복되는 함정(그리드, 마키, SVG 아이콘 등)을 피하고, 자동화된 스크린샷 검증 스크립트로 실제 너비에서의 오버플로우, 히어로 핏, 모션 축소 등을 확인합니다. 또한 lenis 부드러운 스크롤, 프리미엄 모바일 메뉴, 소셜 공유 파비콘 등 마무리 작업을 통해 페이지를 완성합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/brainzcode/premium-landing/tree/HEAD/plugins/premium-landing/skills/landing-page
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

프리미엄 랜딩 페이지

랜딩 페이지는 세 가지 검사를 통과해야 완성됩니다: 참조 또는 브리프와 일치하고, 320에서 1920까지 모든 너비에서 문제없이 작동하며, 모든 요소가 우연이 아니어야 합니다. 대부분의 작업은 세 번째 검사에 집중됩니다.

먼저 모드 결정

참조 모드 — 사용자가 스크린샷, PDF, URL 또는 "이것을 복제해 주세요"를 제공했습니다. 정확성이 목표이며 "비슷하면 됐다"는 실패입니다. CSS를 작성하기 전에 참조를 수치적으로 측정하세요. reference-replication을 로드하세요.

브리프 모드 — 사용자가 그림 없이 비즈니스, 대상 고객 또는 느낌을 설명했습니다. 구성을 직접 선택해야 하며, 기본 규칙과 섹션 라이브러리가 품질 기준을 설정합니다.

두 모드가 모두 존재하면, 참조가 적용되는 부분은 참조를 따르고 브리프는 나머지 부분을 채웁니다. 모드가 명확하지 않으면 질문하세요. 잘못된 모드로 제작된 랜딩 페이지는 시간 낭비입니다.

빌드에 영향을 미치는 것만 질문

지나치게 묻지 마세요. 실제로 출력을 변경하는 네 가지 사항은 다음과 같습니다.

  1. 스택 — HTML / React / Next / Astro. templates/<stack>/에서 스캐폴딩합니다.
  2. 브랜드 기본 정보 — 이름과 팔레트 또는 "참조에서 가져오세요".
  3. 로케일 — 통화, 날짜 형식, 영국식 대 미국식 철자를 결정합니다. 한 번 질문하고 일관성을 유지하세요.
  4. 섹션 — 참조나 명백한 페이지 유형이 섹션을 암시하지 않는 경우에만 질문합니다.

다른 모든 것은 합리적인 기본값이 있습니다. 그것을 사용하고 무엇을 가정했는지 말하세요.

빌드 순서

순서대로 작업하지 않으면 재작업이 발생합니다. 히어로의 높이가 폴드 위의 모든 것을 제한하고 디자인 토큰이 모든 섹션을 제한하기 때문입니다.

  1. 토큰 — 표면, 잉크, 선, 강조, 반경, 이징, 하나의 유동적인 타입 스케일. references/design-system.md.
  2. 히어로 — 모든 빌드에서 가장 자주 수정되는 요소입니다. 100svh, vh 단위의 리듬. references/house-rules.md.
  3. 섹션, 참조 순서대로. references/sections.md. 사진이 필요한 슬롯: 지금 출처를 찾고, 회색 상자를 남기지 마세요 — ../stock-imagery/SKILL.md.
  4. 푸터, 그런 다음 아래 마무리 순서.
  5. 검증. 선택 사항이 아닙니다 — 아래 참조.

함정

그리드, 마키, SVG 아이콘 또는 전체 너비 이미지 코드를 작성하기 전에 references/traps.md를 읽으세요. 그 안에는 여섯 가지 조용한 실패 사례가 있습니다: 유효한 CSS, 오류 없음, 다른 곳에서 잘못된 레이아웃. 처음에는 몇 시간이 걸리지만 참조를 열어두면 몇 분 만에 해결됩니다.

검증은 빌드의 일부입니다

실제 너비에서 스크린샷이 촬영되지 않은 랜딩 페이지는 완성된 것이 아닙니다. 번들된 검증 도구를 실행하세요:

scripts/verify.sh <url> --sweep          # 오버플로 320→1920 + 히어로 핏
scripts/verify.sh <url> --shot 390x844   # 단일 뷰포트

이 도구는 모든 모바일 스크린샷을 조용히 위조하는 macOS 500px 창 제한을 처리합니다. 세부 정보 및 수동 대체 방법: references/verification.md.

세 가지 검사가 통과되어야 합니다:

  • 수평 오버플로 없음 320에서 1920 사이의 모든 너비에서.
  • 히어로가 한 화면에 맞음 390×844, 414×896 및 1600×900에서, 또는 의도적으로 성장.
  • 모션 축소 모든 섹션이 여전히 렌더링됨 — 애니메이션 중간에 멈춘 요소 없음.

마무리 순서

모든 실제 빌드에서 요청됩니다. 선택 사항이 아닌 완료의 정의입니다:

  1. lenis-smooth-scroll
  2. premium-mobile-menu
  3. social-share-favicons
  4. build-credit
  5. 페이지 자체에 대한 README.md — 섹션, 토큰, 중단점, 배포 단계 — 페이지를 만든 도구에 대한 것이 아님
  6. .gitignore; AI 공동 작성자 줄이 없는 커밋 메시지(요청하지 않는 한)
  7. 배포 참고 사항 (GitHub Pages는 경로가 _로 시작하는 경우 .nojekyll 필요)

여기서 "프리미엄"이 실제로 의미하는 것

그라디언트와 유리가 아닙니다. 이는: 중단점에서 점프하지 않고 유동적으로 크기가 조정되는 타이포그래피; 변형과 불투명도에만 영향을 미치는 모션; 자신이 위치한 축을 기준으로 측정된 간격; 죽은 밴드 없음; 데스크톱 레이아웃에서 상속받지 않고 설계된 모바일 레이아웃입니다. 이 모든 것은 확인 가능하기 때문에 표준입니다.

참조

파일읽을 시기
references/house-rules.md항상 — 모든 빌드에서 반복되는 수정 사항
references/traps.md그리드, 마키, SVG 아이콘, 전체 너비 이미지 전에
references/design-system.md토큰 및 타입 스케일 설정 시
references/sections.md히어로, 마키, 아코디언, 카드 레일, 푸터 구축 시
references/verification.md검증 시 또는 스크린샷이 잘못 보일 때
../reference-replication/SKILL.md참조 이미지 또는 URL이 제공된 경우
../stock-imagery/SKILL.md페이지에 사진이 필요하지만 제공되지 않은 경우

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

brainzcode/premium-landing

Add a studio or agency build credit to a website footer — "Site by <Studio>" linking to the studio's site. Use when finishing or shipping a site, adding a footer, or when asked for an agency credit, build credit, designed-by line, or attribution. Covers wording, placement opposite the client's copyright, markup for each stack, styling from the host site's tokens, and the sitewide-footer-link SEO footprint when the same credit runs across many client sites.

brainzcode/premium-landing

Add Lenis smooth scrolling to a site correctly — setup, anchor offsets for sticky headers, scroll locking for modals and menus, reduced-motion handling. Use when asked for smooth scroll, Lenis, momentum/eased scrolling, or when smooth scroll broke a sticky header, a modal lock, or anchor links. Includes the sticky-position trap that only appears at non-zero scroll.

brainzcode/premium-landing

Build true Apple-style liquid glass in the browser — real refraction via SVG displacement maps, chromatic dispersion, specular edges. Use when asked for liquid glass, glassmorphism, frosted/glass cards, glass navbars, or when a blur-based "glass" effect looks flat. Includes the performance trap that makes backdrop-filter stutter on scroll and the contrast trap that makes text unreadable on glass.

brainzcode/premium-landing

Build a premium mobile nav — a hamburger button that morphs into a close X, a full-screen overlay panel with staggered link reveal, scroll lock, focus trap, and reduced-motion handling. Use when asked for a mobile menu, hamburger/burger button, nav drawer, off-canvas menu, or when a menu loses scroll position, still scrolls behind on iOS, leaks Tab focus to the page underneath, or the close button stops responding. Includes the z-index trap that swallows the close button and the iOS rubber-band trap.

brainzcode/premium-landing

Rebuild a design accurately from a supplied reference — a screenshot, PDF page, mockup or live URL — by measuring it numerically instead of eyeballing it. Use when asked to replicate, clone, match or rebuild a design "exactly", "1 to 1" or "with no mistakes", or when a build drifts from its reference. Covers extracting the true content box from a padded screenshot, deriving element positions as percentages, solving object-fit framing, and knowing when a reference cannot be matched.

brainzcode/premium-landing

Ship link previews and favicons that actually work - Open Graph and Twitter card tags, a correctly framed 1200x630 share image, and a full favicon set (SVG, ICO, apple-touch, maskable manifest icons). Use when asked for social sharing, OG image, open graph, twitter card, link preview, share image, favicon, app icon, apple touch icon, or web manifest. Also use when a shared link previews blank, shows the wrong image, or a favicon will not appear. Includes the absolute-URL trap that silently blanks every preview and the font trap that breaks SVG favicons on other machines.

brainzcode/premium-landing

Source free, licence-clear photography for a site from Unsplash — searching by mood rather than noun, sizing and cropping for the slot, honouring the API's hotlink and download-tracking requirements, and writing real alt text. Use when a page needs a hero image, section photography, avatars or card art and none was supplied; when placeholder greys need replacing with real imagery; or when asked to find, pick or swap photos for a design.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community