* 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.
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.
Related design skills
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-designdrives 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
- Pick a design from the catalog below
- Load it:
skill_view(name="popular-web-designs", file_path="templates/<site>.md") - Use the design tokens and component specs when generating HTML
- Pair with the
generative-widgetsskill 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_filefor HTML creation andbrowser_visionfor 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 |
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