# Omd:landing

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

- Repository: https://github.com/kwakseongjae/oh-my-design (552 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add kwakseongjae/oh-my-design --skill omd:landing -g -a claude-code -y`
Codex: `npx skills add kwakseongjae/oh-my-design --skill omd:landing -g -a codex -y`
Cursor: `npx skills add kwakseongjae/oh-my-design --skill omd:landing -g -a cursor -y`
Gemini CLI: `npx skills add kwakseongjae/oh-my-design --skill omd:landing -g -a gemini-cli -y`

## Description

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 같은'.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

<!-- 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에 적는다.

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

```bash
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`)

The rest: https://github.com/kwakseongjae/oh-my-design/blob/HEAD/.claude/skills/omd-landing/SKILL.md