Skills

Omd:landing

Scroll-native one-page landing that overwhelms, concept, composition, asset placement...

Install

npx skills add kwakseongjae/oh-my-design --skill omd:landing -g -a claude-code -y
Category
Design
Updated
3d ago
License
MIT
Context cost
Mediumabout 2,260 tokens
Runs scripts
No, instructions only

What it does

Scroll-native one-page landing that overwhelms, concept, composition, asset placement, and scroll choreography derived from DESIGN.md and the measured landing-craft codex. Trigger: '랜딩 페이지', '원페이지', 'landing page', 'one-pager', 'hero to footer', '스크롤 랜딩', 'affinity.studio 같은'.

<!-- omd:installed-skill, managed by `omd install-skills`. Do not edit; rerun the command to refresh. -->

omd:landing, 압도적 원페이지

한 페이지가 스크롤로 쌓이며 방문자를 압도하게 만든다. 카드 그리드를 늘어놓는 것이 아니라 하나의 시각 컨셉이 히어로에서 태어나 섹션마다 다른 구도로 변주되다가 CTA에서 닫힌다. 브랜드 근거는 프로젝트 DESIGN.md, 구도 관측은 랜딩 크래프트 코덱스(규칙 ID LC-n), 제품 행동과 로컬 결정의 권한은 브리프에서 읽는다. 코덱스 위치, 레포: docs/design-excellence/landing-craft-codex.md · 설치본: node_modules/oh-my-design-cli/docs/design-excellence/landing-craft-codex.md (둘 다 없으면 node -p "require('path').dirname(require.resolve('oh-my-design-cli/package.json'))"로 패키지 루트를 찾아 그 아래 docs/design-excellence/를 읽는다). 둘 다 읽지 않았으면 시작하지 않는다.

입력

  1. DESIGN.md 전문(Core v2면 §Scope·Foundations·Components·Content·Motion 앵커, legacy면 전 절). 토큰은 여기 있는 것만 쓴다, 발명 금지. .omd/preferences.md의 pending은 DESIGN.md를 덮는다.
  2. 브리프 한 줄 이상: 방문자가 느껴야 할 것 + 해야 할 행동. 없으면 한 배치의 질문(최대 5개)으로 받는다. 무인 모드(unattended)면 각 질문의 첫 선택지를 고르고 trace.md에 autoSelected로 남긴다.
  3. 코덱스 landing-craft-codex.md, 규칙 표를 그대로 읽고, 이 런에서 적용할 규칙 ID를 골라 storyboard에 적는다.

런 디렉터리 (먼저 만든다)

SLUG=$(printf '%s' "<brand-or-brief>" | tr '[:upper:] ' '[:lower:]-' | tr -cd 'a-z0-9-' | cut -c1-40)
RUN=.omd/runs/landing-$SLUG-$(date +%Y%m%d-%H%M)
mkdir -p "$RUN/assets" && printf '%s\n' "<브리프 원문 그대로>" > "$RUN/task.md"

<run> = 위 $RUN. 산출은 전부 이 안에만 쓴다(omd-harness와 같은 관례, .omd/runs/INDEX.md에 한 줄 append).

산출 (run 디렉터리 안에만)

<run>/
  concept.md        아트디렉터 산출, 컨셉 한 문장, 무드, 팔레트 사용법, 에셋 방향, 금지 목록
  storyboard.md     섹션 표: 순서·목적·뷰포트 높이·구도(LC-n)·에셋 계획(프롬프트)·스크롤 연출·카피 골격
  assets/           생성 이미지(omd:media 채널) + 인라인 SVG 원본
  render.html       단독 파일(외부 요청 0), 1440·390 대응, IntersectionObserver 리빌, pinned ≤1, reduced-motion
  system.md         이 페이지의 디자인 시스템 설명(토큰 인용 경로 포함)
  loop-trace.json   자평 회차별 결함 수(render-integrity·landing-integrity·designer-review), autoSelected
  trace.md          이미지 프롬프트 원문, 채널, 비용, sha256, 재시도

절차

1. 컨셉 (에이전트 omd-art-director)

Read the whole SKILL.md on GitHub

More in Design