Alcheon

Name: Alcheon
Author: use-alcheon

@use-alcheon

About Alcheon

Alcheon is an MCP server that gives AI coding agents access to a curated library of 100+ analyzed real-world design systems, letting them recommend reference sites, synthesize design briefs with spacing and color tokens, and generate section-level UI guidance — so AI-built interf

Basic information

Config

Add this server to your MCP-compatible client using the configuration below.

{
  "mcpServers": {
    "alcheon": {
      "url": "https://api.alcheon.dev/mcp",
      "type": "http"
    }
  }
}

Tools

[TIER 1 — DISCOVERY] Lists all scraped websites in the data store as a summary table. WHEN TO USE: The user asks 'what sites do you have?' or you need to verify a slug exists before passing it to another tool. WHEN NOT TO USE: The user describes a project and wants recommendations — use recommend_sites instead. The user wants to filter by aesthetic/color/industry — use search_sites instead. OUTPUT: Table of slugs, URLs, aesthetic families, color/gradient counts, available analyses. NEXT STEP: Pass interesting slugs to get_site_overview (to research one site) or recommend_sites → synthesize_brief (to start building). --- TOOL FLOW GUIDE --- This server has 9 tools organized in 3 tiers: TIER 1 — DISCOVERY (find sites): list_sites, search_sites, recommend_sites TIER 2 — RESEARCH (understand sites): get_site_overview, get_component_examples, get_layout_blueprint TIER 3 — GENERATION (build things): synthesize_brief, get_section_inspiration + scrape_site (add new sites to the store) RECOMMENDED FLOW FOR BUILDING A UI: 1. recommend_sites → get site slugs that match the project 2. synthesize_brief → get compact directive brief + CSS :root{} token set 3. Implement HTML+CSS using the directive brief as a spec 4. Use get_section_inspiration for deeper guidance on any specific section RESEARCH FLOW (exploring first): search_sites/list_sites → get_site_overview → get_component_examples → synthesize_brief or get_section_inspiration

[TIER 2 — RESEARCH] Returns the full design DNA breakdown for ONE specific site. WHEN TO USE: The user asks 'show me what Stripe's design looks like' or 'what fonts does Linear use?' — i.e. they want to inspect a specific site's design details before deciding to use it. WHEN NOT TO USE: The user wants to BUILD something — use synthesize_brief (for a full page) or get_section_inspiration (for a specific section) instead. This tool is for research, not generation. OUTPUT: Aesthetic family, colors, gradients, typography, spacing, sections, components, content strategy, responsive behavior. NEXT STEP: Pass the slug to synthesize_brief (with others) to generate a design brief and token set.

[UTILITY] Scrapes a new website and adds it to the data store via the 8-step Design DNA pipeline. Takes 2-4 minutes. WHEN TO USE: The user provides a URL that is not already in the data store (check with list_sites first). WHEN NOT TO USE: The site is already scraped — skip straight to synthesize_brief or get_site_overview. OUTPUT: Confirmation + full site overview. The site is then available for all other tools. NEXT STEP: Use the new slug in synthesize_brief or get_site_overview.

[TIER 3 — GENERATION] PRIMARY TOOL. Generates a full-page design brief + CSS token set by synthesizing inspiration from 1-10 reference sites. Call this FIRST when building a UI. It produces the design system (tokens) that all other generation tools build on. Two modes: (A) NEW DESIGN — omit existingTokens. Generates everything: creative direction, NEW color palette, typography, spacing, section architecture, components, responsive directives, and a ready-to-paste :root {} CSS token set including COMPONENT-LEVEL tokens (--card-padding, --card-radius, --card-shadow, --btn-padding-x/y, --btn-radius, --btn-primary-bg/text, --hero-min-height, --section-padding-y, --badge-radius, --icon-size-md, --ease-default, --duration-standard, --transition-default, etc.). (B) EXTEND EXISTING DESIGN — pass the user's current CSS custom properties via existingTokens. The brief will PRESERVE their colors/fonts/spacing and focus on layout, section architecture, component patterns, and content strategy for the new page. Use mode B when the user says things like 'I already have a landing page, now I need a pricing page in the same style' or 'keep my existing design system'. To get the user's existing tokens: read their CSS file for :root { --var: value } declarations, or ask them to paste it. COMPONENT LIBRARY SUPPORT: The token set outputs every color in both hex and HSL format (space-separated "H S% L%"), plus semantic role aliases (--color-card, --color-muted, --color-destructive, etc.) and a .dark {} section. This makes the output directly mappable to any component library (shadcn/ui, Radix, Chakra UI, Mantine, DaisyUI, Park UI, etc.). WHEN NOT TO USE: The user only needs a specific section (use get_section_inspiration) or just wants to browse/compare sites (use get_site_overview, search_sites, or get_component_examples). PREREQUISITE: You need site slugs. If the user hasn't specified sites, call recommend_sites first to get the best matches. THEME DETECTION: If working on an existing project, read the user's main CSS or global stylesheet BEFORE calling this tool. Look for --color-background, body { background }, or Tailwind dark: classes to detect light vs dark theme, then pass it as the theme param. This prevents the brief from generating a mismatched palette. NEXT STEP: With the token set in hand, implement each section's HTML+CSS using the directive brief as a spec. Use get_section_inspiration for deeper guidance on any specific section before implementing it. ICON RULE — NON-NEGOTIABLE: When implementing any UI based on this brief, ALL icons must be inline SVG (e.g. Lucide Icons or Heroicons with fill="none" stroke="currentColor"). NEVER use emoji characters (🔒 📊 🎯 🔗 🏠 etc.) as icons or UI elements — not in feature tiles, security sections, transaction rows, notification badges, or anywhere else. The brief will contain a '# Icon Implementation' section that reinforces this rule.

[TIER 1 — DISCOVERY] AI-powered: recommends the best 3-5 sites from the data store for a given project description. WHEN TO USE: The user describes what they want to build but hasn't specified which reference sites to use. This is typically the FIRST tool to call in a design workflow — its output (site slugs) feeds directly into synthesize_brief. WHEN NOT TO USE: The user already named specific sites (go straight to synthesize_brief). The user wants to filter by specific criteria like 'dark theme' or 'uses Inter font' — use search_sites instead. OUTPUT: Ranked list of site slugs + one-sentence rationale for each. CONTRAST MODE: Pass contrast: true when synthesize_brief fired a repetition warning, or when the user wants something unexpected. Returns a deliberately opposing site pair + a named contrast axis to pass to synthesize_brief. NEXT STEP: Pass the recommended slugs to synthesize_brief to generate a design brief + CSS token set.

[TIER 2 — RESEARCH] Returns RAW examples of a specific component/section type from across all scraped sites — no AI synthesis. WHEN TO USE: The user wants to SEE how real sites implement a specific component — for comparison and research. E.g. 'show me how other sites do their pricing tables' or 'what do navigation bars look like across these sites?' This is a RESEARCH tool — it returns prose descriptions for the user to browse and compare. WHEN NOT TO USE: The user wants an AI-DESIGNED recommendation for their specific project — use get_section_inspiration or synthesize_brief instead. OUTPUT: List of matching components/sections with layout details, colors, fonts, gradients from each site. NEXT STEP: Once the user picks a direction, use get_section_inspiration for a targeted brief or synthesize_brief for a full page.

[TIER 1 — DISCOVERY] Filter the site catalog by specific, structured criteria: aesthetic style, color tone, industry, font, gradients. WHEN TO USE: The user wants to narrow down sites by concrete attributes. E.g. 'show me all dark-themed SaaS sites' or 'which sites use the Inter font?' or 'sites with gradients in fintech'. WHEN NOT TO USE: The user describes a project and wants AI to pick the best matches — use recommend_sites instead. The user just wants the full list — use list_sites. OUTPUT: Filtered list of matching sites with their aesthetic, colors, fonts, and gradient info. NEXT STEP: Use matching slugs with get_site_overview (to research) or pass to synthesize_brief (to build).

[TIER 2 — RESEARCH] Returns a statistically-derived section blueprint for a page type (landing, pricing, about, etc.) based on patterns across ALL scraped sites. No AI — pure data aggregation. WHEN TO USE: The user wants to understand 'what's normal' — e.g. 'what sections do most landing pages have?' or 'what's the typical order of sections on a pricing page?' This is a REFERENCE tool. WHEN NOT TO USE: The user wants a customized design brief for their specific project — use synthesize_brief instead. The user wants inspiration for ONE specific section — use get_section_inspiration. OUTPUT: Ordered list of recommended sections with frequency %, bg treatments, spacing, and common components. NEXT STEP: Use the section list to guide synthesize_brief (pass it as context in the intent) or get_section_inspiration for specific sections.

[TIER 3 — GENERATION] AI-powered: generates a targeted design brief for ONE specific section or component, synthesized from real site examples. WHEN TO USE: The user is building a specific section and wants an AI-designed recommendation with layout guidance, color treatment, and content tips. E.g. 'design me a pricing section' or 'I need a hero section for my dev tool' or 'how should I build my FAQ?' This is the section-level equivalent of synthesize_brief (which is page-level). WHEN NOT TO USE: The user needs a full page designed — use synthesize_brief. The user just wants to SEE raw examples without AI synthesis — use get_component_examples. OUTPUT: AI-written section design brief with layout, color treatment, component structure, spacing, and content tips. NEXT STEP: Implement the section's HTML+CSS directly using the brief as a spec. For a full-page token set, use synthesize_brief.

Overview

What is Alcheon?

Alcheon is a Model Context Protocol server that provides design intelligence capabilities for AI-assisted UI development. It gives coding agents access to a curated corpus of 100+ analyzed production websites, so they can ground generated interfaces in real design DNA rather than generic defaults.

How to use Alcheon?

The easiest way is to add the hosted HTTP endpoint directly to your MCP client config — no install required. Point your client at https://api.alcheon.dev/mcp and you're connected instantly. For stdio-based clients, install via Smithery or clone the repo and run npm install && npm run build && npm start.

Key features of Alcheon

Curated corpus of 100+ scraped and analyzed production websites.
Design brief synthesis for spacing, typography, and color token strategies.
Section-level guidance for UI patterns: hero, pricing, testimonials, and more.
Hosted and managed — no infrastructure to run, always up to date.
Free to start with no account required; optional API key for higher limits.

Use cases of Alcheon

Building landing pages and marketing sites that feel intentional and polished.
Discovering reference sites matching a target aesthetic before generating UI.
Generating reusable design token sets grounded in real production design systems.
Improving the visual quality of any AI coding workflow that produces frontend interfaces.

FAQ from Alcheon

Does Alcheon MCP require an account?

No. It works immediately with no signup. Add a free API key at alcheon.dev/get-key to unlock higher rate limits.

Is Alcheon MCP free to use?

Yes, there is a free tier with generous limits. A free API key increases those limits further, and optional credit packs are available for heavy usage. Credits never expire.

What MCP clients does Alcheon work with?

Any MCP-compatible client: Cursor, Claude Desktop, Windsurf, GitHub Copilot, Continue, and any custom MCP client that supports HTTP or stdio transport.