# Omd Asset Fetch

사용자 product UI 생성 시 placeholder 자리를 generic SVG가 아닌 **실제 free-license CDN 자산**으로 채운다.

- 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-asset-fetch -g -a claude-code -y`
Codex: `npx skills add kwakseongjae/oh-my-design --skill omd-asset-fetch -g -a codex -y`
Cursor: `npx skills add kwakseongjae/oh-my-design --skill omd-asset-fetch -g -a cursor -y`
Gemini CLI: `npx skills add kwakseongjae/oh-my-design --skill omd-asset-fetch -g -a gemini-cli -y`

## Description

사용자 product UI 생성 시 placeholder 자리를 generic SVG가 아닌 **실제 free-license CDN 자산**으로 채운다. 로고·일러스트·아이콘·사진·폰트·패턴 카탈로그를 verified URL만으로 운영. '에셋 가져와줘', '플레이스홀더 진짜 이미지로', '로고 자리 채워줘', 'unsplash에서 사진 가져와' 류 요청에 트리거. omd:apply / omd:harness 안에서 자동 호출됨.

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

# omd:asset-fetch, Free-license Asset Catalog

## 왜 이 스킬

"초안 같음" 결과물의 90%는 **placeholder가 너무 generic**이라서, `[YOUR LOGO]` 점선 박스, organic blob SVG, "image placeholder" 회색 사각형. 사용자가 "와우" 못 느낌.

이 스킬은 **모든 placeholder 자리에 verified free-license CDN 자산**을 박는 catalog. URL은 전부 200 OK 검증됨 (2026-05-14 기준).

## 핵심 원칙

1. **검증된 URL만**. 이 catalog에 없으면 generator가 임의로 만들지 말 것.
2. **모든 자산은 commercial-use 허용**, 사용자 product에 ship 가능.
3. **출처는 `assets/attribution.md`에 의무 기록**, URL + license + 사용 위치 + fetch 일자.
4. **deterministic seeding 권장**, `seed` 또는 `lock` 파라미터로 결과 재현 가능. 매번 다른 이미지 나오는 random URL은 피할 것.
5. **금지**: handcraft inline SVG로 placeholder를 "그려서" 채우기. catalog 자산 fetch 실패 시 → brand-color CSS gradient placeholder (이전 v1.3.4 fallback 정책과 동일).

## Catalog (verified 2026-05-14)

### 1. LOGO, product name **워드마크만** (v1.3.7부터)

별도 icon / shapes mark / DiceBear logo 합성 **금지**. 헤더 logo = product name 텍스트 + 디스플레이 폰트, 그게 전부.

**왜**: AI가 합성한 icon mark는 "generic"하게 보임 (사용자 frustration source). product 이름을 **꽤 괜찮은 폰트로** 그대로 박는 게 진짜 brand wordmark처럼 보이고 사용자가 1초만에 자기 product name으로 swap 가능.

**패턴**:
```html
<a class="logo" href="/" style="display:inline-flex;align-items:center;text-decoration:none;">
  <span class="logo-wordmark">{{PRODUCT_NAME}}</span>
</a>
<style>
  .logo-wordmark{
    font-family:"Bricolage Grotesque","Space Grotesk","DM Serif Display","Fraunces",-apple-system,sans-serif;
    font-size:22px;font-weight:700;letter-spacing:-0.04em;
    color:var(--color-text-heading);
  }
</style>
```

`<head>`에 디스플레이 폰트 `<link>` 의무 (§6 참고).

**brand vibe별 폰트 매칭**:
- cool / minimal / fintech serious → **Space Grotesk** 700 (geometric)
- warm / playful / community → **Bricolage Grotesque** 700 (friendly variable)
- editorial / luxury → **DM Serif Display** 또는 **Fraunces** (display serif)
- bold / display → **Bricolage Grotesque** 800

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