Neura Market Design System Templates Reference

Overview

This skill provides 54 real-world design system templates for generating HTML and CSS artifacts. Each template contains a complete visual language covering color, typography, components, spacing, shadows, and responsive behavior, along with agent prompts that include exact CSS values. Use these templates to apply a known brand's visual language to new HTML pages quickly.

When to Use

When generating a thoughtfully-designed HTML page styled after a known brand, paired with the claude-design skill for process and taste.
When the deliverable is a formal DESIGN.md token spec file, paired with the design-md skill.
When you need to quickly apply a complete visual language from a popular website to a new HTML artifact.

Prerequisites

Access to the popular-web-designs skill with the 54 template files.
Ability to use skill_view to load templates.
Ability to use write_file to create HTML files.
Access to the generative-widgets skill for serving via cloudflared tunnel.
Ability to use browser_vision for visual verification.
Optional: claude-design skill for design process and taste when creating a page styled after a known brand.
Optional: design-md skill when the deliverable is a formal DESIGN.md token spec file.

Capabilities

Provides 54 design templates covering AI/ML, developer tools, infrastructure, design/productivity, fintech/crypto, and enterprise/consumer categories.
Each template includes a Hermes Implementation Notes block with CDN font substitute, Google Fonts <link> tag, CSS font-family stacks for primary and monospace, and reminders to use write_file and browser_vision.
Includes a font substitution reference table mapping proprietary fonts to Google Fonts substitutes with character descriptions.
Provides an HTML generation pattern with placeholders for Google Fonts link, CSS custom properties for color palette, typography, component styles, layout, and shadows.
Includes a design catalog organized by category with template filename, site name, and style description.
Provides guidance for choosing a design based on content type (developer tools, documentation, marketing, dark mode, light/clean, playful, premium, data-dense, monospace).

Parameters

Parameter	Meaning	Required Value
`skill_view name`	The name of the skill to use for loading a template	Always `"popular-web-designs"`
`skill_view file_path`	The path to the specific template file within the skill	Must be `"templates/.md"` where the filename is one from the catalog (e.g., `"claude.md"`, `"vercel.md"`)
`template filename`	The specific design template to load, chosen from the catalog	Must match one of the 54 filenames listed in the catalog tables

Procedures

Use a Design Template to Generate HTML

Pick a design from the catalog below.
Load it: skill_view(name="popular-web-designs", file_path="templates/.md")
Use the design tokens and component specs when generating HTML.
Pair with the generative-widgets skill to serve the result via cloudflared tunnel.
Write the file with write_file.
Serve with the generative-widgets workflow (cloudflared tunnel).
Verify the result with browser_vision to confirm visual accuracy.

Generate HTML Using the Provided Pattern

Create an HTML document with <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">.
Add a <title> with the page title.
Paste the Google Fonts <link> from the template's Hermes notes.
In a <style> block, apply the template's color palette as CSS custom properties under :root.
Apply typography from the template's Section 3: set body font-family, color, and background using the custom properties.
Apply component styles from the template's Section 4.
Apply layout from the template's Section 5.
Apply shadows from the template's Section 6.
Build the page body using component specs from the template.

HTML Generation Pattern

The following code block shows the exact structure you must use when generating HTML from a template. Every element must be present.

<!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>

Design Catalog

The following tables list all 54 templates organized by category. Each entry shows the template filename and the site it represents.

AI / ML

Template Filename	Site
`claude.md`	Claude
`cohere.md`	Cohere
`elevenlabs.md`	ElevenLabs
`minimax.md`	MiniMax
`mistral.ai.md`	Mistral AI
`ollama.md`	Ollama
`opencode.ai.md`	OpenCode
`replicate.md`	Replicate
`runwayml.md`	RunwayML
`together.ai.md`	Together AI
`voltagent.md`	VoltAgent
`x.ai.md`	x.ai

Developer Tools

Template Filename	Site
`cursor.md`	Cursor
`expo.md`	Expo
`linear.app.md`	Linear
`lovable.md`	Lovable
`mintlify.md`	Mintlify
`posthog.md`	PostHog
`raycast.md`	Raycast
`resend.md`	Resend
`sentry.md`	Sentry
`supabase.md`	Supabase
`superhuman.md`	Superhuman
`vercel.md`	Vercel
`warp.md`	Warp
`zapier.md`	Zapier

Infrastructure

Template Filename	Site
`clickhouse.md`	ClickHouse
`composio.md`	Composio
`hashicorp.md`	HashiCorp
`mongodb.md`	MongoDB
`sanity.md`	Sanity
`stripe.md`	Stripe

Design / Productivity

Template Filename	Site
`airtable.md`	Airtable
`cal.md`	Cal.com
`clay.md`	Clay
`figma.md`	Figma
`framer.md`	Framer
`intercom.md`	Intercom
`miro.md`	Miro
`notion.md`	Notion
`pinterest.md`	Pinterest
`webflow.md`	Webflow

Fintech / Crypto

Template Filename	Site
`coinbase.md`	Coinbase
`kraken.md`	Kraken
`revolut.md`	Revolut
`wise.md`	Wise

Enterprise / Consumer

Template Filename	Site
`airbnb.md`	Airbnb
`apple.md`	Apple
`bmw.md`	BMW
`ibm.md`	IBM
`nvidia.md`	NVIDIA
`spacex.md`	SpaceX
`spotify.md`	Spotify
`uber.md`	Uber

Choosing a Design by Content Type

Developer tool dashboard: Linear, Vercel, Supabase, Raycast, or Sentry templates.
Documentation or content site: Mintlify, Notion, Sanity, or MongoDB templates.
Marketing or landing page: Stripe, Framer, Apple, or SpaceX templates.
Dark mode UI: Linear, Cursor, ElevenLabs, Warp, or Superhuman templates.
Light or clean UI: Vercel, Stripe, Notion, Cal.com, or Replicate templates.
Playful or friendly design: PostHog, Figma, Lovable, Zapier, or Miro templates.
Premium or luxury design: Apple, BMW, Stripe, Superhuman, or Revolut templates.
Data-dense or dashboard design: Sentry, Kraken, Cohere, or ClickHouse templates.
Monospace or terminal aesthetic: Ollama, OpenCode, x.ai, or VoltAgent templates.

Constraints and Caveats

Most sites use proprietary fonts unavailable via CDN; each template maps to a Google Fonts substitute that preserves the design's character.
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.
The claude-design skill is for design process and taste; 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.
The design-md skill is for when the deliverable is a formal DESIGN.md token spec file, not a rendered artifact.
Each template includes a Hermes Implementation Notes block at the top with CDN font substitute, Google Fonts <link> tag, CSS font-family stacks, and reminders.
The HTML generation pattern must include the exact structure shown: DOCTYPE, html lang, meta tags, title, Google Fonts link, style block with :root custom properties, body font-family/color/background, component styles, layout, shadows.

Failure Modes

Omitting the Google Fonts <link> tag will cause the font substitution to fail, potentially breaking the design's character.
Not following the template's weight, size, and letter-spacing values closely when using a font substitute will lose visual identity.
Skipping browser_vision verification may result in visual inaccuracies going undetected.
Using the wrong template filename will load an incorrect design system.
Not pairing with generative-widgets skill will prevent serving the result via cloudflared tunnel.

Popular Web Designs: 54 Real-World HTML/CSS Templates for Hermes Agent