ling/hermes-agent
1
0
Fork 0
mirror of https://github.com/NousResearch/hermes-agent.git synced 2026-05-03 17:27:37 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
a7fb79efb219d9d473bede1371ce53e830bad42e
hermes-agent/website/docs/user-guide/skills/bundled/creative/creative-popular-web-designs.md
Teknium 289cc47631 docs: resync reference, user-guide, developer-guide, and messaging pages against code (#17738) 
Broad drift audit against origin/main (b52b63396).

Reference pages (most user-visible drift):
- slash-commands: add /busy, /curator, /footer, /indicator, /redraw, /steer
  that were missing; drop non-existent /terminal-setup; fix /q footnote
  (resolves to /queue, not /quit); extend CLI-only list with all 24
  CLI-only commands in the registry
- cli-commands: add dedicated sections for hermes curator / fallback /
  hooks (new subcommands not previously documented); remove stale
  hermes honcho standalone section (the plugin registers dynamically
  via hermes memory); list curator/fallback/hooks in top-level table;
  fix completion to include fish
- toolsets-reference: document the real 52-toolset count; split browser
  vs browser-cdp; add discord / discord_admin / spotify / yuanbao;
  correct hermes-cli tool count from 36 to 38; fix misleading claim
  that hermes-homeassistant adds tools (it's identical to hermes-cli)
- tools-reference: bump tool count 55 -> 68; add 7 Spotify, 5 Yuanbao,
  2 Discord toolsets; move browser_cdp/browser_dialog to their own
  browser-cdp toolset section
- environment-variables: add 40+ user-facing HERMES_* vars that were
  undocumented (--yolo, --accept-hooks, --ignore-*, inference model
  override, agent/stream/checkpoint timeouts, OAuth trace, per-platform
  batch tuning for Telegram/Discord/Matrix/Feishu/WeCom, cron knobs,
  gateway restart/connect timeouts); dedupe the Cron Scheduler section;
  replace stale QQ_SANDBOX with QQ_PORTAL_HOST

User-guide (top level):
- cli.md: compression preserves last 20 turns, not 4 (protect_last_n: 20)
- configuration.md: display.platforms is the canonical per-platform
  override key; tool_progress_overrides is deprecated and auto-migrated
- profiles.md: model.default is the config key, not model.model
- sessions.md: CLI/TUI session IDs use 6-char hex, gateway uses 8
- checkpoints-and-rollback.md: destructive-command list now matches
  _DESTRUCTIVE_PATTERNS (adds rmdir, cp, install, dd)
- docker.md: the container runs as non-root hermes (UID 10000) via
  gosu; fix install command (uv pip); add missing --insecure on the
  dashboard compose example (required for non-loopback bind)
- security.md: systemctl danger pattern also matches 'restart'
- index.md: built-in tool count 47 -> 68
- integrations/index.md: 6 STT providers, 8 memory providers
- integrations/providers.md: drop fictional dashscope/qwen aliases

Features:
- overview.md: 9 image models (not 8), 9 TTS providers (not 5),
  8 memory providers (Supermemory was missing)
- tool-gateway.md: 9 image models
- tools.md: extend common-toolsets list with search / messaging /
  spotify / discord / debugging / safe
- fallback-providers.md: add 6 real providers from PROVIDER_REGISTRY
  (lmstudio, kimi-coding-cn, stepfun, alibaba-coding-plan,
  tencent-tokenhub, azure-foundry)
- plugins.md: Available Hooks table now includes on_session_finalize,
  on_session_reset, subagent_stop
- built-in-plugins.md: add the 7 bundled plugins the page didn't
  mention (spotify, google_meet, three image_gen providers, two
  dashboard examples)
- web-dashboard.md: add --insecure and --tui flags
- cron.md: hermes cron create takes positional schedule/prompt, not
  flags

Messaging:
- telegram.md: TELEGRAM_WEBHOOK_SECRET is now REQUIRED when
  TELEGRAM_WEBHOOK_URL is set (gateway refuses to start without it
  per GHSA-3vpc-7q5r-276h). Biggest user-visible drift in the batch.
- discord.md: HERMES_DISCORD_TEXT_BATCH_SPLIT_DELAY_SECONDS default
  is 2.0, not 0.1
- dingtalk.md: document DINGTALK_REQUIRE_MENTION /
  FREE_RESPONSE_CHATS / MENTION_PATTERNS / HOME_CHANNEL /
  ALLOW_ALL_USERS that the adapter supports
- bluebubbles.md: drop fictional BLUEBUBBLES_SEND_READ_RECEIPTS env
  var; the setting lives in platforms.bluebubbles.extra only
- qqbot.md: drop dead QQ_SANDBOX; add real QQ_PORTAL_HOST and
  QQ_GROUP_ALLOWED_USERS
- wecom-callback.md: replace 'hermes gateway start' (service-only)
  with 'hermes gateway' for first-time setup

Developer-guide:
- architecture.md: refresh tool/toolset counts (61/52), terminal
  backend count (7), line counts for run_agent.py (~13.7k), cli.py
  (~11.5k), main.py (~10.4k), setup.py (~3.5k), gateway/run.py
  (~12.2k), mcp_tool.py (~3.1k); add yuanbao adapter, bump platform
  adapter count 18 -> 20
- agent-loop.md: run_agent.py line count 10.7k -> 13.7k
- tools-runtime.md: add vercel_sandbox backend
- adding-tools.md: remove stale 'Discovery import added to
  model_tools.py' checklist item (registry auto-discovery)
- adding-platform-adapters.md: mark send_typing / get_chat_info as
  concrete base methods; only connect/disconnect/send are abstract
- acp-internals.md: ACP sessions now persist to SessionDB
  (~/.hermes/state.db); acp.run_agent call uses
  use_unstable_protocol=True
- cron-internals.md: gateway runs scheduler in a dedicated background
  thread via _start_cron_ticker, not on a maintenance cycle; locking
  is cross-process via fcntl.flock (Unix) / msvcrt.locking (Windows)
- gateway-internals.md: gateway/run.py ~12k lines
- provider-runtime.md: cron DOES support fallback (run_job reads
  fallback_providers from config)
- session-storage.md: SCHEMA_VERSION = 11 (not 9); add migrations
  10 and 11 (trigram FTS, inline-mode FTS5 re-index); add
  api_call_count column to Sessions DDL; document messages_fts_trigram
  and state_meta in the architecture tree
- context-compression-and-caching.md: remove the obsolete 'context
  pressure warnings' section (warnings were removed for causing
  models to give up early)
- context-engine-plugin.md: compress() signature now includes
  focus_topic param
- extending-the-cli.md: _build_tui_layout_children signature now
  includes model_picker_widget; add to default layout

Also fixed three pre-existing broken links/anchors the build warned
about (docker.md -> api-server.md, yuanbao.md -> cron-jobs.md and
tips#background-tasks, nix-setup.md -> #container-aware-cli).

Regenerated per-skill pages via website/scripts/generate-skill-docs.py
so catalog tables and sidebar are consistent with current SKILL.md
frontmatter.

docusaurus build: clean, no broken links or anchors.
2026-04-29 20:55:59 -07:00

9.9 KiB
Raw Blame History

title, sidebar_label, description
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

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-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
Reference in New Issue View Git Blame Copy Permalink