Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
Maximum-craft one-page landing — the wow bar. An agent skill from kwakseongjae/oh-my-design.
Install Omd Aphrodite
$ npx skills add kwakseongjae/oh-my-design --skill omd-aphrodite -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install kwakseongjae/oh-my-design omd-aphrodite --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/omd-aphrodite .claude/skills/omd-aphrodite && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "omd-aphrodite" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-aphrodite into .claude/skills/omd-aphrodite/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-aphrodite", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-aphroditeType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add kwakseongjae/oh-my-design --skill omd-aphrodite -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install kwakseongjae/oh-my-design omd-aphrodite --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/omd-aphrodite .agents/skills/omd-aphrodite && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "omd-aphrodite" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-aphrodite into .agents/skills/omd-aphrodite/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-aphrodite", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add kwakseongjae/oh-my-design --skill omd-aphrodite -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install kwakseongjae/oh-my-design omd-aphrodite --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/omd-aphrodite .cursor/skills/omd-aphrodite && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "omd-aphrodite" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-aphrodite into .cursor/skills/omd-aphrodite/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-aphrodite", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/kwakseongjae/oh-my-design.git --path skills/omd-aphrodite--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add kwakseongjae/oh-my-design --skill omd-aphrodite -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install kwakseongjae/oh-my-design omd-aphrodite --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/omd-aphrodite .gemini/skills/omd-aphrodite && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "omd-aphrodite" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-aphrodite into .gemini/skills/omd-aphrodite/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-aphrodite", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install kwakseongjae/oh-my-design omd-aphroditeInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add kwakseongjae/oh-my-design --skill omd-aphrodite -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/omd-aphrodite .github/skills/omd-aphrodite && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "omd-aphrodite" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-aphrodite into .github/skills/omd-aphrodite/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-aphrodite", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add kwakseongjae/oh-my-design --skill omd-aphrodite -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install kwakseongjae/oh-my-design omd-aphrodite --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/omd-aphrodite .opencode/skills/omd-aphrodite && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "omd-aphrodite" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-aphrodite into .opencode/skills/omd-aphrodite/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-aphrodite", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
omd-aphrodite- GitHub stars
- 533
- Token cost
- ~2.1k tokens
- SKILL.md length
- 1,390 words
- Files
- 1
- Skills in repo
- 18
- Repo updated
- First seen
- Licence
- MIT
At a glance
Maximum-craft one-page landing — the wow bar. An agent skill from kwakseongjae/oh-my-design.
- Works in 7 steps: 채널 확인 (건너뛰지 않는다) → 서체 조달 (LC-47 — 이 단계를 빼면 합격선 못 넘는다) → 컨셉과 스토리보드 → …
- Frontend & Design work in your project
- SKILL.md covers 왜 있나, 합격선 (하나라도 미달이면 미완성 — 스스로 통과 선언…, 0. 채널 확인 (건너뛰지 않는다) and 1. 서체 조달 (LC-47 — 이 단계를 빼면 합격선…, plus 7 more sections
- Calls node
What it does
Omd Aphrodite is an agent skill from kwakseongjae/oh-my-design. Maximum-craft one-page landing — the wow bar. omd:landing 의 구조 위에 마감(서체 조달·그레인·깊이·색보정·스크롤 타임라인)과 최고급 에셋을 얹고, 랜딩 검사 전 항목 통과를 합격선으로 삼는다. Trigger: '와우', '압도적인', '최고급', '쇼케이스용', 'aphrodite', '데모용 랜딩', '이거 자랑할 거야'.
Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design. The repository describes itself as: Give your AI coding agent a design system. One command installs 500+ quality-graded company DESIGN.md references + skills into Claude Code, Codex, Cursor, and OpenCode. Free… The licence is MIT.
When your agent uses it
- Frontend & Design work in your project
Example prompts
- “aphrodite”
- “/omd-aphrodite”
Workflow steps
7 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit c0ec438. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
node
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Omd Aphrodite loads about 2.1k tokens when it runs. Until then it costs about 56 tokens; SKILL.md has 1,390 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from kwakseongjae/oh-my-design at commit c0ec438, republished under its MIT licence (© kwakseongjae). 1,390 words, ~2,113 tokens.
Download SKILL.mdSave it as
.claude/skills/omd-aphrodite/SKILL.md (or your agent's skills folder).- name
- omd-aphrodite
- description
- Maximum-craft one-page landing — the wow bar. omd:landing 의 구조 위에 마감(서체 조달·그레인·깊이·색보정·스크롤 타임라인)과 최고급 에셋을 얹고, 랜딩 검사 전 항목 통과를 합격선으로 삼는다. Trigger: '와우', '압도적인', '최고급', '쇼케이스용', 'aphrodite', '데모용 랜딩', '이거 자랑할 거야'.
- argument-hint
- <브랜드 또는 가상 브랜드 + 톤/업종 + 목적>
- user-invocable
- true
omd:aphrodite — 와우 합격선
이 문서가 설치된 디렉터리를 <omd-aphrodite-skill-root> 로 둔다. 아래 도구와 reference는
모두 그 디렉터리 안에 함께 설치되며, 현재 프로젝트나 oh-my-design 저장소의 경로로 바꾸지 않는다.
이 스킬은 omd:landing 의 대체가 아니라 그 위의 합격선이다. 구조(섹션 리듬·에셋 배치·밀도)는
omd:landing 과 같은 절차를 그대로 쓴다. 다른 것은 통과 조건과 마감·에셋의 등급이다.
일상 랜딩은 omd:landing, 자랑할 한 장은 이 스킬이다.
왜 있나
밀도만 채운 페이지는 여전히 밋밋했다. 2026-09-03 계측에서 우리 최고 산출물은
디스플레이 서체가 OS 기본이었고 그림자·글래스·마스크·블렌드·3D·클립패스·그레인이 전부 0이었다
(docs/reviews/landing-craft-gap-2026-09-03.md). 코덱스 LC-136 은 무엇을 어디에 놓는가만 규정했고
마감 층이 없었다. 그 층이 LC-3747 이고, 이 스킬은 그것을 강제한다.
합격선 (하나라도 미달이면 미완성 — 스스로 통과 선언 금지)
| 검사 | 조건 |
|---|---|
omd check landing | LI-1~40 전 항목 ok. 특히 LI-24 화면 잉크 · LI-25 폴드 미디어 · LI-26 미디어 밀도 · LI-27 디스플레이 서체 · LI-28 깊이 · LI-29 메시/그레인 · LI-30 브라우저 기본값 · LI-31 미디어 색보정 · LI-32 alt 구체성 · LI-33 정착 타이밍 · LI-34 주 미디어 점유율 · LI-35 호버 관문 0 · LI-36 초점비 · LI-37 폴드 ≤5 · LI-38 모션 채널 ≤2 · LI-39 홀드 콘텐츠 · LI-40 여백 덩어리 |
omd check contrast | FAIL 0 · no-JS 숨김 0 |
omd check render | 1440×900 · 390×844 양쪽 PASS |
omd-designer-review | BLOCK 0 — 리뷰어는 검사기 결과를 보기 전에 렌더만 보고 먼저 판단한다(§5) |
| 페르소나 워크스루 3인 | 마우스 데스크탑 · 한 손 엄지 모바일 · 키보드/호버 없음 — 각자 "입력 없이 본 것" 이 섹션마다 있고 관문에 막힌 곳 0 (§5) |
검사를 못 돌리는 상황(브라우저 없음 등)은 통과가 아니라 실패다. 그 사실을 trace.md 에 적는다.
0. 채널 확인 (건너뛰지 않는다)
node scripts/omd-setup-detect.mjs (설치본: omd setup detect) 로 지금 쓸 수 있는 이미지·영상 채널을 확인하고
trace.md 첫 줄에 적는다. 채널이 바뀌면 결과의 등급이 바뀐다 — 나중에 왜 이 품질이 나왔는지 설명하려면 기록이 필요하다.
- 영상 채널이 없으면 생성 영상을 포기하되 모션은 포기하지 않는다. CSS/SVG 로 만든 움직임
(마스크 리빌, 스크롤 연동 변형, SVG 경로 애니메이션, 그레인 셰이더 흉내)이 대안이며,
수상작 상당수가 실제로 이 방식이다. 「영상 없음」을
trace.md에 사유와 함께 남긴다. - 잔액 소진(402)·키 없음은 조용히 건너뛰지 말고 사용자에게 알린다.
1. 서체 조달 (LC-47 — 이 단계를 빼면 합격선 못 넘는다)
omd font inline --list
omd font inline --family fraunces --out /tmp/display.css- 디스플레이 1종 + 본문 1종. 같은 종을 옵티컬 사이즈 축으로 나눠 써도 된다.
- 산출된
@font-face블록을 HTML<style>안에 그대로 넣는다. 렌더 시 외부 요청 0건이 되어야 한다. - 큰 글자에는
font-variation-settings의opsz를 크게, 본문에는 작게 준다 — 이 축이 "제대로 짠 조판"의 신호다. - 라이선스(OFL 계열, 임베딩 허용)를 확인하고
trace.md에 적는다. - 금지:
-apple-system·system-ui·Helvetica·Arial로 디스플레이 헤딩을 쓰는 것.
1.5 라이브러리 정책 — 제로 베이스 금지
"렌더 시 네트워크 요청 0" 은 라이브러리 0 이 아니다. 라이선스가 허용하는 오픈소스는 minified 소스를 <script>/<style> 로
인라인한다. 검증된 조합은 <omd-aphrodite-skill-root>/docs/design-excellence/fx-library/ 에 있다 — 스크롤 안무는 scroll-gsap/(GSAP 3.15 + ScrollTrigger,
114.7KB, 라이선스 lib/LICENSES.md 인용 필수), CSS 효과는 INDEX.md 의 17종(전부 재배포 가능, 데모 콘솔 에러 0).
예산: 인라인 라이브러리 ≤ 120KB, 효과 종류 ≤ 7/페이지. 라이브러리 밖의 효과를 새로 쓰면 같은 구조(README+demo+snippet)로
fx-library 에 편입해 다음 런이 재사용하게 한다.
2. 컨셉과 스토리보드
omd:landing §1~2 를 그대로 따르되, 스토리보드에 개수·크기·마감을 숫자로 적는다.
첫 줄 다이얼(LC-59):
밀도 n/10 · 모션 n/10. 밀도 ≤5 면 아래 밀도 예산보다 상한(초점비·폴드 ≤5·채널 ≤2)이 우선한다 — 바닥 규칙을 "최대로 채운다"로 읽지 않는다.크기 락(LC-51): 섹션마다 주 미디어의 비율(16:9·3:2·2:3)과 뷰포트 점유율(%) 을 적는다. 섹션 중앙값 ≥35%, 풀블리드(≥90%) ≥1, 폴드 주 미디어 ≥45vw 또는 ≥40vh. 여러 장은 공간이 아니라 시간에 쌓는다(동시 미디어 ≤6). 시험: 히어로 이미지를 빼도 첫 화면이 멀쩡하면 이미지가 약한 것이다.
한 화면 한 초점(LC-52): 1등:2등 면적비 ≥2:1, 섹션당 층(스크롤·유휴·호버·진입) ≤2, 동시 모션 채널 ≤2.
무노동(LC-49·50·53): 호버로만 보이는 콘텐츠 0. 자동으로 움직이는 것은 장식 시험 T1~T4(정보 유일성·정적 대체 경로·사용자 제어·무노동) 통과분만. 펼침은 진입 시 자동 1회 + 고정, 열기는 클릭/탭이고 열린 상태는 지속.
밀도 예산(미디어 ≥ 페이지 vh × 1.0 · 폴드 ≥ 3 · 스크롤러 항목 ≥ 8 · 모션 ≥ 1 · 섹션 잉크 ≥ 26%) — 다이얼 ≥6 에서 전량 적용. 폴드 의미 단위는 언제나 ≤5(LC-54), 진입 애니 ≤1.2s·H1/CTA 덮기 금지.
섹션마다 쓸 마감 기법을 LC 번호로 지정 — 어느 섹션에 그레인(LC-38), 어디에 글래스(LC-39), 어디에 비네트(LC-45), 스크롤 타임라인은 어느 리빌에(LC-40), 스프링 이징은 한 순간에만(LC-41).
압도 지점 1개와 그 직전의 호흡 섹션. 피크는 개수가 아니라 규모다(LC-33).
이미지마다 동사 1개(줌스루·회전·스크럽·와이프·가로 이동·컷 연결·기울기·열림·관통·정지). "정지"가 60% 를 넘으면 이미지를 그냥 쓴 페이지다(60점 라운드의 원인). 동사는
fx-library/scroll-gsap/recipes의 레시피 번호로 적는다.액센트 전략 선언: 절제형(액센트는 CTA·진행·선택 상태·면 1회) 또는 전면형 중 하나. 첫 뷰포트 액센트 요소 ≤ 3. 섹션 태그·캡션에 액센트 금지 — 10개 사이트 실측에서 액센트는 CTA 에 산다.
2.5 스토리보드 리뷰 게이트 (빌드 전, 필수)
<omd-aphrodite-skill-root>/docs/design-excellence/storyboard-review.md v2 의 A(색)·B(구도)·C(효과, C9 크기 락·C10 정직한 K 포함)·D(사용자: 입력 없이 보이는 것·터치·키보드·첫 5초 문장·관문 0)·E(자기 표절 시험) 표를 스토리보드에 채워 넣고 판정한다.
FAIL 이 하나라도 있으면 §3·§4 로 가지 않는다. 빌드 뒤 리뷰는 늦다 — 색·구도·효과 예산은 여기서 잡는다.
판정 결과는 런 디렉터리의 storyboard-*.md 끝에 남긴다. 업종 무관: 특정 색·톤이 아니라 역할·빈도·숫자로만 판정한다.
3. 에셋 — 최고급 프롬프트 규격
omd:media 를 쓰되 이 스킬에서는 아래를 필수로 지킨다.
프롬프트 순서: 배경·장면 → 피사체 → 핵심 디테일 → 제약 → 용도.
8k, ultra detailed, masterpiece 류는 쓰지 않는다 — 약한 컨셉을 보정하지 못하고,
구도·조명이 비면 모델이 AI 기본값(과한 대칭·플라스틱 질감·가짜 보케)으로 채운다.
조명·렌즈를 말로 지정한다: 소프트박스/림라이트/렘브란트/골든아워 백라이트 같은 세팅 이름과 85mm·50mm·35mm·24mm 의 성격을 프롬프트에 넣는다. 이것이 "스튜디오에서 찍은 것 같다"와 "AI 그림"을 가른다.
일관성은 스타일 접미사로만 잡는다. 우리 이미지 채널(grok image_gen, Codex $imagegen)에는
시드 파라미터가 없다(조사로 확인). 그래서 한 세트의 모든 프롬프트 끝에 토씨 하나 바꾸지 않은
공통 블록을 붙인다 — 브랜드 팔레트 hex + 조명 성격 + 재질 어휘 + 그레인/필름 표현.
Recraft 키가 있으면 참조 1~10장으로 style_id 를 만들어 쓰는 쪽이 더 강하다.
회피 문구를 넣는다: plastic/waxy texture, perfect symmetry, generic AI aesthetic, oversaturated, fake bokeh. 긍정 지시로 바꿔 적는 편이 더 잘 듣는다 — film grain, off-center framing, imperfect surface.
비율은 슬롯에서 가져온다(omd:media §1). 기본값 16:9 로 뽑아 놓고 잘라 넣지 않는다.
영상(채널이 있을 때): 클립당 카메라 이동 1개만, 피사체 움직임은 최소.
시작·끝 프레임이 거의 같아야 루프 이음새가 안 보인다. 6초 무음 loop muted playsinline,
prefers-reduced-motion 에서는 같은 프레임의 정지 이미지로 대체하고 poster 를 채운다.
Show full SKILL.md (471 more words)Show less
4. 마감 구현 (LC-37~46 레시피)
인라인만 쓴다. 렌더 시 네트워크 요청 금지 — 라이브러리는 §1.5 정책대로 소스를 인라인한다(출처·라이선스를 trace 에).
- 그레인(LC-38): 인라인 SVG
feTurbulence(fractalNoise) 를 data URI 배경으로,opacity: .05~.15+mix-blend-mode: overlay. 넓은 단색·그래디언트 면마다 얹는다. - 메시(LC-46): 반투명
radial-gradient3겹 이상 레이어링. 2-스톱 단일linear-gradient배경 금지. - 글래스(LC-39): 베이스 블러 + 밝은 엣지 블러 2겹, 둥근 모서리는 SVG 마스크. 단일
blur()+border-radius금지. - 비네트(LC-45): 풀블리드 미디어에
radial-gradient(ellipse, transparent 50%, rgba(0,0,0,.7) 100%)수준. - 색보정(LC-43): 모든
img·video에 같은filter: contrast() saturate()프리셋을 공통 클래스로. - 조판(LC-37): 헤딩
text-wrap: balance, 본문text-wrap: pretty. 끝줄 한 단어 금지. - 브라우저 기본값 제거(LC-42):
::selection,:focus-visible, 스크롤바 썸을 브랜드 액센트로. - 스크롤 연동(LC-40):
animation-timeline/view-timeline우선, 미지원 시 opacity 리빌 폴백. - 이징(LC-41): 페이지 지배 duration 하나 유지.
linear()스프링은 히어로 정착이나 CTA 도착 한 곳만. - 커서(LC-44): 미디어 표면에만,
@media (hover: hover)로 터치 기기 비활성, 상태 최대 3개. - 호버 정책(LC-49·50·57·58): 호버는 리프트·밝기 2% 또는 정지/감속까지. in 120–160ms / out 250–450ms(delay ≥200ms). 열림은 클릭/탭으로 고정, Esc/재클릭으로 닫힘.
@media (hover: none)에서는 열린 상태가 기본형. - 유휴 장식(LC-53): 자동 모션은 T1~T4 통과분만 — 반복 샘플, 정적 대체 경로, 호버 정지, reduced-motion 정지.
- 스니펫 토큰 치환:
fx-library스니펫의 반경·간격·duration 기본값은 인라인 전에 DESIGN 토큰으로 바꾼다(r3: 반경 토큰 밖 43건이 스니펫 기본값에서 유입). - 빌드 중 자기 비평: 섹션을 만들 때마다 1440·390 스크린샷을 찍어 보고, 고친 것과 버린 시도를
trace.md에 한 줄씩 남긴다.
5. 검증
omd check render <render.html>
omd check contrast <render.html>
omd check landing <render.html>전부 통과할 때까지 고친다(최대 3회). 미달 항목은 기준을 낮추지 말고 산출을 고친다.
3회에도 못 넘으면 마지막 출력과 시도한 것을 trace.md 에 남기고 그 상태로 제출한다 — 통과한 척하지 않는다.
그다음 omd-designer-review 서브에이전트를 스폰해 BLOCK 0 을 확인한다(입력: render.html 절대경로 + DESIGN.md 경로).
눈 검사 격리: 리뷰어에게 검사기 출력·trace 를 주지 않는다. 렌더만 보고 판정을 먼저 쓰게 하고, 기계 결과는 그 뒤에 붙여 종합한다 — 깨끗한 스캔은 위계·리듬·크기를 증명하지 못한다(r3: LI 전항목 ok·BLOCK 0 인데 60점).
페르소나 워크스루 3인(omd-persona-tester, 지표는 task_success·friction_count 만): 마우스 데스크탑 / 한 손 엄지 모바일(390) / 키보드·호버 없음. 각 페르소나가 섹션마다 "입력 없이 본 것"을 한 줄로 적고, 호버·드래그 없이는 못 본 콘텐츠가 있으면 그 섹션은 미완성이다.
데스크탑과 모바일은 한 라운드에 묶어 검사하고, 라운드 상한(3) 안에서 끝낸다.
6. 쇼케이스 영상 (만들 때만)
omd:showcase 를 쓰되 홍보 영상 문법을 지킨다(2026-09-03 조사).
- 정지 화면으로 시작하지 않는다. 첫 프레임부터 이미 움직이고 있어야 한다.
- 컷 전환보다 카메라 이동으로 시간을 건너뛴다(줌·패닝).
- 중반에 전환점을 둔다 — 문제/평범 → 전환 → 마무리의 3막.
- 조회 대부분이 무음이다. 자막은 장식이 아니라 필수이고, 화면 변화와 동기화한다.
- 나란히 비교(2열·3열)를 쓸 때는 지금 볼 열을 하이라이트·디밍으로 강제한다. 3열 비교의 실증 사례는 확인되지 않았다 — 쓰려면 이 조건을 반드시 건다.
하드 룰
- DESIGN.md 에 없는 브랜드 사실을 발명하지 않는다. 가상 브랜드면 그 사실을 페이지 하단에
Unofficial generated concept류로 명시하고, 실존 브랜드를 흉내 내지 않는다. - 실존 인물 얼굴 생성 금지, 실존 로고 원본 사용 금지(텍스트 워드마크로 대체).
- 가상 통계 수치 금지. 수치가 필요하면 정성 카피로 바꾼다.
- 스톡 사진·이모지 금지. 채널이 없으면 프롬프트 팩과 수동 큐를 남기고 자리에는 브랜드 팔레트의 추상 SVG.
- 검사를 건너뛰거나 문턱을 낮춰 통과시키지 않는다.
- 산출물은 지정된 런 디렉터리 밖에 쓰지 않는다.
© kwakseongjae, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/omd-aphrodite of kwakseongjae/oh-my-design.
Open the folder on GitHubat commit c0ec438
Compare with similar skills
Omd Aphrodite next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Omd Aphrodite this skillkwakseongjae/oh-my-design | 533 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Web Artifacts Builderanthropics/skills | 180k | 40 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| React Doctormakeplane/plane | 61k | 12 repos | ~657 | Automated safety check: Pass | AGPL-3.0 | |
| Impeccablebestofjs/bestofjs | 3.1k | 26 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Web Interface Guidelines Reviewervercel-labs/openreview | 1.7k | 97 repos | ~308 | Automated safety check: Pass | None |
Similar skills
- Official
React Doctor
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
- Official
Web Interface Guidelines Reviewer
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
More from kwakseongjae/oh-my-design
All 18 skills in this repoEgo Browser
kwakseongjae/oh-my-design
When you need a browser, read this Skill by default. An agent skill from kwakseongjae/oh-my-design.
Claude Design
kwakseongjae/oh-my-design
현재 코드베이스(또는 폴더)를 분석해 "디자인 컨텍스트 브리프"(스택/디자인 토큰/컴포넌트/ 라우트/실제 UI 카피/큐레이션된 에셋/레포 링크)를 합성하고, 그걸 Claude Design (claude.ai/design)에 자동으로 전달해 디자인을 생성한 뒤 결과 링크를 터미널에 클릭 가능한 형태로 돌려주는 스킬.
Omd Autopilot
kwakseongjae/oh-my-design
One-prompt autonomous product design and implementation. An agent skill from kwakseongjae/oh-my-design.
Omd Landing
kwakseongjae/oh-my-design
Scroll-native one-page landing that overwhelms — concept, composition, asset placement, and scroll choreography derived from DESIGN.md and the measured landing-craft codex.
Omd Media
kwakseongjae/oh-my-design
Brand-consistent asset sets from DESIGN.md — hero, section illustrations, icon sets, OG image — generated through whichever channel the user actually has (grok build imagegen, Codex $imagegen…
Omd Setup
kwakseongjae/oh-my-design
Guided setup of the tools the design harness can use — image/video generation channels, browser, encoders.
Related
Categories
Questions about Omd Aphrodite
What does Omd Aphrodite do?
Maximum-craft one-page landing — the wow bar. An agent skill from kwakseongjae/oh-my-design. Omd Aphrodite is an agent skill from kwakseongjae/oh-my-design. Maximum-craft one-page landing — the wow bar.
When should I use Omd Aphrodite?
Omd Aphrodite fits situations like: frontend & Design work in your project.
How do I install Omd Aphrodite in Claude Code?
Run `npx skills add kwakseongjae/oh-my-design --skill omd-aphrodite -a claude-code`. Or copy the skill folder (skills/omd-aphrodite in kwakseongjae/oh-my-design) into .claude/skills/omd-aphrodite in your project. Claude Code loads it when a task matches its description.
How do I install Omd Aphrodite in Codex?
Run `npx skills add kwakseongjae/oh-my-design --skill omd-aphrodite -a codex`. Or copy the skill folder (skills/omd-aphrodite in kwakseongjae/oh-my-design) into .agents/skills/omd-aphrodite in your project. Codex loads it when a task matches its description.
Can I use Omd Aphrodite in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add kwakseongjae/oh-my-design --skill omd-aphrodite -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/omd-aphrodite, .gemini/skills/omd-aphrodite, .github/skills/omd-aphrodite and .opencode/skills/omd-aphrodite in your project.
What does Omd Aphrodite need to run?
Going by SKILL.md and its folder, Omd Aphrodite needs the command-line tools its instructions call (node).
Does Omd Aphrodite access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Omd Aphrodite safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Omd Aphrodite use?
Omd Aphrodite is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Omd Aphrodite use?
About 2.1k tokens (SKILL.md is roughly 8.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Omd Aphrodite?
Skills that share tags, products or a category with Omd Aphrodite: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Omd Aphrodite?
kwakseongjae (a GitHub user) maintains it in kwakseongjae/oh-my-design, which has 533 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on October 1, 2026.
Source: kwakseongjae/oh-my-design on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.