Alcheon exposes MCP-compatible tools your AI coding assistant calls for real design DNA from production websites. Tiered from discovery to generation.
Start here. These tools let you explore what's in the data store before you build anything.
list_sites List all scraped sites in the data store.
Returns every site slug currently stored in Alcheon, with optional filtering by category. Use this to discover what's available before calling generate_design_tokens.
// List all sites
list_sites()search_sites Filter sites by specific design criteria.
Searches the data store by design attributes rather than by project intent. Use when you need sites with a particular visual property (dark theme, Inter font, glassmorphism) rather than AI-curated recommendations.
query string optional Free-text search across aesthetic family, vibe, tone of voice, and originality notes. E.g. "playful", "neobrutalist", "developer-focused". aesthetic string optional Filter by aesthetic family. E.g. "minimal", "brutalist", "luxe", "playful", "corporate", "editorial". colorTone "dark" | "light" | "warm" | "cool" optional Filter by overall color temperature or brightness. hasGradients boolean optional Only show sites that use gradients (true) or do not (false). industry string optional Filter by industry/category. E.g. "SaaS", "Dev Tools", "AI", "Design", "Fintech", "CMS", "E-commerce". font string optional Filter by font family name. E.g. "Inter", "Geist", "Satoshi". // Free-text search
search_sites({ query: "dark developer-focused" })
// Structured filters
search_sites({
industry: "SaaS",
colorTone: "dark",
hasGradients: true,
font: "Inter"
})Inspect individual sites. Use these when you need to understand a specific site's patterns before or instead of full synthesis.
get_site_overview Full design DNA for a single site.
Returns the complete extracted design profile for one site: color palette, typography, spacing, motion, section architecture, component patterns, hover philosophy, and more. Use when you want to understand a specific reference before deciding whether to include it in synthesis.
slug string required The site slug to inspect. Use list_sites to find available slugs. get_site_overview({ slug: "linear_app" })get_layout_blueprint Get a statistically-derived section blueprint for a page type.
Returns an ordered section blueprint based on patterns across all scraped sites (no AI synthesis). Use this to understand common section order and composition for landing, pricing, about, docs, dashboard, or blog pages.
pageType "landing" | "pricing" | "about" | "docs" | "dashboard" | "blog" required The page type to generate a blueprint for. sectionCount number optional Target number of sections. Min: 3, Max: 15. If omitted, derived from data. get_layout_blueprint({
pageType: "pricing",
sectionCount: 7
})get_component_examples Find sites using a specific component pattern.
Searches across all scraped sites for examples of a given component (cards, modals, nav patterns, pricing tables, etc.) and returns the sites that implement it most distinctively, with notes on their approach.
component string required The component type to search for. E.g. "card", "modal", "pricing table", "feature grid", "testimonial carousel". maxResults number optional Maximum number of examples to return. Min: 1, Max: 20. Default: 8. get_component_examples({
component: "pricing table",
maxResults: 3
})The core outputs. generate_design_tokens creates your CSS token set; get_section_inspiration builds each section using those tokens.
generate_design_tokens Generate a full CSS design token set from reference sites.
The primary generation tool. Pass 1–10 site slugs (or omit to auto-select) and a project intent; Alcheon analyzes cross-site design DNA and produces a complete CSS :root {} token set (colors, typography, spacing, radii, shadows, motion) plus a compact directive brief. A repetition guard prevents reusing the same site combinations — if triggered, it suggests alternatives.
sites string[] optional Array of site slugs to draw from. Min: 1, Max: 10. Omit to auto-select the best diverse set. Use list_sites or search_sites to find slugs. intent string required A description of the UI you're designing: product type, audience, mood, constraints. emphasize string[] optional Design aspects to emphasize from the reference sites. E.g. ["gradient_hero", "dark_sections", "typography"]. avoid string[] optional Patterns to consciously avoid. E.g. ["stats_section", "hamburger_nav", "dark_hero"]. existingTokens string optional Your current CSS :root { } custom properties. When provided, the brief extends your existing design system rather than generating a new one. theme "light" | "dark" optional Hard constraint on background mode. The brief always produces a palette in this mode regardless of what the reference sites use. Detect by reading the user's CSS before calling. contrastAxis string optional Activates contrast mode. Name the design axis on which the reference sites oppose each other (e.g. "spacing density", "colour temperature"). The brief assigns each pole to different surfaces rather than finding consensus. includeTokens boolean optional Whether to include the CSS :root {} token set in the output. Defaults to true. Set to false when extending an existing design system to reduce output size and leave more context budget for code generation. force boolean optional Bypass the repetition guard. Only use if the user explicitly requested these specific sites. // Standard synthesis
generate_design_tokens({
sites: ["stripe_com", "linear_app", "vercel_com"],
intent: "A dark monitoring dashboard for DevOps teams.",
emphasize: ["code_blocks", "dark_sections"],
avoid: ["stats_section"]
})
// Contrast mode — deliberately fuse opposing visual approaches
generate_design_tokens({
sites: ["zara_com", "ugmonk_com"],
intent: "A product configurator for DTC brands",
contrastAxis: "Editorial Generosity"
})
// Extend existing design system
generate_design_tokens({
sites: ["prisma_io"],
intent: "A pricing page for our existing SaaS product",
existingTokens: `
--color-primary: #533AFD;
--font-sans: Inter, sans-serif;
`
})get_section_inspiration Build a page section-by-section using your token set.
Section implementation assistant. Call AFTER generate_design_tokens. Takes your CSS token set and a section type, then produces an implementation-ready spec — HTML skeleton, section CSS using var(--token) references, composition recipe, content slots, and responsive notes. Structural patterns come from real reference sites; all style values reference your existing tokens.
sectionType string required Section type to build. E.g. "hero", "pricing", "FAQ", "feature grid", "CTA banner", "footer". tokenSet string required The CSS :root {} token set from generate_design_tokens. The section spec will use var() references to these tokens. context string optional Optional project context. E.g. "B2B DevOps product with a dark UI". content string optional Optional real content for the section — headlines, feature names, pricing tiers, FAQ items. Used instead of placeholder slots. sites string[] optional Optional site slugs for structural pattern reference. If omitted, searches all sites. maxExamples number optional Max reference examples to analyze. Min: 1, Max: 10. Default: 5. get_section_inspiration({
sectionType: "hero",
tokenSet: ":root { --color-primary: #533AFD; --font-heading: 'Inter', sans-serif; ... }",
context: "B2B DevOps monitoring dashboard",
content: "Ship faster with confidence. Real-time observability for engineering teams."
})Add new sites to the data store. Requires a valid API key with scraping credits.
scrape_site Scrape a new site and add it to Alcheon's data store.
Launches a full pipeline scrape of the given URL: screenshots, deep CSS analysis, design DNA extraction, token generation, and database storage. Once complete, the site's slug is available to all other tools. Costs 1 credit per scrape.
url string required The full URL to scrape. E.g. "https://linear.app". Must be a public webpage. force boolean optional Set to true to re-scrape a site that already exists in the data store. scrape_site({ url: "https://linear.app" })
// Returns slug: "linear_app"Get an API key and connect Alcheon to your AI coding assistant in under 5 minutes.