hermes-agent/website/docs/user-guide/skills/bundled/creative/creative-popular-web-designs.md
Teknium 252d68fd45
docs: deep audit — fix stale config keys, missing commands, and registry drift (#22784)
* docs: deep audit — fix stale config keys, missing commands, and registry drift

Cross-checked ~80 high-impact docs pages (getting-started, reference, top-level
user-guide, user-guide/features) against the live registries:

  hermes_cli/commands.py    COMMAND_REGISTRY (slash commands)
  hermes_cli/auth.py        PROVIDER_REGISTRY (providers)
  hermes_cli/config.py      DEFAULT_CONFIG (config keys)
  toolsets.py               TOOLSETS (toolsets)
  tools/registry.py         get_all_tool_names() (tools)
  python -m hermes_cli.main <subcmd> --help (CLI args)

reference/
- cli-commands.md: drop duplicate hermes fallback row + duplicate section,
  add stepfun/lmstudio to --provider enum, expand auth/mcp/curator subcommand
  lists to match --help output (status/logout/spotify, login, archive/prune/
  list-archived).
- slash-commands.md: add missing /sessions and /reload-skills entries +
  correct the cross-platform Notes line.
- tools-reference.md: drop bogus '68 tools' headline, drop fictional
  'browser-cdp toolset' (these tools live in 'browser' and are runtime-gated),
  add missing 'kanban' and 'video' toolset sections, fix MCP example to use
  the real mcp_<server>_<tool> prefix.
- toolsets-reference.md: list browser_cdp/browser_dialog inside the 'browser'
  row, add missing 'kanban' and 'video' toolset rows, drop the stale
  '38 tools' count for hermes-cli.
- profile-commands.md: add missing install/update/info subcommands, document
  fish completion.
- environment-variables.md: dedupe GMI_API_KEY/GMI_BASE_URL rows (kept the
  one with the correct gmi-serving.com default).
- faq.md: Anthropic/Google/OpenAI examples — direct providers exist (not just
  via OpenRouter), refresh the OpenAI model list.

getting-started/
- installation.md: PortableGit (not MinGit) is what the Windows installer
  fetches; document the 32-bit MinGit fallback.
- installation.md / termux.md: installer prefers .[termux-all] then falls
  back to .[termux].
- nix-setup.md: Python 3.12 (not 3.11), Node.js 22 (not 20); fix invalid
  'nix flake update --flake' invocation.
- updating.md: 'hermes backup restore --state pre-update' doesn't exist —
  point at the snapshot/quick-snapshot flow; correct config key
  'updates.pre_update_backup' (was 'update.backup').

user-guide/
- configuration.md: api_max_retries default 3 (not 2); display.runtime_footer
  is the real key (not display.runtime_metadata_footer); checkpoints defaults
  enabled=false / max_snapshots=20 (not true / 50).
- configuring-models.md: 'hermes model list' / 'hermes model set ...' don't
  exist — hermes model is interactive only.
- tui.md: busy_indicator -> tui_status_indicator with values
  kaomoji|emoji|unicode|ascii (not kawaii|minimal|dots|wings|none).
- security.md: SSH backend keys (TERMINAL_SSH_HOST/USER/KEY) live in .env,
  not config.yaml.
- windows-wsl-quickstart.md: there is no 'hermes api' subcommand — the
  OpenAI-compatible API server runs inside hermes gateway.

user-guide/features/
- computer-use.md: approvals.mode (not security.approval_level); fix broken
  ./browser-use.md link to ./browser.md.
- fallback-providers.md: top-level fallback_providers (not
  model.fallback_providers); the picker is subcommand-based, not modal.
- api-server.md: API_SERVER_* are env vars — write to per-profile .env,
  not 'hermes config set' which targets YAML.
- web-search.md: drop web_crawl as a registered tool (it isn't); deep-crawl
  modes are exposed through web_extract.
- kanban.md: failure_limit default is 2, not '~5'.
- plugins.md: drop hard-coded '33 providers' count.
- honcho.md: fix unclosed quote in echo HONCHO_API_KEY snippet; document
  that 'hermes honcho' subcommand is gated on memory.provider=honcho;
  reconcile subcommand list with actual --help output.
- memory-providers.md: legacy 'hermes honcho setup' redirect documented.

Verified via 'npm run build' — site builds cleanly; broken-link count went
from 149 to 146 (no regressions, fixed a few in passing).

* docs: round 2 audit fixes + regenerate skill catalogs

Follow-up to the previous commit on this branch:

Round 2 manual fixes:
- quickstart.md: KIMI_CODING_API_KEY mentioned alongside KIMI_API_KEY;
  voice-mode and ACP install commands rewritten — bare 'pip install ...'
  doesn't work for curl-installed setups (no pip on PATH, not in repo
  dir); replaced with 'cd ~/.hermes/hermes-agent && uv pip install -e
  ".[voice]"'. ACP already ships in [all] so the curl install includes it.
- cli.md / configuration.md: 'auxiliary.compression.model' shown as
  'google/gemini-3-flash-preview' (the doc's own claimed default);
  actual default is empty (= use main model). Reworded as 'leave empty
  (default) or pin a cheap model'.
- built-in-plugins.md: added the bundled 'kanban/dashboard' plugin row
  that was missing from the table.

Regenerated skill catalogs:
- ran website/scripts/generate-skill-docs.py to refresh all 163 per-skill
  pages and both reference catalogs (skills-catalog.md,
  optional-skills-catalog.md). This adds the entries that were genuinely
  missing — productivity/teams-meeting-pipeline (bundled),
  optional/finance/* (entire category — 7 skills:
  3-statement-model, comps-analysis, dcf-model, excel-author, lbo-model,
  merger-model, pptx-author), creative/hyperframes,
  creative/kanban-video-orchestrator, devops/watchers,
  productivity/shop-app, research/searxng-search,
  apple/macos-computer-use — and rewrites every other per-skill page from
  the current SKILL.md. Most diffs are tiny (one line of refreshed
  metadata).

Validation:
- 'npm run build' succeeded.
- Broken-link count moved 146 -> 155 — the +9 are zh-Hans translation
  shells that lag every newly-added skill page (pre-existing pattern).
  No regressions on any en/ page.
2026-05-09 13:19:51 -07:00

9.9 KiB

title sidebar_label description
Popular Web Designs — 54 real design systems (Stripe, Linear, Vercel) as HTML/CSS Popular Web Designs 54 real design systems (Stripe, Linear, Vercel) as HTML/CSS

{/* This page is auto-generated from the skill's SKILL.md by website/scripts/generate-skill-docs.py. Edit the source SKILL.md, not this page. */}

Popular Web Designs

54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

Skill metadata

Source Bundled (installed by default)
Path skills/creative/popular-web-designs
Version 1.0.0
Author Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md)
License MIT
Platforms linux, macos, windows

Reference: full SKILL.md

:::info The following is the complete skill definition that Hermes loads when this skill is triggered. This is what the agent sees as instructions when the skill is active. :::

Popular Web Designs

54 real-world design systems ready for use when generating HTML/CSS. Each template captures a site's complete visual language: color palette, typography hierarchy, component styles, spacing system, shadows, responsive behavior, and practical agent prompts with exact CSS values.

  • claude-design — use for the design process and taste (scoping a brief, producing variants, verifying a local HTML artifact, avoiding AI-design slop). Pair it with this skill when the user wants a thoughtfully-designed page styled after a known brand: claude-design drives the workflow, this skill supplies the visual vocabulary.
  • design-md — use when the deliverable is a formal DESIGN.md token spec file, not a rendered artifact.

How to Use

  1. Pick a design from the catalog below
  2. Load it: skill_view(name="popular-web-designs", file_path="templates/<site>.md")
  3. Use the design tokens and component specs when generating HTML
  4. Pair with the generative-widgets skill to serve the result via cloudflared tunnel

Each template includes a Hermes Implementation Notes block at the top with:

  • CDN font substitute and Google Fonts <link> tag (ready to paste)
  • CSS font-family stacks for primary and monospace
  • Reminders to use write_file for HTML creation and browser_vision for verification

HTML Generation Pattern

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <!-- Paste the Google Fonts <link> from the template's Hermes notes -->
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    /* Apply the template's color palette as CSS custom properties */
    :root {
      --color-bg: #ffffff;
      --color-text: #171717;
      --color-accent: #533afd;
      /* ... more from template Section 2 */
    }
    /* Apply typography from template Section 3 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--color-text);
      background: var(--color-bg);
    }
    /* Apply component styles from template Section 4 */
    /* Apply layout from template Section 5 */
    /* Apply shadows from template Section 6 */
  </style>
</head>
<body>
  <!-- Build using component specs from the template -->
</body>
</html>

Write the file with write_file, serve with the generative-widgets workflow (cloudflared tunnel), and verify the result with browser_vision to confirm visual accuracy.

Font Substitution Reference

Most sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts substitute that preserves the design's character. Common mappings:

Proprietary Font CDN Substitute Character
Geist / Geist Sans Geist (on Google Fonts) Geometric, compressed tracking
Geist Mono Geist Mono (on Google Fonts) Clean monospace, ligatures
sohne-var (Stripe) Source Sans 3 Light weight elegance
Berkeley Mono JetBrains Mono Technical monospace
Airbnb Cereal VF DM Sans Rounded, friendly geometric
Circular (Spotify) DM Sans Geometric, warm
figmaSans Inter Clean humanist
Pin Sans (Pinterest) DM Sans Friendly, rounded
NVIDIA-EMEA Inter (or Arial system) Industrial, clean
CoinbaseDisplay/Sans DM Sans Geometric, trustworthy
UberMove DM Sans Bold, tight
HashiCorp Sans Inter Enterprise, neutral
waldenburgNormal (Sanity) Space Grotesk Geometric, slightly condensed
IBM Plex Sans/Mono IBM Plex Sans/Mono Available on Google Fonts
Rubik (Sentry) Rubik Available on Google Fonts

When a template's CDN font matches the original (Inter, IBM Plex, Rubik, Geist), no substitution loss occurs. When a substitute is used (DM Sans for Circular, Source Sans 3 for sohne-var), follow the template's weight, size, and letter-spacing values closely — those carry more visual identity than the specific font face.

Design Catalog

AI & Machine Learning

Template Site Style
claude.md Anthropic Claude Warm terracotta accent, clean editorial layout
cohere.md Cohere Vibrant gradients, data-rich dashboard aesthetic
elevenlabs.md ElevenLabs Dark cinematic UI, audio-waveform aesthetics
minimax.md Minimax Bold dark interface with neon accents
mistral.ai.md Mistral AI French-engineered minimalism, purple-toned
ollama.md Ollama Terminal-first, monochrome simplicity
opencode.ai.md OpenCode AI Developer-centric dark theme, full monospace
replicate.md Replicate Clean white canvas, code-forward
runwayml.md RunwayML Cinematic dark UI, media-rich layout
together.ai.md Together AI Technical, blueprint-style design
voltagent.md VoltAgent Void-black canvas, emerald accent, terminal-native
x.ai.md xAI Stark monochrome, futuristic minimalism, full monospace

Developer Tools & Platforms

Template Site Style
cursor.md Cursor Sleek dark interface, gradient accents
expo.md Expo Dark theme, tight letter-spacing, code-centric
linear.app.md Linear Ultra-minimal dark-mode, precise, purple accent
lovable.md Lovable Playful gradients, friendly dev aesthetic
mintlify.md Mintlify Clean, green-accented, reading-optimized
posthog.md PostHog Playful branding, developer-friendly dark UI
raycast.md Raycast Sleek dark chrome, vibrant gradient accents
resend.md Resend Minimal dark theme, monospace accents
sentry.md Sentry Dark dashboard, data-dense, pink-purple accent
supabase.md Supabase Dark emerald theme, code-first developer tool
superhuman.md Superhuman Premium dark UI, keyboard-first, purple glow
vercel.md Vercel Black and white precision, Geist font system
warp.md Warp Dark IDE-like interface, block-based command UI
zapier.md Zapier Warm orange, friendly illustration-driven

Infrastructure & Cloud

Template Site Style
clickhouse.md ClickHouse Yellow-accented, technical documentation style
composio.md Composio Modern dark with colorful integration icons
hashicorp.md HashiCorp Enterprise-clean, black and white
mongodb.md MongoDB Green leaf branding, developer documentation focus
sanity.md Sanity Red accent, content-first editorial layout
stripe.md Stripe Signature purple gradients, weight-300 elegance

Design & Productivity

Template Site Style
airtable.md Airtable Colorful, friendly, structured data aesthetic
cal.md Cal.com Clean neutral UI, developer-oriented simplicity
clay.md Clay Organic shapes, soft gradients, art-directed layout
figma.md Figma Vibrant multi-color, playful yet professional
framer.md Framer Bold black and blue, motion-first, design-forward
intercom.md Intercom Friendly blue palette, conversational UI patterns
miro.md Miro Bright yellow accent, infinite canvas aesthetic
notion.md Notion Warm minimalism, serif headings, soft surfaces
pinterest.md Pinterest Red accent, masonry grid, image-first layout
webflow.md Webflow Blue-accented, polished marketing site aesthetic

Fintech & Crypto

Template Site Style
coinbase.md Coinbase Clean blue identity, trust-focused, institutional feel
kraken.md Kraken Purple-accented dark UI, data-dense dashboards
revolut.md Revolut Sleek dark interface, gradient cards, fintech precision
wise.md Wise Bright green accent, friendly and clear

Enterprise & Consumer

Template Site Style
airbnb.md Airbnb Warm coral accent, photography-driven, rounded UI
apple.md Apple Premium white space, SF Pro, cinematic imagery
bmw.md BMW Dark premium surfaces, precise engineering aesthetic
ibm.md IBM Carbon design system, structured blue palette
nvidia.md NVIDIA Green-black energy, technical power aesthetic
spacex.md SpaceX Stark black and white, full-bleed imagery, futuristic
spotify.md Spotify Vibrant green on dark, bold type, album-art-driven
uber.md Uber Bold black and white, tight type, urban energy

Choosing a Design

Match the design to the content:

  • Developer tools / dashboards: Linear, Vercel, Supabase, Raycast, Sentry
  • Documentation / content sites: Mintlify, Notion, Sanity, MongoDB
  • Marketing / landing pages: Stripe, Framer, Apple, SpaceX
  • Dark mode UIs: Linear, Cursor, ElevenLabs, Warp, Superhuman
  • Light / clean UIs: Vercel, Stripe, Notion, Cal.com, Replicate
  • Playful / friendly: PostHog, Figma, Lovable, Zapier, Miro
  • Premium / luxury: Apple, BMW, Stripe, Superhuman, Revolut
  • Data-dense / dashboards: Sentry, Kraken, Cohere, ClickHouse
  • Monospace / terminal aesthetic: Ollama, OpenCode, x.ai, VoltAgent