instantX-research/skills

npx skills add https://github.com/instantX-research/skills --skill brand-quill

Created by [Haofan Wang](https://haofanwang.github.io/) with Claude Code.

npx skills add https://github.com/instantX-research/skills --skill commit-poet

Created by [Haofan Wang](https://haofanwang.github.io/) with Claude Code.

Bash

npx skills add https://github.com/instantX-research/skills --skill dont-to-do

Inspired by the compiler architecture in [VCC](https://github.com/lllyasviel/VCC),

Created by [Haofan Wang](https://haofanwang.github.io/) with Claude Code.

Bash

#!/usr/bin/env python3

(r"(?:don'?t|avoid|no) (?:delete|deleting|drop(?:ping)?|truncat(?:e|ing)|wip(?:e|ing)|destroy(?:ing)?|remov(?:e|ing)) (?:any )?(?:data|records?|rows?|tables?|files?|buckets?)",      "N","J","don't delete data -> soft-delete-only rule"),    

"N","J","don't delete data -> soft-delete-only rule"),     (r"(?:don'?t|avoid|no) (?:access(?:ing)?|use|using|call(?:ing)?|fetch(?:ing)? from) (?:the )?(?:internet|web|external (?:API|service|URL))|(?:offline|no internet)",      "N","J","do

(r"(?:don'?t|avoid|no) (?:access(?:ing)?|use|using|call(?:ing)?|fetch(?:ing)? from) (?:the )?(?:internet|web|external (?:API|service|URL))|(?:offline|no internet)",

#!/usr/bin/env python3

npx skills add https://github.com/instantX-research/skills --skill easy-prd

Created by [Haofan Wang](https://haofanwang.github.io/) with Claude Code.

Bash

npx skills add https://github.com/instantX-research/skills --skill find-best-skill

/find-best-skill https://github.com/user/repo-a https://github.com/user/repo-b

> Replace the URLs with real GitHub tree URLs pointing to the directory containing each skill's `SKILL.md`. Example: `https://github.com/user/repo/tree/main/skills/my-skill`

Created by [Haofan Wang](https://haofanwang.github.io/) with Claude Code.

Bash

> /find-best-skill firecrawl firecrawl-scrape > /find-best-skill browse gstack --query test the signup flow > /find-best-skill https://github.com/user/repo-a https://github.com/user/repo-b

> /find-best-skill browse gstack --query test the signup flow > /find-best-skill https://github.com/user/repo-a https://github.com/user/repo-b > ```

> /find-best-skill https://github.com/user/repo-a https://github.com/user/repo-b

- If `--query` is present but nothing follows it, treat TEST_TASK as absent (same as if   `--query` was not provided at all). Never use an empty string as TEST_TASK. - Each token that starts with `http://` or `https://` → treat as a remote 

`--query` was not provided at all). Never use an empty string as TEST_TASK. - Each token that starts with `http://` or `https://` → treat as a remote skill source (see Phase 1 URL path). - Two tokens before `--query` (or before end-of-input

- Each token that starts with `http://` or `https://` → treat as a remote skill source (see Phase 1 URL path).

> ``` > mkdir -p ~/.claude/skills/<skill-name> > curl -o ~/.claude/skills/<skill-name>/SKILL.md <raw-url-if-known>

> mkdir -p ~/.claude/skills/<skill-name> > curl -o ~/.claude/skills/<skill-name>/SKILL.md <raw-url-if-known> > ```

> curl -o ~/.claude/skills/<skill-name>/SKILL.md <raw-url-if-known>

**GitHub repository URL** (e.g., `https://github.com/user/repo` or `https://github.com/user/repo/tree/main/skills/my-skill`):

- Fetch directly without appending anything.    - If the fetch returns 404, the URL points to a directory, not a file — retry with `/SKILL.md` appended.    - Example: `https://github.com/user/repo/blob/main/.claude/skills/foo/SKILL.md`

- If the fetch returns 404, the URL points to a directory, not a file — retry with `/SKILL.md` appended.    - Example: `https://github.com/user/repo/blob/main/.claude/skills/foo/SKILL.md`      → `https://raw.githubusercontent.com/user/repo/

- Example: `https://github.com/user/repo/blob/main/.claude/skills/foo/SKILL.md`

→ `https://raw.githubusercontent.com/user/repo/main/.claude/skills/foo/SKILL.md`

- Remove the `/tree` path segment (e.g., `/tree/main/` → `/main/`)    - Append `/SKILL.md` at the end    - Example: `https://github.com/user/repo/tree/main/.claude/skills/foo`

- Append `/SKILL.md` at the end    - Example: `https://github.com/user/repo/tree/main/.claude/skills/foo`      → `https://raw.githubusercontent.com/user/repo/main/.claude/skills/foo/SKILL.md`

- Example: `https://github.com/user/repo/tree/main/.claude/skills/foo`

→ `https://raw.githubusercontent.com/user/repo/main/.claude/skills/foo/SKILL.md`

3. **Repo root URL** (no `/tree/` or `/blob/`): try the following paths for `main` and `master` branches:    - `https://raw.githubusercontent.com/<user>/<repo>/<branch>/SKILL.md`

- `https://raw.githubusercontent.com/<user>/<repo>/<branch>/SKILL.md`

- `https://raw.githubusercontent.com/<user>/<repo>/<branch>/skills/<repo-name>/SKILL.md`

- `https://raw.githubusercontent.com/<user>/<repo>/<branch>/.claude/skills/<repo-name>/SKILL.md`

If all six paths (three per branch) return 404, **fetch `https://github.com/<user>/<repo>` once** with WebFetch. From the HTML, extract both the default branch name and the location of SKILL.md in the file tree. Construct the raw URL and re

> "Could not locate SKILL.md at `<url>`. The URL must point to the **directory containing SKILL.md**, not a parent directory or the file itself. For example: `https://github.com/user/repo/tree/main/skills/my-skill` (where `my-skill/SKILL.md

**Direct raw URL** (e.g., `https://raw.githubusercontent.com/...` or any direct `.md` link): → Fetch directly with WebFetch.

[Credential-related source omitted]

mkdir -p ~/.claude/skills/<skill-name> curl -o ~/.claude/skills/<skill-name>/SKILL.md <raw-url>

curl -o ~/.claude/skills/<skill-name>/SKILL.md <raw-url>

- **URL fetch fails (404)**: report the error and remind the user that the URL must point to the   **directory containing SKILL.md** — not a parent directory or the file itself. Example:   `https://github.com/user/repo/tree/main/skills/my-s

**directory containing SKILL.md** — not a parent directory or the file itself. Example:   `https://github.com/user/repo/tree/main/skills/my-skill` where `my-skill/SKILL.md` exists. - **URL returns HTML instead of raw markdown**: GitHub repo

`https://github.com/user/repo/tree/main/skills/my-skill` where `my-skill/SKILL.md` exists.

npx skills add https://github.com/instantX-research/skills --skill frontend-reactor

- **Clone & convert:** `/frontend-ui-clone https://linear.app` → `/frontend-reactor clone-linear.html`

- **Clone multiple pages, then convert:** Clone several pages → `/frontend-reactor clone-linear*.html` - **URL shortcut:** `/frontend-reactor https://linear.app` (auto-clones homepage, then converts) - **Design from scratch:** `/frontend-ui

- **URL shortcut:** `/frontend-reactor https://linear.app` (auto-clones homepage, then converts)

- "Turn clone-linear.html into a Next.js project" - "Make a real project from these HTML files" - "Rebuild https://example.com as React components"

- "Rebuild https://example.com as React components"

/frontend-reactor https://linear.app

/frontend-reactor https://resend.com --css tailwind --output ./my-resend

Created by [Haofan Wang](https://haofanwang.github.io/) with Claude Code.

Bash

**Mode C — URL (single-page clone + live links):** - Input is a URL (starts with `http://` or `https://`)

- Input is a URL (starts with `http://` or `https://`)

1. If input contains one `.html` path → Mode A 2. If input contains multiple `.html` paths or a glob pattern → Mode B 3. If input starts with `http://` or `https://` → Mode C

2. If input contains multiple `.html` paths or a glob pattern → Mode B 3. If input starts with `http://` or `https://` → Mode C 4. If no clear input → ask with `AskUserQuestion`

3. If input starts with `http://` or `https://` → Mode C

- `clone-linear.html` → `linear` - `clone-stripe-02.html` → `stripe` - `https://www.magicpath.ai/` → `magicpath`

- `https://www.magicpath.ai/` → `magicpath`

Internal links:   href="/pricing"                    → href="https://original-site.com/pricing"

href="/pricing"                    → href="https://original-site.com/pricing"

href="/about"                      → href="https://original-site.com/about"

href="/documentation/getting-started" → href="https://original-site.com/documentation/getting-started"

Buttons (dead <button> with no href):   <button>Sign in</button>          → <a href="https://original-site.com/signin">Sign in</a>

<button>Sign in</button>          → <a href="https://original-site.com/signin">Sign in</a>

<button>Get started</button>      → <a href="https://original-site.com">Get started</a>

href="/pricing"  →  href="https://[original-domain]/pricing"

1. Extract every `href` value 2. Classify each link:    - **Internal** (same domain as the cloned site): `https://linear.app/pricing` → route `/pricing`

2. Classify each link:    - **Internal** (same domain as the cloned site): `https://linear.app/pricing` → route `/pricing`    - **Anchor** (hash links): `#features`, `#pricing`

- **Internal** (same domain as the cloned site): `https://linear.app/pricing` → route `/pricing`

- **Anchor** (hash links): `#features`, `#pricing`    - **External** (different domain): `https://github.com/linear`    - **Mail/tel**: `mailto:`, `tel:`

- **External** (different domain): `https://github.com/linear`

In ALL modes, convert absolute URLs to relative paths: - `https://example.com/pricing` → `/pricing`

- `https://example.com/pricing` → `/pricing`

- `https://example.com/` → `/`

- `https://example.com/#features` → `/#features`

2. **Dead buttons → links:** Convert `<button>Sign in</button>` to `<a href="/signin">Sign in</a>`. Convert CTA buttons to links pointing to original site. See `knowledge/interactivity.md` Pattern 10. 3. **Input overlay removal:** Remove ty

3. **Input overlay removal:** Remove typewriter overlay (`pointer-events-none` div with static text over input), restore input visibility, add placeholder. See `knowledge/interactivity.md` Pattern 9. 4. **URL normalization:** Convert `href=

4. **URL normalization:** Convert `href="https://original-site.com/path"` to `href="/path"` for internal links. See `knowledge/interactivity.md` Pattern 11.

/* === 1. @import rules === */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

<!-- Internal link → relative path, plain <a> --> <a href="https://example.com/pricing">Pricing</a>

<a href="https://example.com/pricing">Pricing</a>

<!-- External link --> <a href="https://github.com/example">GitHub</a>

<a href="https://github.com/example">GitHub</a>

<a href="https://github.com/example" target="_blank" rel="noopener noreferrer">GitHub</a>

<!-- Internal link WITH route → Next.js Link --> <a href="https://example.com/pricing">Pricing</a>

<a href="https://example.com/pricing">Pricing</a>

<!-- Internal link WITHOUT route → plain <a> with TODO --> <a href="https://example.com/blog">Blog</a>

<a href="https://example.com/blog">Blog</a>

Always convert absolute URLs to relative paths: - `https://example.com/pricing` → `/pricing`

- `https://example.com/pricing` → `/pricing`

- `https://example.com/` → `/`

- `https://example.com/#features` → `/#features`

ORIGINAL_SITE = "https://www.example.com"

**Problem:** Clone HTML contains links that may be relative (`/pricing`) or absolute (`https://example.com/pricing`). In Mode A/B with local routes, these become local navigation. In Mode C (homepage-only), ALL internal links should point t

# Convert absolute URLs to relative for local routing html = html.replace('href="https://www.example.com/', 'href="/')

html = html.replace('href="https://www.example.com/', 'href="/')

html = html.replace('href="https://example.com/', 'href="/')

ORIGINAL_SITE = "https://www.example.com"

# Ensure relative links become absolute to the original site # /pricing → https://www.example.com/pricing

# /pricing → https://www.example.com/pricing

// Detected: @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700")

for _ in range(60):         try:             sock = socket.create_connection(("localhost", port), timeout=0.5)

try:             sock = socket.create_connection(("localhost", port), timeout=0.5)             sock.close()

sock = socket.create_connection(("localhost", port), timeout=0.5)

os.makedirs(output_dir, exist_ok=True)     report = {}     local_url = "http://localhost:3000"

local_url = "http://localhost:3000"

https://www.example.com/pricing       → /pricing

https://www.example.com/about/        → /about

https://www.example.com/features/chat → /features/chat

https://www.example.com/              → / (homepage)

https://www.example.com/#section      → skip (anchor, not a page)

https://www.example.com/blog/post-1   → /blog/post-1 (if prioritized)

npx skills add https://github.com/instantX-research/skills --skill frontend-ui-clone

- **Clone & convert:** `/frontend-ui-clone https://linear.app` → `/frontend-reactor clone-linear.html`

- **Clone multiple pages, then convert:** Clone several pages → `/frontend-reactor clone-linear*.html` - **URL shortcut:** `/frontend-reactor https://linear.app` (auto-clones homepage, then converts) - **Design from scratch:** `/frontend-ui

- **URL shortcut:** `/frontend-reactor https://linear.app` (auto-clones homepage, then converts)

/frontend-ui-clone https://example.com

- "Clone this site: https://example.com"

- "Make a pixel-perfect copy of https://example.com"

Created by [Haofan Wang](https://haofanwang.github.io/) with Claude Code.

Bash

Parse `$ARGUMENTS` for a URL (starts with `http://` or `https://`).

if not src_match: return full_tag         video_id = src_match.group(2)         yt_url = f"https://www.youtube.com/watch?v={video_id}"

video_id = src_match.group(2)         yt_url = f"https://www.youtube.com/watch?v={video_id}"         thumb_url = f"https://i.ytimg.com/vi/{video_id}/maxresdefault.jpg"

yt_url = f"https://www.youtube.com/watch?v={video_id}"

thumb_url = f"https://i.ytimg.com/vi/{video_id}/maxresdefault.jpg"

// Fix broken srcset (relative URLs that weren't caught in assembly) const DOMAIN = 'https://ORIGINAL_DOMAIN';  // replace during assembly

const DOMAIN = 'https://ORIGINAL_DOMAIN';  // replace during assembly

curl -sL "[css-url]" -o /tmp/site-main.css

gstack eval "TARGET_URL" "document.documentElement.outerHTML" > /tmp/site-dom.html 2>/dev/null \

|| browse eval "TARGET_URL" "document.documentElement.outerHTML" > /tmp/site-dom.html 2>/dev/null

rm -f "$(pwd)/test_outputs/"*.png

# Download each asset (parallel with xargs for speed) echo "$URLS" | xargs -P 4 -I {} sh -c 'curl -sL "{}" -o "ASSET_DIR/$(basename "{}" | cut -d"?" -f1)"'

echo "$URLS" | xargs -P 4 -I {} sh -c 'curl -sL "{}" -o "ASSET_DIR/$(basename "{}" | cut -d"?" -f1)"'

# Also grab favicons curl -sL "https://DOMAIN/favicon.ico" -o "ASSET_DIR/favicon.ico" 2>/dev/null

curl -sL "https://DOMAIN/favicon.ico" -o "ASSET_DIR/favicon.ico" 2>/dev/null

curl -sL "https://DOMAIN/apple-touch-icon.png" -o "ASSET_DIR/apple-touch-icon.png" 2>/dev/null

**Fix:** Parse the `url` query parameter and prepend the original domain: `/_next/image?url=%2Fimages%2Ffoo.png&w=1920&q=75` → `https://domain.com/images/foo.png`

`/_next/image?url=%2Fimages%2Ffoo.png&w=1920&q=75` → `https://domain.com/images/foo.png`

**Fix during assembly (Step 4):** - `/_next/image?url=%2F...` → parse the `url` param, prepend `https://domain.com`

- `/_next/image?url=%2F...` → parse the `url` param, prepend `https://domain.com`

- `/_next/static/media/...` → prepend `https://domain.com`

- `/images/...` → prepend `https://domain.com`

- `/cdn-cgi/...` → prepend `https://domain.com`

- CSS `url(/_next/...)` → prepend `https://domain.com`

npx skills add https://github.com/instantX-research/skills --skill frontend-ui

- **Clone & convert:** `/frontend-ui-clone https://linear.app` → `/frontend-reactor clone-linear.html`

- **Clone multiple pages, then convert:** Clone several pages → `/frontend-reactor clone-linear*.html` - **URL shortcut:** `/frontend-reactor https://linear.app` (auto-clones homepage, then converts) - **Design from scratch:** `/frontend-ui

- **URL shortcut:** `/frontend-reactor https://linear.app` (auto-clones homepage, then converts)

# Clone from URL /frontend-ui --ref https://linear.app build a project management landing page

/frontend-ui --ref https://linear.app build a project management landing page

/frontend-ui --ref https://lumalabs.ai build an AI video product page

/frontend-ui --ref https://resend.com build a developer tool marketing page

/frontend-ui --ref https://www.sainingxie.com build an academic homepage

# From a reference URL /frontend-ui --ref https://resend.com --save resend-brand

/frontend-ui --ref https://resend.com --save resend-brand

Created by [Haofan Wang](https://haofanwang.github.io/) with Claude Code.

Bash

3. **(Optional) Fetch from icon library if you want pixel-perfect established icons:**       - Lucide: `https://unpkg.com/lucide-static/icons/{icon-name}.svg`

- Lucide: `https://unpkg.com/lucide-static/icons/{icon-name}.svg`

- Tabler: `https://unpkg.com/@tabler/icons/icons/outline/{icon-name}.svg`

3. **If icon-craft is NOT installed:**    - First, prompt the user: `⚠<U+FE0F> icon-craft skill is not installed. It provides professional icon design principles, style archetypes, and curated icon mappings that significantly improve icon quality.

- First, prompt the user: `⚠<U+FE0F> icon-craft skill is not installed. It provides professional icon design principles, style archetypes, and curated icon mappings that significantly improve icon quality. Install it now? Run: npx skills add https

- If the user agrees to install, run `npx skills add https://github.com/instantX-research/skills --skill icon-craft`, then proceed with Step 1 above (the full icon-craft workflow)

content: '';   position: fixed; inset: 0; pointer-events: none; z-index: 999;   background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='noise'><feTurbulence type='fractalNoise' 

position: fixed; inset: 0; pointer-events: none; z-index: 999;   background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='

background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/><feColorMatrix type='saturate' values='0'/>

| Product Type | Color mood | Typography | Key effects | Avoid | Reference URLs | |-------------|-----------|------------|-------------|-------|----------------| | **SaaS / Dev Tool** | Cool neutral | Geometric sans + mono | Dot-grid bg, co

|-------------|-----------|------------|-------------|-------|----------------| | **SaaS / Dev Tool** | Cool neutral | Geometric sans + mono | Dot-grid bg, code highlight, kbd tags | Gradients on every card | https://linear.app · https://ve

| **SaaS / Dev Tool** | Cool neutral | Geometric sans + mono | Dot-grid bg, code highlight, kbd tags | Gradients on every card | https://linear.app · https://vercel.com · https://supabase.com |

| **FinTech** | Deep navy or warm dark + gold/green | Humanist sans or transitional serif | Number animation, status badges, data tables | Neon, playful illustrations | https://stripe.com · https://robinhood.com · https://avenia.io |

| **Healthcare** | White-dominant, clinical blue/green | Clear humanist sans | Large tap targets, progress indicators | Dark mode, aggressive color | — | | **E-commerce** | Neutral bg (products pop) | Tight line-height, bold price | Hover z

| **E-commerce** | Neutral bg (products pop) | Tight line-height, bold price | Hover zoom, cart micro-animation, trust badges | Bg competing with product photography | https://apple.com (hardware store) |

| **Luxury / Fashion** | Black/ivory/warm white | Transitional serif, generous spacing | Full-bleed photography, ultra-slow fades | Rounded corners, bright CTAs | https://a24films.com · https://www.lvmh.com |

| **B2B SaaS / Dashboard** | Light neutral `#f8fafc`, white cards | Inter/Geist, tabular numbers | Data charts, status dots, condensed tables | Cinematic animations, heavy hero | https://linear.app · https://base44.com |

| **Creative Portfolio** | Archetype-driven | Custom/licensed display font | Custom cursor, page transitions | Generic card grids, stock photos | https://robin-noguier.com · https://dennissnellenberg.com |

| **Personal Dev Site** | Monochrome or near-mono | Serif + mono, 42–65ch prose | `::selection` brand color, code blocks | Flashy hero, social proof sections | https://paco.me · https://brianlovin.com · https://ryo.lu |

| **Academic / Research Homepage** | Restrained off-white, stone, or institutional neutral + one muted accent | **Font rule:** DM Sans or Inter throughout (weight hierarchy only) is the default. If a serif is used, limit it to the researche

| **Institutional / University / Government** | Institutional neutrals + one restrained brand color | Sober sans or institutional serif+sober sans pairing; dense nav stays readable | Utility nav, audience shortcuts, by-the-numbers band, res

| **Aggregation / Directory / Offer Hub** | Neutral base + one strong organizing accent | Crisp sans hierarchy; compact metadata and price/value labels scan instantly | Category chips, offer cards, partner logos, urgency labels, filters/sor

| **AI / ML Platform** | Dark-first, electric blue or teal | Geometric sans + mono | Animated data streams, terminal aesthetics | Bubble chat UI, robot emoji, generic purple | https://lumalabs.ai/ · https://www.granola.ai/ · https://supabas

| **Restaurant / Food** | Warm cream/terracotta or dark chalkboard | Organic humanist or slab serif | Full-bleed food photography, menu cards | Cold blue-gray, sterile feeling | — | | **Chinese Consumer App (国内消费类App)** | High-saturation br

| **Chinese Consumer App (国内消费类App)** | High-saturation brand color (red/orange/blue) on white; bottom tab nav dominant | PingFang SC or HarmonyOS Sans; compact 12–14px body; bold numeric labels | Bottom navigation bar, WeChat mini-program 

| **Chinese SaaS / Enterprise (国内B端SaaS)** | Neutral light bg `#f0f2f5`, white cards, blue `#1677ff` (Ant Design system) | PingFang SC / Noto Sans SC; tabular numbers; dense information hierarchy | Ant Design component patterns, side nav + 

| **Chinese Content / Media (内容资讯类)** | White bg; accent red `#e62117` (Bilibili teal `#00AEEC`); thumbnail-grid dominant | PingFang SC; tight line-height 1.4; tag/category chips prominent | Video/article thumbnail grids, up-count and play-

Reference: https://www.sainingxie.com/ · https://kaiming.me/

Reference: https://www.berkeley.edu/ · https://www.mit.edu/ · https://www.stanford.edu/ · https://www.cmu.edu/

Reference: https://lennysproductpass.com/

Live references for this archetype: - https://linear.app — the canonical example; hairline dividers, near-black precision

- https://linear.app — the canonical example; hairline dividers, near-black precision

- https://vercel.com — bold black, Geist, full-bleed sections

- https://cursor.com — warm charcoal variant, triple typeface stack

Live references for this archetype: - https://anthropic.com — cream bg, burnt orange accent, serif warmth

- https://anthropic.com — cream bg, burnt orange accent, serif warmth

- https://notion.so — off-white, no decorative color, document feel

- https://loom.com — humanist warmth, editorial spacing

Live references for this archetype: - https://stripe.com — diagonal gradient hero, Söhne type, nested feature cards

- https://stripe.com — diagonal gradient hero, Söhne type, nested feature cards

- https://framer.com — spring physics, electric gradient, bold motion

- https://robinhood.com — neon lime accent, Martina Plantijn serif, warm dark bg

Live references for this archetype: - https://raycast.com — glass morphism, coral accent, desktop-native feel

- https://raycast.com — glass morphism, coral accent, desktop-native feel

- https://supabase.com — terminal aesthetic, jade accent, developer-native UI

- https://www.warp.dev — dark glass, developer tool precision

Live references for this archetype: - https://apple.com — full-bleed photography, `#f5f5f7` bg, vast whitespace

- https://apple.com — full-bleed photography, `#f5f5f7` bg, vast whitespace

- https://figma.com — premium restraint, photography-driven product sections

Live references for this archetype: - https://base44.com — bento grid, CSS-variable theming, soft structuralism

- https://base44.com — bento grid, CSS-variable theming, soft structuralism

- https://avenia.io — white bg, teal accent, card-based, API-minimal

Live references for this archetype: - https://www.metmuseum.org — Austin serif + Inter, Met Red hover, 1px separator discipline

- https://www.metmuseum.org — Austin serif + Inter, Met Red hover, 1px separator discipline

- https://www.rijksmuseum.nl — custom RijksText, warm gold heritage palette

- https://www.si.edu — Smithsonian, multi-collection navigation

Live references for this archetype: - https://a24films.com — warm off-white, film poster grid, extreme restraint

- https://a24films.com — warm off-white, film poster grid, extreme restraint

- https://robin-noguier.com — per-project palette reset, draggable carousel

- https://dennissnellenberg.com — multilingual hero, near-white/black

- https://lynnandtonic.com — annual redesign, user-controlled theme

Live references for this archetype: - https://brianlovin.com — Source Serif 4 + Inter, `42rem` prose, dark/light toggle

- https://brianlovin.com — Source Serif 4 + Inter, `42rem` prose, dark/light toggle

- https://paco.me — monochrome, document-like, substance-first

- https://ryo.lu — extreme content clarity, Japanese minimalism

<meta property="og:title" content="Product Name — Short tagline">   <meta property="og:description" content="Same as meta description, or slightly more social-friendly.">   <meta property="og:image" content="https://example.com/og-image.png

<meta property="og:description" content="Same as meta description, or slightly more social-friendly.">   <meta property="og:image" content="https://example.com/og-image.png"> <!-- 1200×630px -->   <meta property="og:url" content="https://ex

<meta property="og:image" content="https://example.com/og-image.png"> <!-- 1200×630px -->

<meta property="og:url" content="https://example.com/">

<meta name="twitter:title" content="Product Name — Short tagline">   <meta name="twitter:description" content="Same as og:description">   <meta name="twitter:image" content="https://example.com/og-image.png">

<meta name="twitter:image" content="https://example.com/og-image.png">

<!-- Favicon: inline SVG data URI — works without any asset file -->   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⬡</text></svg>">

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⬡</text></svg>">

<!-- Single letter (most common for apps) --> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%23e05a3a'/><text x='50' y='72' text-anchor='

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%23e05a3a'/><text x='50' y='72' text-anchor='middle' font-size='64' font-family='sans-serif

<!-- Geometric shape (minimal brands) --> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='%235e6ad2'/></svg>">

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='%235e6ad2'/></svg>">

| Brand | Category | Live URL | Background | Accent | Palette | |-------|----------|----------|------------|--------|---------| | Linear | `[saas][landing]` | https://linear.app | `#08090a` near-black | `#5e6ad2` desaturated indigo | **D1 L

|-------|----------|----------|------------|--------|---------| | Linear | `[saas][landing]` | https://linear.app | `#08090a` near-black | `#5e6ad2` desaturated indigo | **D1 Linear Void** | | Vercel | `[saas][landing]` | https://vercel.com

| Linear | `[saas][landing]` | https://linear.app | `#08090a` near-black | `#5e6ad2` desaturated indigo | **D1 Linear Void** |

| Vercel | `[saas][landing]` | https://vercel.com | `#000000` bold black, Geist typeface | `#ededed` text | **D7 Obsidian Pearl** |

| Stripe | `[saas][fintech]` | https://stripe.com | `#0a2540` text, Söhne, bento grid | `#635bff` | **B1 Stripe Oxide** |

| Raycast | `[saas]` | https://raycast.com | `#141414` dark glass morphism | `#ff6363` coral | **D3 Ember Obsidian** |

| Resend | `[saas]` | https://resend.com | near-monochrome, ABC Favorit + Domaine serif | — | **D7 Obsidian Pearl** |

| Notion | `[saas][personal-dev]` | https://notion.so | `#f7f6f3` bg, `#37352f` text | no decorative color | **L7 Zen Ink** |

| Anthropic | `[landing]` | https://anthropic.com | `#f8f4ed` cream, serif | `#cc5500` burnt orange | **L1 Parchment Warmth** |

| Apple | `[landing]` | https://apple.com | `#f5f5f7` bg, `#1d1d1f` text | full-bleed photography | **L2 Arctic Restraint** |

| Supabase | `[saas]` | https://supabase.com | near-black bg, JetBrains Mono | `#3fcf8e` jade | **D2 Terminal Jade** |

| Framer | `[saas][landing]` | https://framer.com | deep black | electric red+orange gradient | **B2 Framer Noir** |

| Cursor (light) | `[saas]` | https://cursor.com | `#f7f7f4` bg, CursorGothic + Jannon + BerkeleyMono | — | **L7 Zen Ink** |

| Cursor (dark) | `[saas]` | https://cursor.com | `#14120b` deep warm charcoal, opacity hierarchy | — | **D1 Linear Void** |

| Avenia | `[fintech]` | https://avenia.io | white bg, teal accent, card-based | teal | **L5 Slate Cloud** |

| Base44 | `[saas]` | https://base44.com | `#116dff` blue, 8–24px radius | `#116dff` | **L5 Slate Cloud** |

| TwelveLabs | `[saas]` | https://twelvelabs.io | white bg, numbered sections (01/02/03), enterprise AI | — | **D4 Deep Cobalt** |

| Robinhood | `[fintech]` | https://robinhood.com | `#110E08` warm dark, Martina Plantijn serif | `#CCFF00` neon lime | **S3 Neon Brutalist** |

| Invisible Tech | `[saas]` | https://invisible.tech | white bg, `#0C76FE` electric blue, Caveat handwriting | `#0C76FE` | **L5 Slate Cloud** |

| Met Museum | `[museum]` | https://www.metmuseum.org | white bg, Austin serif + Inter | `#c64056` Met Red | **L7 Zen Ink** |

| Rijksmuseum | `[museum]` | https://www.rijksmuseum.nl | custom RijksText, warm gold/amber heritage | gold/amber | **L1 Parchment Warmth** |

| A24 Films | `[film/arts]` | https://a24films.com | warm off-white, film-poster grid | — | **L8 Bone Linen** |

| Awwwards | `[awards]` | https://www.awwwards.com | `#F8F8F8` bg, Inter Tight 300–800 | `#FA5D29` + `#49B3FC` dual | **B4 High Noon** |

| paco.me | `[personal-dev]` | https://paco.me | monochrome, document-like, no accent | — | **L2 Arctic Restraint** |

| Robin Noguier | `[personal-creative]` | https://robin-noguier.com | `#0d0d0d` bg, silka_rm, per-project palette swap | — | **D7 Obsidian Pearl** |

| Dennis Snellenberg | `[personal-creative]` | https://dennissnellenberg.com | near-white/black, multilingual hero, restraint | — | **D7 Obsidian Pearl** |

| Brian Lovin | `[personal-dev]` | https://brianlovin.com | Source Serif 4 + Inter, `42rem` max-width, dark/light | — | **L7 Zen Ink** |

| Lynn Fisher | `[personal-creative]` | https://lynnandtonic.com | user-controlled theme, annual CSS art redesign | — | **L2 Arctic Restraint** |

| ryo.lu | `[personal-dev]` | https://ryo.lu | extreme content clarity, Japanese aesthetic | — | **D1 Linear Void** |

| Perplexity | `[saas][ai]` | https://perplexity.ai | `#1c1c1c` dark, Inter, research-first aesthetic | `#20b2aa` teal-green | **D1 Linear Void** |

| v0.dev | `[saas][dev-tools]` | https://v0.dev | Vercel-family black, monospace accents | `#ededed` text | **D7 Obsidian Pearl** |

| Cal.com | `[saas][open-source]` | https://cal.com | `#101010` dark, Inter, minimal-enterprise | `#6d28d9` violet | **D1 Linear Void** |

| Luma | `[saas][events]` | https://lu.ma | `#f8f8f8` off-white, soft gradients, Inter | `#6c5ce7` purple | **F1 Chalk Mist** |

| Reflect | `[saas][productivity]` | https://reflect.app | `#1a1a2e` deep navy, serif display (Canela) | `#7c6af7` soft violet | **D4 Deep Cobalt** |

| Clerk | `[saas][devtools]` | https://clerk.com | white bg, Inter, component-forward | `#6c47ff` violet | **L5 Slate Cloud** |

| Neon | `[saas][database]` | https://neon.tech | `#0c0c14` near-black, JetBrains Mono | `#00e599` neon green | **D2 Terminal Jade** |

| Resend | `[saas][devtools]` | https://resend.com | warm dark, ABC Favorit, Domaine Display | — | **D7 Obsidian Pearl** |

| Shadcn/ui | `[open-source]` | https://ui.shadcn.com | `#09090b` or white, zinc neutral system | — | **D7 Obsidian Pearl** |

| Brand | Live URL | Max-width | Section rhythm | Signature pattern | |-------|----------|-----------|----------------|-------------------| | Linear / Vercel | https://linear.app · https://vercel.com | 1280px | 96–120px | Hairline dividers,

|-------|----------|-----------|----------------|-------------------| | Linear / Vercel | https://linear.app · https://vercel.com | 1280px | 96–120px | Hairline dividers, no background color blocks | | Stripe | https://stripe.com | 1152px |

| Linear / Vercel | https://linear.app · https://vercel.com | 1280px | 96–120px | Hairline dividers, no background color blocks |

| Stripe | https://stripe.com | 1152px | 80–96px | Diagonal gradient hero, nested feature cards |

| Awwwards | https://www.awwwards.com | `--innerWidth: 1816px` | fluid | Ultra-wide canvas, `clamp()` everywhere |

| Brian Lovin | https://brianlovin.com | `42rem` prose | 16px base | Single-column reading layout |

| Met Museum | https://www.metmuseum.org | clamped wrapper | substantial | Exhibition cards, 1px separator dividers |

| A24 Films | https://a24films.com | full-bleed | generous | Film poster grid = product grid, gallery logic |

| Robin Noguier | https://robin-noguier.com | viewport-relative | 90px header | Per-project full-palette reset, draggable carousel |

| Perplexity | https://perplexity.ai | 1280px | 80px | Centered hero, clean card grid, no horizontal rules |

| Cal.com | https://cal.com | 1152px | 80–96px | Feature grid with app screenshot, minimal nav |

| Anthropic | https://anthropic.com | 1280px | 120–160px | Editorial breathing room, serif + small-cap mix |

| Shadcn/ui | https://ui.shadcn.com | 1400px | 64–80px | Code-first: terminal windows dominate sections |

| Brand | Live URL | Duration | Easing | Hover | Signature move | |-------|----------|----------|--------|-------|----------------| | Linear | https://linear.app | 150ms | `ease-out` | border lighten | Zero page transitions — micro only |

|-------|----------|----------|--------|-------|----------------| | Linear | https://linear.app | 150ms | `ease-out` | border lighten | Zero page transitions — micro only | | Cursor | https://cursor.com | 150ms | `ease` | opacity shift | `f

| Linear | https://linear.app | 150ms | `ease-out` | border lighten | Zero page transitions — micro only |

| Cursor | https://cursor.com | 150ms | `ease` | opacity shift | `fadeSlideUp`, `tilePopIn`, `barGrow` |

| Robinhood | https://robinhood.com | 200–400ms | translate Y + opacity | scale pulse | Bold scale-pulse on accent |

| Invisible Tech | https://invisible.tech | 300–400ms | `ease` | color + opacity | Staggered letter-reveal 0.01s/char |

| Awwwards | https://www.awwwards.com | `0.3s` | cubic | smooth color | Editorial — no transform, color only |

| Robin Noguier | https://robin-noguier.com | `0.2s` | `ease-in-out` | `translateX(4px)` | Grab/grabbing cursor on draggable carousel |

| Base44 | https://base44.com | `0.2–0.6s` | `cubic-bezier(.37,0,.63,1)` | opacity + scale | View transitions: slide + fade |

| Met Museum | https://www.metmuseum.org | `100ms` | all | hover bg Met Red | Snap-fast, no flourish |

| A24 Films | https://a24films.com | subtle | fade-in | opacity only | Restraint: hover opacity, no transforms |

| ryo.lu | https://ryo.lu | minimal | system default | none | Content renders, no performance theater |

| Perplexity | https://perplexity.ai | 200ms | `ease-out` | background tint | Fade-in on mount, no dramatic reveals |

| Framer | https://framer.com | 300–600ms | spring physics | scale + glow | Spring enter, parallax depth on hero |

| Luma | https://lu.ma | 200–300ms | `ease-out` | soft lift + shadow | Soft shadow bloom on card hover |

| Raycast | https://raycast.com | 200ms | `ease-out-expo` | glass edge brighten | Command palette slide-in from center |

| Stripe | https://stripe.com | 200ms | `ease` | card lift | Nested card reveal in feature section |

| Site | URL | Notes | |------|-----|-------| | UC Berkeley | https://www.berkeley.edu/ | Utility nav + hero + audience shortcuts, warm gold brand, dense footer |

|------|-----|-------| | UC Berkeley | https://www.berkeley.edu/ | Utility nav + hero + audience shortcuts, warm gold brand, dense footer | | MIT | https://www.mit.edu/ | Grid-heavy news layout, clean type hierarchy, institutional authority

| UC Berkeley | https://www.berkeley.edu/ | Utility nav + hero + audience shortcuts, warm gold brand, dense footer |

| MIT | https://www.mit.edu/ | Grid-heavy news layout, clean type hierarchy, institutional authority |

| Stanford | https://www.stanford.edu/ | Photography-forward, clean section rhythm, generous whitespace |

| Carnegie Mellon | https://www.cmu.edu/ | Dense information matrix, strong program/department wayfinding |

| Site | URL | Notes | |------|-----|-------| | Luma AI | https://lumalabs.ai/ | Cinematic dark hero, video-forward, premium AI aesthetic |

|------|-----|-------| | Luma AI | https://lumalabs.ai/ | Cinematic dark hero, video-forward, premium AI aesthetic | | Typeless | https://www.typeless.com/ | Focused AI product storytelling, clean feature sections |

| Luma AI | https://lumalabs.ai/ | Cinematic dark hero, video-forward, premium AI aesthetic |

| Typeless | https://www.typeless.com/ | Focused AI product storytelling, clean feature sections |

| Granola | https://www.granola.ai/ | Consumer AI product, warm and approachable tone |

| LongCut | https://www.longcut.ai/ | Emerging AI tool, editorial layout |

| MagicPath | https://www.magicpath.ai/ | Developer-adjacent AI tooling |

| Lovable | https://lovable.dev/ | Vibe-coding product, energetic, expressive |

| Anthropic | https://www.anthropic.com/ | Research-forward, cream warmth, serif + humanist pairing |

| Perplexity | https://www.perplexity.ai/ | Clean search-native UI, minimal chrome, information-first |

| Site | URL | Archetype | Notes | |------|-----|-----------|-------| | Linear | https://linear.app | Obsidian Precision | Hairline dividers, micro-interactions, near-black precision |

|------|-----|-----------|-------| | Linear | https://linear.app | Obsidian Precision | Hairline dividers, micro-interactions, near-black precision | | Vercel | https://vercel.com | Obsidian Precision | Bold black, Geist, full-bleed hero, c

| Linear | https://linear.app | Obsidian Precision | Hairline dividers, micro-interactions, near-black precision |

| Vercel | https://vercel.com | Obsidian Precision | Bold black, Geist, full-bleed hero, clean feature rows |

| Stripe | https://stripe.com | Chromatic Confidence | Diagonal gradient hero, nested feature cards, Söhne type |

| Raycast | https://raycast.com | Terminal Glass | Glass morphism, coral accent, desktop-software feel |

| Resend | https://resend.com | Obsidian Precision | Near-monochrome, typographic restraint, editorial discipline |

| Supabase | https://supabase.com | Terminal Glass | Terminal aesthetic, jade accent, developer-native |

| Framer | https://framer.com | Chromatic Confidence | Spring physics, bold motion, electric gradient |

| Cursor | https://cursor.com | Obsidian Precision | Triple typeface stack, subtle warmth, precision tooling |

| Notion | https://www.notion.so | Warm Editorial | Off-white, document feel, human warmth, no decorative color |

| Arc Browser | https://arc.net | Chromatic Confidence | Expressive gradient, playful personality, distinct brand voice |

| Site | URL | Notes | |------|-----|-------| | Stripe Docs | https://docs.stripe.com/ | Gold standard — sidebar + content split, inline code examples, API reference layout |

|------|-----|-------| | Stripe Docs | https://docs.stripe.com/ | Gold standard — sidebar + content split, inline code examples, API reference layout | | Vercel Docs | https://vercel.com/docs | Dark-default docs, clean sidebar, Geist mono, 

| Stripe Docs | https://docs.stripe.com/ | Gold standard — sidebar + content split, inline code examples, API reference layout |

| Vercel Docs | https://vercel.com/docs | Dark-default docs, clean sidebar, Geist mono, well-structured nav depth |

| Tailwind CSS Docs | https://tailwindcss.com/docs | Functional clarity, excellent search, utility-class inline examples |

| Radix UI | https://www.radix-ui.com/ | Component docs with live preview, restrained color, strong accessibility examples |

| MDN Web Docs | https://developer.mozilla.org/ | Reference-density, browser compatibility tables, no-nonsense authority |

| Clerk Docs | https://clerk.com/docs | Modern developer docs, clean layout, well-organized quickstart flows |

| Site | URL | Notes | |------|-----|-------| | Linear (app) | https://linear.app | Keyboard-first, ultra-compact sidebar, status system, masterclass in data density |

|------|-----|-------| | Linear (app) | https://linear.app | Keyboard-first, ultra-compact sidebar, status system, masterclass in data density | | Retool | https://retool.com | Internal tools marketing + product screenshots — component-heav

| Linear (app) | https://linear.app | Keyboard-first, ultra-compact sidebar, status system, masterclass in data density |

| Retool | https://retool.com | Internal tools marketing + product screenshots — component-heavy, enterprise-dense |

| Metabase | https://www.metabase.com | BI/analytics product, chart-first layout, accessible to non-technical users |

| Grafana | https://grafana.com | Monitoring dashboard, dark-default, time-series focus, complex filter toolbar |

| Posthog | https://posthog.com | Product analytics, clean SaaS marketing + app screenshot composition |

| Site | URL | Notes | |------|-----|-------| | Apple Store | https://www.apple.com/store | Full-bleed product photography, neutral bg to let product pop, minimal chrome |

|------|-----|-------| | Apple Store | https://www.apple.com/store | Full-bleed product photography, neutral bg to let product pop, minimal chrome | | Allbirds | https://www.allbirds.com | Sustainability storytelling, soft palette, material

| Apple Store | https://www.apple.com/store | Full-bleed product photography, neutral bg to let product pop, minimal chrome |

| Allbirds | https://www.allbirds.com | Sustainability storytelling, soft palette, material-forward product presentation |

| Away | https://www.awaytravel.com | Lifestyle-first product shots, generous whitespace, editorial travel narrative |

| Arc'teryx | https://www.arcteryx.com | Technical luxury, dark performance palette, precise grid, no excess decoration |

| Glossier | https://www.glossier.com | Soft pink brand system, community-forward social proof, conversational copy |

| Site | URL | Notes | |------|-----|-------| | Stripe | https://stripe.com | Developer-first fintech, clean and confident, gradient hero, enterprise trust signals |

|------|-----|-------| | Stripe | https://stripe.com | Developer-first fintech, clean and confident, gradient hero, enterprise trust signals | | Mercury | https://mercury.com | Modern banking, warm neutral palette, startup-friendly, restrai

| Stripe | https://stripe.com | Developer-first fintech, clean and confident, gradient hero, enterprise trust signals |

| Mercury | https://mercury.com | Modern banking, warm neutral palette, startup-friendly, restrained color |

| Wise | https://wise.com | International transfer focus, clear fee transparency UI, multi-currency patterns |

| Brex | https://brex.com | Corporate card product, dark precision, enterprise-grade authority |

| Robinhood | https://robinhood.com | Consumer investing, warm dark, neon lime accent, data visualization heavy |

| Site | URL | Notes | |------|-----|-------| | Tailwind CSS | https://tailwindcss.com | Utility-first, clean marketing, excellent docs integration, community-forward |

|------|-----|-------| | Tailwind CSS | https://tailwindcss.com | Utility-first, clean marketing, excellent docs integration, community-forward | | Next.js | https://nextjs.org | Vercel-backed OSS, dark hero, code example prominent, enterpr

| Tailwind CSS | https://tailwindcss.com | Utility-first, clean marketing, excellent docs integration, community-forward |

| Next.js | https://nextjs.org | Vercel-backed OSS, dark hero, code example prominent, enterprise + indie positioning |

| React | https://react.dev | Documentation-forward homepage, blue brand, interactive code examples in hero |

| Vite | https://vitejs.dev | Speed-first messaging, minimal hero, clean type, single strong hook |

| Radix UI | https://www.radix-ui.com | Accessibility-first, restrained palette, component showcase grid |

| shadcn/ui | https://ui.shadcn.com | Copy-paste component library, ultra-minimal, dark-default, developer aesthetic |

| Site | URL | Notes | |------|-----|-------| | The Pudding | https://pudding.cool | Data journalism, scrollytelling, custom per-essay visual systems, editorial boldness |

|------|-----|-------| | The Pudding | https://pudding.cool | Data journalism, scrollytelling, custom per-essay visual systems, editorial boldness | | Substack | https://substack.com | Platform homepage + newsletter template — clean reading

| The Pudding | https://pudding.cool | Data journalism, scrollytelling, custom per-essay visual systems, editorial boldness |

| Substack | https://substack.com | Platform homepage + newsletter template — clean reading layout, subscriber-forward |

| Stratechery | https://stratechery.com | Pure reading-first, minimal chrome, long-form authority, no visual noise |

| Every | https://every.to | AI-era media company, clean editorial grid, multi-author publication layout |

| The Browser Company Blog | https://thebrowser.company/notes/ | Product storytelling essays, conversational editorial, Arc brand voice |

| Site | URL | Notes | |------|-----|-------| | Claude Blog | https://claude.com/blog/auto-mode | Product announcement format, clean reading layout, CTA restraint |

|------|-----|-------| | Claude Blog | https://claude.com/blog/auto-mode | Product announcement format, clean reading layout, CTA restraint | | Linear Changelog | https://linear.app/changelog | Technical release notes, version history, comp

| Claude Blog | https://claude.com/blog/auto-mode | Product announcement format, clean reading layout, CTA restraint |

| Linear Changelog | https://linear.app/changelog | Technical release notes, version history, compact metadata |

| Vercel Blog | https://vercel.com/blog | Developer-focused articles, code block integration |

| Stripe Blog | https://stripe.com/blog | Polished long-form, editorial photography, clear authorship |

| Lenny's Newsletter | https://www.lennysnewsletter.com | Product management essays, clean Substack-based reading layout |

| Site | URL | Notes | |------|-----|-------| | Lenny's Product Pass | https://lennysproductpass.com/ | Offer hub with partner logos, card catalog, urgency, category chips |

|------|-----|-------| | Lenny's Product Pass | https://lennysproductpass.com/ | Offer hub with partner logos, card catalog, urgency, category chips | | Product Hunt | https://www.producthunt.com | Daily launch feed, upvote-based ranking, c

| Lenny's Product Pass | https://lennysproductpass.com/ | Offer hub with partner logos, card catalog, urgency, category chips |

| Product Hunt | https://www.producthunt.com | Daily launch feed, upvote-based ranking, category filters, maker badges |

| Hacker News (public) | https://news.ycombinator.com | Extreme information density, zero decoration, link-list hierarchy |

| AlternativeTo | https://alternativeto.net | Software directory, comparison grid, tag/category filtering |

| Site | URL | Notes | |------|-----|-------| | Things 3 | https://culturedcode.com/things/ | Mac/iOS app landing, clean product screenshots, generous whitespace, calm palette |

|------|-----|-------| | Things 3 | https://culturedcode.com/things/ | Mac/iOS app landing, clean product screenshots, generous whitespace, calm palette | | Bear App | https://bear.app | Notes app, editorial warmth, device mockup integratio

| Things 3 | https://culturedcode.com/things/ | Mac/iOS app landing, clean product screenshots, generous whitespace, calm palette |

| Bear App | https://bear.app | Notes app, editorial warmth, device mockup integration, persona-forward copy |

| Craft | https://www.craft.do | Document app, premium feel, large device mockups, feature section rhythm |

| Fantastical | https://flexibits.com/fantastical | Calendar app, multiple platform screenshots, feature-dense marketing layout |

| Reeder | https://reederapp.com | RSS reader, minimal app marketing, device mockup + copy only, no excess |

| Site | URL | Notes | |------|-----|-------| | Headspace | https://www.headspace.com | Mental wellness, warm illustrated characters, soft color, approachable copy |

|------|-----|-------| | Headspace | https://www.headspace.com | Mental wellness, warm illustrated characters, soft color, approachable copy | | Calm | https://www.calm.com | Sleep + meditation, dark atmospheric hero, nature photography, pr

| Headspace | https://www.headspace.com | Mental wellness, warm illustrated characters, soft color, approachable copy |

| Calm | https://www.calm.com | Sleep + meditation, dark atmospheric hero, nature photography, premium calm palette |

| One Medical | https://www.onemedical.com | Modern primary care, clean clinical + warm hybrid, trust-first layout |

| Whoop | https://www.whoop.com | Performance wearable, dark athletic aesthetic, data visualization hero, sport-forward |

| Site | URL | Notes | |------|-----|-------| | Figma Config | https://config.figma.com | Design conference, bold visual identity, speaker grid, schedule depth |

|------|-----|-------| | Figma Config | https://config.figma.com | Design conference, bold visual identity, speaker grid, schedule depth | | Awwwards Conference | https://conference.awwwards.com | Creative conference, editorial aesthetic, s

| Figma Config | https://config.figma.com | Design conference, bold visual identity, speaker grid, schedule depth |

| Awwwards Conference | https://conference.awwwards.com | Creative conference, editorial aesthetic, speaker-forward layout |

| Next.js Conf | https://nextjs.org/conf | Developer conference, dark hero, speaker lineup, live stream integration |

| Brand New Conference | https://www.underconsideration.com/brandnewconference/ | Design branding event, restrained typographic identity |

| Site | URL | Notes | |------|-----|-------| | Pentagram | https://www.pentagram.com | Iconic design firm, editorial work grid, typographic precision, partner-led brand |

|------|-----|-------| | Pentagram | https://www.pentagram.com | Iconic design firm, editorial work grid, typographic precision, partner-led brand | | Collins | https://www.wearecollins.com | Brand identity studio, bold full-bleed project p

| Pentagram | https://www.pentagram.com | Iconic design firm, editorial work grid, typographic precision, partner-led brand |

| Collins | https://www.wearecollins.com | Brand identity studio, bold full-bleed project presentation, expressive hero |

| Instrument | https://www.instrument.com | Digital product agency, case-study-first grid, restrained palette |

| Fantasy | https://www.fantasy.co | UX/product design studio, cinematic work presentation, dark premium feel |

| Ueno | https://ueno.co | Award-winning agency, playful + precise, distinctive personality in copy |

| Site | URL | Notes | |------|-----|-------| | Saining Xie | https://www.sainingxie.com/ | Clean academic portfolio, typographic restraint, publication grid |

|------|-----|-------| | Saining Xie | https://www.sainingxie.com/ | Clean academic portfolio, typographic restraint, publication grid | | Kaiming He | https://kaiming.me/ | Minimal, content-first, focus on publications and impact |

| Saining Xie | https://www.sainingxie.com/ | Clean academic portfolio, typographic restraint, publication grid |

| Kaiming He | https://kaiming.me/ | Minimal, content-first, focus on publications and impact |

| Angjoo Kanazawa | https://people.eecs.berkeley.edu/~kanazawa/ | Research profile, video/media integration for visual results |

| Alexei Efros | https://people.eecs.berkeley.edu/~efros/ | Dense publication list, academic authority, institutional links |

| Site | URL | Notes | |------|-----|-------| | Robin Noguier | https://robin-noguier.com | Per-project palette reset, draggable carousel, viewport-relative layout |

|------|-----|-------| | Robin Noguier | https://robin-noguier.com | Per-project palette reset, draggable carousel, viewport-relative layout | | Dennis Snellenberg | https://dennissnellenberg.com | Multilingual hero, near-white/black restra

| Robin Noguier | https://robin-noguier.com | Per-project palette reset, draggable carousel, viewport-relative layout |

| Dennis Snellenberg | https://dennissnellenberg.com | Multilingual hero, near-white/black restraint, cutting-edge typography |

| Lynn Fisher | https://lynnandtonic.com | Annual CSS art redesign, user-controlled theme, experimental |

| A24 Films | https://a24films.com | Film poster grid, gallery logic, warm off-white, extreme restraint |

| Site | URL | Notes | |------|-----|-------| | paco.me | https://paco.me | Monochrome, document-like, substance-first, no accent |

|------|-----|-------| | paco.me | https://paco.me | Monochrome, document-like, substance-first, no accent | | Brian Lovin | https://brianlovin.com | Source Serif 4 + Inter, `42rem` max-width, thoughtful dark/light |

| paco.me | https://paco.me | Monochrome, document-like, substance-first, no accent |

| Brian Lovin | https://brianlovin.com | Source Serif 4 + Inter, `42rem` max-width, thoughtful dark/light |

| ryo.lu | https://ryo.lu | Extreme content clarity, Japanese minimalism, zero noise |

| Site | URL | Notes | |------|-----|-------| | The Met Museum | https://www.metmuseum.org | Austin serif + Inter, Met Red hover accent, snap-fast micro-interactions |

|------|-----|-------| | The Met Museum | https://www.metmuseum.org | Austin serif + Inter, Met Red hover accent, snap-fast micro-interactions | | Rijksmuseum | https://www.rijksmuseum.nl | Custom RijksText, warm gold heritage palette, coll

| The Met Museum | https://www.metmuseum.org | Austin serif + Inter, Met Red hover accent, snap-fast micro-interactions |

| Rijksmuseum | https://www.rijksmuseum.nl | Custom RijksText, warm gold heritage palette, collection navigation |

| Smithsonian | https://www.si.edu | Multi-collection navigation, institutional authority, photography-forward |

| Cooper Hewitt | https://www.cooperhewitt.org | Design museum, clean editorial, strong typographic hierarchy |

### 2a. Multi-source fetch (URL inputs only)

npx skills add https://github.com/instantX-research/skills --skill icon-craft

Created by [Haofan Wang](https://haofanwang.github.io/) with Claude Code.

Bash

Bash

2. Use WebFetch to retrieve SVG data from the best match:    - Lucide: `https://unpkg.com/lucide-static/icons/{icon-name}.svg`

2. Use WebFetch to retrieve SVG data from the best match:    - Lucide: `https://unpkg.com/lucide-static/icons/{icon-name}.svg`

- Lucide: `https://unpkg.com/lucide-static/icons/{icon-name}.svg`

- Lucide: `https://unpkg.com/lucide-static/icons/{icon-name}.svg`

- Tabler: `https://unpkg.com/@tabler/icons/icons/outline/{icon-name}.svg`

- Tabler: `https://unpkg.com/@tabler/icons/icons/outline/{icon-name}.svg`

<!-- Inline SVG — stroke attributes match the chosen style archetype --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"

<!-- Inline SVG — stroke attributes match the chosen style archetype --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"

- **Best for:** Developer tools, SaaS, general-purpose - **NPM:** `lucide-react`, `lucide-vue-next`, `lucide-svelte` - **API:** `https://lucide.dev/api/icons` (JSON metadata)

- **Best for:** Developer tools, SaaS, general-purpose - **NPM:** `lucide-react`, `lucide-vue-next`, `lucide-svelte` - **API:** `https://lucide.dev/api/icons` (JSON metadata)

- **NPM:** `lucide-react`, `lucide-vue-next`, `lucide-svelte` - **API:** `https://lucide.dev/api/icons` (JSON metadata) - **Search URL:** `https://lucide.dev/icons/?search=QUERY`

- **NPM:** `lucide-react`, `lucide-vue-next`, `lucide-svelte` - **API:** `https://lucide.dev/api/icons` (JSON metadata) - **Search URL:** `https://lucide.dev/icons/?search=QUERY`

- **API:** `https://lucide.dev/api/icons` (JSON metadata)

- **API:** `https://lucide.dev/api/icons` (JSON metadata)

- **Search URL:** `https://lucide.dev/icons/?search=QUERY`

- **Search URL:** `https://lucide.dev/icons/?search=QUERY`

<svg xmlns="http://www.w3.org/2000/svg"

<svg xmlns="http://www.w3.org/2000/svg"

npx skills add https://github.com/instantX-research/skills --skill web-search

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

| Provider | Env Var | Text | Image | Free Tier | Sign Up | |----------|---------|------|-------|-----------|---------| | **Tavily** (recommended) | `TAVILY_API_KEY` | Yes | Yes | 1,000 credits/month (recurring, no credit card) | [tavily.co

|----------|---------|------|-------|-----------|---------| | **Tavily** (recommended) | `TAVILY_API_KEY` | Yes | Yes | 1,000 credits/month (recurring, no credit card) | [tavily.com](https://tavily.com) | | **SerpAPI** | `SERPAPI_API_KEY` |

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

| **SearXNG** | `SEARXNG_URL` | Yes | Yes | Unlimited (self-hosted, completely free) | [docs.searxng.org](https://docs.searxng.org) |

# Set the URL export SEARXNG_URL=http://localhost:8080

export SEARXNG_URL=http://localhost:8080

| MCP Server | Backend | Install | |------------|---------|---------| | [Brave Search MCP](https://github.com/modelcontextprotocol/servers/tree/main/src/brave-search) | Brave API | Official, supports image/video/news |

|------------|---------|---------| | [Brave Search MCP](https://github.com/modelcontextprotocol/servers/tree/main/src/brave-search) | Brave API | Official, supports image/video/news | | [Tavily MCP](https://github.com/tavily-ai/tavily-mcp) 

| [Brave Search MCP](https://github.com/modelcontextprotocol/servers/tree/main/src/brave-search) | Brave API | Official, supports image/video/news |

| [Tavily MCP](https://github.com/tavily-ai/tavily-mcp) | Tavily API | Official, search + extract + crawl |

| [Exa MCP](https://exa.ai/mcp) | Exa API | Official, semantic search |

| [Serper MCP](https://github.com/marcopesani/mcp-server-serper) | Serper API | Community, full Google SERP |

| [SearXNG MCP](https://github.com/The-AI-Workshops/searxng-mcp-server) | Self-hosted SearXNG | Community, free, 70+ sources |

[Credential-related source omitted]

Get a free API key at [ai.google.dev](https://ai.google.dev/).

Created by [Haofan Wang](https://haofanwang.github.io/) with Claude Code.

Bash

[Credential-related source omitted]

Multiple sub-queries → execute in parallel (`curl ... &` + `wait`). Each sub-query gets its own encoded query + time filters from Step 3.2.

**Read `providers.md`** for the exact curl commands for the detected provider. Look for BOTH text and image sections.

If a curl call fails with a network error or returns HTTP 429 (rate limit) or 5xx (server error):

9. **Download** images with `curl -sL` and `User-Agent` header into the appropriate directory.

### Text validation: - Ensure no HTML artifacts remain in text (`<p>`, `&amp;`, `&#39;`, etc.) - Verify URLs are well-formed (start with `http://` or `https://`)

- Ensure no HTML artifacts remain in text (`<p>`, `&amp;`, `&#39;`, etc.) - Verify URLs are well-formed (start with `http://` or `https://`) - Confirm results are actually relevant to the query (re-read each snippet)

- Verify URLs are well-formed (start with `http://` or `https://`)

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

Get a free API key at [ai.google.dev](https://ai.google.dev/).

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

curl -s "$SEARXNG_URL/search?q=$ENCODED_QUERY&format=json&categories=general&pageno=1&time_range=$TIME_FILTER_RANGE"

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

curl -s "$SEARXNG_URL/search?q=$ENCODED_QUERY&format=json&categories=images&pageno=1"

#!/usr/bin/env python3

[Credential-related source omitted]

img_data = base64.b64decode(img_data)

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

#!/usr/bin/env python3