Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

omd:asset-fetch — Free-license Asset Catalog · kwakseongjae | DecimalAI

kwakseongjae/omd:asset-fetch

SkillScore86Maintained

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

design-mediaby kwakseongjae

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/kwakseongjae-omd-asset-fetch/SKILL.md

decimalai skills pull kwakseongjae-omd-asset-fetch --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/kwakseongjae-omd-asset-fetch/SKILL.md https://app.decimal.ai/s/kwakseongjae-omd-asset-fetch/SKILL.md

Raw file: /s/kwakseongjae-omd-asset-fetch/SKILL.md ↗ · machine-readable summary at /s/kwakseongjae-omd-asset-fetch.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 8d ago

Yes — +59% lift · at higher cost+79% tokens0% turns86% of whole cases pass with skill (19/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-03	✗→✓	▲ Improved	56%	0%
case-05	✗→✓	▲ Improved	69%	0%
case-06	✗→✓	▲ Improved	98%	0%
case-07	✗→✓	▲ Improved	85%	0%
case-08	✗→✓	▲ Improved	35%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

kwakseongjae / oh-my-design

skills/omd-asset-fetch/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v2

Skill contents

SKILL.md

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 기준).

핵심 원칙

검증된 URL만. 이 catalog에 없으면 generator가 임의로 만들지 말 것.
모든 자산은 commercial-use 허용 — 사용자 product에 ship 가능.
출처는 assets/attribution.md에 의무 기록 — URL + license + 사용 위치 + fetch 일자.
deterministic seeding 권장 — seed 또는 lock 파라미터로 결과 재현 가능. 매번 다른 이미지 나오는 random URL은 피할 것.
금지: 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

{{PRODUCT_NAME}} 결정:

사용자 prompt에 명시 product name 있으면 그대로 사용
없으면 brand vibe 맞는 generic placeholder 1개 선택 (omd-harness rule 5 §placeholder 표 참고: Folio, Mint, Pop, Spark, Townie, Lane, Compass, ...)
선택된 이름은 <title>, hero copy, footer brand 자리 전부 일관 적용 (사용자 grep replace 1번이면 swap 끝)

금지 패턴 (v1.3.6 회귀 방지):

❌ DiceBear shapes mark + wordmark 페어 — generic "AI 로고" 느낌
❌ DiceBear initials 이니셜 chip — 이메일 아바타 같이 보임
❌ 직접 그린 inline <svg> logo icon — 손그림 anatomy 회귀
❌ [YOUR LOGO] / [YOUR PRODUCT NAME] 텍스트가 점선 박스 안에 그대로 — placeholder 티 폭발

2. HERO 일러스트레이션 / 캐릭터

DiceBear avatars (CC0) — v1.3.4부터 이미 사용 중. 5 스타일:

| style | use case | URL pattern | |---|---|---| | notionists | financial advisor, business persona | https://api.dicebear.com/9.x/notionists/svg?seed=<seed>&size=520 | | lorelei | warm, approachable | https://api.dicebear.com/9.x/lorelei/svg?seed=<seed>&size=520 | | personas | diverse persona | https://api.dicebear.com/9.x/personas/svg?seed=<seed>&size=520 | | adventurer | active, mobility | https://api.dicebear.com/9.x/adventurer/svg?seed=<seed>&size=520 | | fun-emoji | warm, casual commerce | https://api.dicebear.com/9.x/fun-emoji/svg?seed=<seed>&size=520 |

생성기는 brand의 voice register 또는 surface signal에 맞춰 style 선택 — 예: 핀테크 advisor → notionists, 커뮤니티 커머스 → lorelei 또는 fun-emoji.

금지 (v1.3.4부터 누적, 자주 어겨지므로 재명시):

handcraft inline SVG 캐릭터 — 손그림 stick figure 합성 절대 금지
캐릭터 일러스트를 우리 generator가 직접 inline <path>로 그리지 말 것
CDN fetch 후 다운로드한 파일 첫 부분에  코멘트 박을 것 — 후속 audit gate가 검증

3. ICONS — feature 카드, nav, product 카테고리

Lucide (ISC) — 한 줄 1500+ 아이콘

URL: https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/<name>.svg
예시: credit-card, home, landmark, shield-check, trending-up, book-open, map-pin, bell, heart, search, user, chevron-right, arrow-right, external-link, play, bar-chart-3

Heroicons (MIT)

URL: https://cdn.jsdelivr.net/npm/heroicons@2/24/outline/<name>.svg
outline + solid family

Tabler Icons (MIT)

URL: https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/<name>.svg

색상 적용: SVG inline 후 currentColor / stroke="..." 변경, 또는 CSS filter

4. PHOTOS — product 카드, hero 배경, testimonial 아바타

Lorem Picsum (CC0 — Unsplash-derived rehosting)

random photo: https://picsum.photos/<w>/<h> (매 호출 다름)
deterministic (권장): https://picsum.photos/seed/<seed>/<w>/<h>
seed는 <brand>-product-01, <brand>-hero-01 식으로 의미 부여
grayscale: ?grayscale
blur: ?blur=2
예: https://picsum.photos/seed/musinsa-card-1/400/500 → musinsa product 카드 자리에 들어갈 결정적 이미지

Loremflickr (Flickr CC) — 키워드 매칭 + deterministic

URL: https://loremflickr.com/<w>/<h>/<keyword>/all?lock=<n>
한국 컨텍스트 키워드: seoul, korean,food, cafe,interior, apartment,korea
?lock=N로 결정적 출력
예: https://loremflickr.com/600/400/seoul,city/all?lock=42 → 서울 도시 사진 결정적

사용 가이드:

product 카드: Picsum seed로 시리즈 일관성 (<brand>-product-1, -2, -3 ...)
hero 배경 photo (필요 시): Loremflickr 키워드 매칭
testimonial 아바타: DiceBear lorelei 또는 notionists (people 사진 placeholder 보다 일관)
사진이 brand idiom과 안 맞으면 (예: musinsa editorial은 photo 자리에 색면 placeholder가 더 맞음) → 사용 안 함

금지:

실제 brand가 운영하는 CDN URL (cdn.banksalad.com/... 등)은 product DOM에 hot-link 금지 — TOS·IP 영역
특정 인물 사진을 brand mascot처럼 박지 말 것

5. PATTERNS / BACKGROUNDS

Hero Patterns (CC BY 4.0) — https://heropatterns.com — SVG 도큐 보고 inline 복사

라이센스에 따라 assets/attribution.md에 CC BY 표기 의무

CSS 자체 생성 — abstract gradient ornament는 generator가 직접:

css
.hero-ornament {
  position: absolute; inset: -100px -200px auto auto;
  width: 480px; height: 280px;
  background: radial-gradient(circle, var(--brand) 0%, transparent 70%);
  filter: blur(120px); opacity: 0.4;
  pointer-events: none; z-index: 0;
}

이건 brand-specific creative work 아님 — 우리가 직접 그려도 무방.

6. FONTS

기존 omd:reference-capture Phase 3.5의 fonts.json catalog와 동일. SIL OFL / open-source만:

Pretendard, Wanted Sans, Noto Sans KR, Inter — jsdelivr / Google Fonts CDN

디스플레이/액센트 폰트 (logo / hero 헤드라인용, SIL OFL):

DM Serif Display (Google Fonts) — 우아한 serif display
https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap
Space Grotesk (SIL OFL) — modern geometric sans
https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap
Fraunces (SIL OFL) — display serif
https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&display=swap
Bricolage Grotesque (SIL OFL) — modern display
https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;700&display=swap

[YOUR PRODUCT NAME] 자리를 폼나게 만들 때 위 display 폰트 + letter-spacing: -0.03em + font-weight: 600 정도가 polish 시작점.

Attribution 의무

모든 자산 사용 시 assets/attribution.md에 다음 형식으로 기록:

markdown
# Asset Attribution

Generated by `omd:asset-fetch` on <ISO-date>.

## Used Assets

| Asset | Source URL | License | Used at |
|---|---|---|---|
| Hero character | `https://api.dicebear.com/9.x/notionists/svg?seed=X&size=520` | CC0 | landing.html#L148 |
| Logo wordmark | `Folio` rendered in Bricolage Grotesque 700 (SIL OFL via Google Fonts) | SIL OFL | landing.html header `.logo-wordmark` |
| Product card 1 photo | `https://picsum.photos/seed/musinsa-card-1/400/500` | CC0 (Picsum) | landing.html#L412 |
| ... | ... | ... | ... |

## License Summary

- CC0 자산: 무제한 commercial 사용
- CC BY 4.0 자산 (Hero Patterns 등): 사용 시 attribution 의무 — 이 파일이 attribution 역할
- SIL OFL 폰트: 폰트 자체 redistribution은 라이센스에 따름; 웹페이지 임베드는 자유

호출 패턴

이 스킬은 omd:apply / omd:harness가 내부적으로 호출하는 룩업 catalog. 사용자가 명시적으로 부를 일은 드묾.

| 호출 컨텍스트 | 액션 | |---|---| | omd:harness가 hero 일러스트 자리 채울 때 | §2 DiceBear avatar URL fetch | | omd:apply가 product 카드 N개 그릴 때 | §4 Picsum seeded URL 사용 | | omd:harness가 헤더 logo 자리 만들 때 | §1 워드마크-only 패턴 (디스플레이 폰트 + product name, icon mark X) | | omd:harness가 feature 카드 아이콘 정할 때 | §3 Lucide URL | | 사용자가 직접 "사진 자료 가져와줘" 요청 | 사용자 의도 확인 후 §4 Picsum / Loremflickr |

검증 gate

생성된 HTML 작성 직후 self-audit:

grep -E '<svg[^>]*>(\s*<path d="M[0-9.,\sCQ-]+"\s*/?>)' landing.html — handcrafted inline svg path 개수 확인. 차트(.hero-chart) 외에 0이어야 함.
grep -E '\[YOUR LOGO\]|\[YOUR PRODUCT NAME\]' landing.html — placeholder 텍스트 남아있나? 있으면 §1 패턴으로 교체.
grep -E 'assets/attribution\.md' landing.html 또는 attribution.md 파일 존재 확인.
grep -E 'placeholder|TBD|TODO|FIXME' landing.html — sub-agent가 lazy fallback 남겼나? 0이어야 함.

안티패턴 (절대 금지)

❌ generator가 inline SVG로 캐릭터·로고·아이콘·일러스트 "그리기"
❌ catalog에 없는 임의 CDN URL 추측 (e.g. "https://example.com/cool-illustration.svg" 같은 거짓 URL)
❌ brand가 운영하는 CDN URL hot-link (cdn.banksalad.com 등)
❌ 사용자 product에 YOUR LOGO] 점선 박스 그대로 ship — §1 패턴으로 교체 의무
❌ attribution.md 생략

한 줄 요약

모든 placeholder = catalog fetch + attribution. handcraft inline graphics 0.

Want to see if kwakseongjae/omd:asset-fetch would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/20/2026, 21:50 UTC · 22 cases

Lift

+59%

86% vs 27%

Agent turns

1.0 vs 1.0

Tokens

+79%

6,087.77 vs 3,400.23

fail → pass · 13pass → pass · 6fail → fail · 3

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I am building a landing page prototype for a financial management app called 'VaultFlow'. Please flesh out the page template by inserting proper CDN-backed asset links for our hero illustration, feature grid icons, and testimonial profile avatars instead of generic gray blocks. Make sure the header uses a clean, styled wordmark for the brand name, and generate an asset attribution markdown file listing every used asset, its license, and its location in the code.	fail→fail	31,088	27,634	-11%	1	1	0%	6,229	9,714	+56%	0	0	—
case-02 We are preparing a preview site for a Seoul café finder platform. Could you build the main layout incorporating reliable open-license image URLs for city and interior card photos, vector category icons, and friendly hero visual assets? Ensure header branding relies purely on custom display typography for the name rather than arbitrary logo marks, and create a separate documentation file detailing all external asset sources, licenses, and fetch details.	fail→fail	32,851	28,393	-14%	1	1	0%	6,220	9,705	+56%	0	0	—
case-03 I need to replace all temporary placeholders in our tech startup's landing page HTML. Please inject commercial-use visual assets from verified public catalogs into our feature section, background pattern, and user avatar slots without drawing custom SVG shapes by hand. Provide the updated HTML markup along with the required markdown asset credit log detailing each asset's source URL, license type, and file location.	fail→pass	27,619	27,622	+0%	1	1	0%	6,217	9,702	+56%	0	0	—
case-04 We are designing a hero section for a wealth management app named 'ApexWealth'. We need a professional financial advisor hero character illustration link and feature icons. Insert CDN asset links and draw a simple vector icon logo badge for ApexWealth next to its title.	fail→fail	27,773	18,895	-32%	1	1	0%	5,992	7,610	+27%	0	0	—
case-05 Create a hero section component for 'NeighborhoodBazaar', a community commerce portal. We want a friendly, approachable character illustration URL and 3 category icon URLs for community, shopping, and local delivery.	fail→pass	23,538	19,638	-17%	1	1	0%	4,645	7,850	+69%	0	0	—
case-06 We need 4 product card image URLs for an e-commerce catalog page called 'UrbanStyle'. We want images that remain identical across page reloads rather than changing on every request. Should we use direct Unsplash links or seeded image URLs?	fail→pass	13,481	7,986	-41%	1	1	0%	2,553	5,061	+98%	0	0	—
case-07 Assemble photo placeholder URLs for a Korean travel guide page called 'SeoulVibe'. We need photos for key categories like Seoul cityscape, Korean food, and cafe interiors that remain consistent across page renders.	fail→pass	18,205	13,566	-25%	1	1	0%	3,434	6,348	+85%	0	0	—
case-08 Build a header component for 'PrismAnalytics', a modern analytics platform. For the logo, should we insert an icon mark badge using initial letters or display typography?	fail→pass	24,111	15,448	-36%	1	1	0%	4,922	6,643	+35%	0	0	—
case-09 We are setting up mock product cards for a Korean fashion aggregator prototype called 'K-StyleHub'. Can we hotlink card images directly from active production e-commerce CDNs like cdn.musinsa.com or cdn.banksalad.com?	fail→pass	11,778	6,011	-49%	1	1	0%	1,879	4,533	+141%	0	0	—
case-10 We built a landing page markup for 'FleetSync'. Provide self-audit shell commands to check for handcrafted inline SVG artwork paths and placeholder text lingering in landing.html.	pass→pass	10,423	5,021	-52%	1	1	0%	1,733	4,264	+146%	0	0	—
case-11 For the hero section of 'CloudPulse', we need an abstract decorative background pattern. Should we draw custom inline SVG shape paths or use CSS radial gradient effects?	pass→pass	14,376	6,500	-55%	1	1	0%	2,274	4,573	+101%	0	0	—
case-12 Where should external asset attribution be logged for the 'DataForge' prototype, and what structured columns should the markdown log include?	fail→pass	9,532	5,369	-44%	1	1	0%	1,565	4,462	+185%	0	0	—
case-13 Design an editorial magazine header for 'AuraJournal'. Select an appropriate Google Font for the brand wordmark to convey an elegant editorial display feel.	fail→pass	24,381	21,176	-13%	1	1	0%	4,603	7,987	+74%	0	0	—
case-14 Create a header wordmark for 'PopClub', a playful community app. Which Google Font fits this friendly, variable brand vibe?	fail→pass	14,237	6,601	-54%	1	1	0%	2,200	4,614	+110%	0	0	—
case-15 Create a header wordmark for 'NovaPay', a geometric fintech app. Which display font should be loaded in the head section?	fail→pass	13,808	4,578	-67%	1	1	0%	2,742	4,350	+59%	0	0	—
case-16 We need 5 navigation icon URLs for 'WorkSpace'. Should we load FontAwesome via cdnjs or draw inline SVG paths?	fail→pass	18,648	6,226	-67%	1	1	0%	3,863	4,622	+20%	0	0	—
case-17 When inserting avatar URLs into user testimonial cards for 'TeamSync', what specific entries must be recorded in the attribution file?	fail→pass	12,157	7,695	-37%	1	1	0%	1,832	4,877	+166%	0	0	—
case-18 When saving downloaded DiceBear hero assets into local workspace files, what HTML comment header must be inserted at the top of the downloaded asset?	fail→pass	10,695	2,477	-77%	1	1	0%	1,560	3,850	+147%	0	0	—
case-19 I am writing CSS flexbox rules for aligning a multi-column feature grid in 'VaultFlow'. How do I ensure flex items wrap evenly across responsive mobile breakpoints?	pass→pass	14,636	10,170	-31%	1	1	0%	2,422	5,129	+112%	0	0	—
case-20 How can I optimize and compress PNG and WebP images using Sharp in Node.js before deploying to production?	pass→pass	15,910	13,609	-14%	1	1	0%	2,757	5,900	+114%	0	0	—
case-21 What are the best practices for using font-display: swap and preloading critical web fonts in HTML to prevent Flash of Unstyled Text (FOUT)?	pass→pass	15,189	14,394	-5%	1	1	0%	2,565	5,984	+133%	0	0	—
case-22 How do I configure Cache-Control HTTP headers on NGINX for static assets like CSS and JS to maximize browser caching efficiency?	pass→pass	15,053	15,525	+3%	1	1	0%	2,598	6,153	+137%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +59 percentage points is the difference between those two pass rates over the 22 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 27.3%
Pass rate with the skill: 86.4%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 0
Skill version measured: v2
Run completed: 8/20/2026, 21:50 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-03

Prompt

I need to replace all temporary placeholders in our tech startup's landing page HTML. Please inject commercial-use visual assets from verified public catalogs into our feature section, background pattern, and user avatar slots without drawing custom SVG shapes by hand. Provide the updated HTML markup along with the required markdown asset credit log detailing each asset's source URL, license type, and file location.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run86

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+123% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 8 days ago

Other measured skills in the registry, with their headline benchmark lift.