What to actually say
to your AI assistant
Alcheon works through your AI coding assistant — Claude, Cursor, Copilot. These are the prompts that get the best results, organised by what you're trying to do.
Building from scratch
You have a product idea and nothing else. Alcheon finds the best reference sites for your domain, synthesises a design brief, and gives you a ready-to-paste CSS token set — all in one shot.
How it works
- 1 Describe your product
Tell your AI assistant what you're building — product type, audience, mood, any hard constraints.
- 2 Design tokens generated
generate_design_tokensauto-selects the best reference sites, extracts cross-site design DNA, and produces a complete CSS token set. - 3 Build section by section
Call
get_section_inspirationwith the token set and a section type (hero, pricing, FAQ). It produces an HTML skeleton and CSS usingvar(--token)references.
Copy a prompt
I'm building a SaaS dashboard for project management teams. Use Alcheon MCP to find the best reference sites for this space and generate a full design brief + CSS token set I can use to build the landing page.
Use Alcheon to design a landing page for a CLI tool aimed at backend engineers. I want it to feel technical and trustworthy — not overdesigned. Generate a design brief and token set, then build the hero section.
I'm launching a premium coffee brand online. Use Alcheon MCP to find reference sites with warm, editorial aesthetics. Generate a design brief for the homepage — think Kinfolk magazine meets specialty coffee, light theme.
Use Alcheon to generate design tokens from stripe_com, linear_app, and vercel_com. I want a pricing page for a B2B SaaS product. Generate the token set, then build the page.
Adding to an existing site
You already have a design system and don't want to break it. Pass your existing CSS tokens to Alcheon and it will find layout and structural inspiration without overwriting your colors or fonts.
How it works
- 1 Point to your CSS
Tell your AI assistant to read your main stylesheet or global CSS file before calling Alcheon.
- 2 AI reads your tokens
It extracts your
:rootcustom properties and detects your light or dark theme automatically. - 3 Synthesis preserves your system
generate_design_tokenswithexistingTokensfocuses on layout, architecture, and content strategy — not new colours. - 4 New page, same feel
The output reuses your variables throughout. Drop it in and it matches your site immediately.
Copy a prompt
I have an existing landing page. Read my src/styles/global.css to get my design tokens, then use Alcheon MCP to design a /pricing page that matches my existing look and feel. Keep my colors and fonts — just find good layout and section inspiration from reference sites.
Read my app/globals.css for my existing design system. Then use Alcheon to find inspiration for a testimonials section — I want to see how top SaaS sites handle social proof. Generate 2–3 layout options using my existing CSS variables.
My site uses a dark theme — check styles/tokens.css. Use Alcheon MCP to design a new /docs landing page. Make sure the brief respects my dark theme. I want editorial, generously spaced sections — reference sites like linear_app or vercel_com.
Read my CSS variables from src/index.css. Use Alcheon to find how leading SaaS products design their hero sections — I want to redesign mine. Pull component examples and use them as a brief for a new hero that still uses my existing token set.
Browsing for inspiration
Sometimes you just want to see what's out there before committing to a direction. These tools let you search by visual attribute, browse by category, or deep-dive a specific site's design DNA.
Exploration tools
- 1 List or search sites
list_sitesshows everything available.search_sitesfilters by visual attribute — "dark theme", "Inter font", "glassmorphism". - 2 Get a site overview
get_site_overviewreturns the full design DNA — palette, typography, spacing rhythm, motion philosophy. - 3 Pull specific patterns
get_component_examplesfocuses on specific parts of a site — hero sections, pricing cards, nav patterns, and more.
Copy a prompt
Use Alcheon's search_sites tool to find sites that use glassmorphism and dark themes. Give me an overview of the top 3 results — palette, typography, and what makes each one distinctive.
Use Alcheon to get the full design overview for linear_app. What's their color strategy, spacing rhythm, and motion philosophy? Then pull their hero section specifically — I want to understand how they structure it.
Use Alcheon to look at how stripe_com, lemon_squeezy, and paddle handle their pricing sections. Pull component examples for each. Summarise the key differences in layout, hierarchy, and CTA placement.
List all the e-commerce sites in Alcheon's database. Then get overviews of the top 3 that look most relevant for a premium lifestyle brand — I want to understand what patterns that category converges on.
Something genuinely different
Contrast mode picks sites that intentionally disagree on a design axis — then blends both poles rather than averaging them. The result is something neither site could produce alone.
How it works
- 1 Ask for contrast
Tell your AI you want something unexpected, or that you're bored of how every site in your category looks the same.
- 2 Contrast axis applied
generate_design_tokenswithcontrastAxisselects opposing reference sites and doesn't resolve the tension — it assigns each pole to different surfaces and contexts. - 3 Architecturally unique
The result has intentional contrast built in — e.g. spartan inside the product, editorial in the marketing sections.
Copy a prompt
Use Alcheon in contrast mode to design my e-commerce landing page. I don't want it to look like every other Shopify store. Use generate_design_tokens with a contrastAxis to find opposing design philosophies and generate a token set that uses tension as a feature.
I'm building a portfolio site and want it to feel genuinely original. Use Alcheon's contrast mode — pass a contrastAxis like "editorial generosity vs minimalism" to generate_design_tokens and blend both poles into something neither could produce alone.
Alcheon said that site combination was used recently. Try again with a contrastAxis — use generate_design_tokens with contrastAxis set to something like "warm editorial vs cold technical" to get a fresh, unexpected result.
Use Alcheon to generate design tokens with contrastAxis set to "editorial generosity vs brutal minimalism" for my SaaS marketing site — I want the product UI to be sparse but the marketing sections to be warm and generous.
Tips for better results
Be specific about audience
The more precisely you describe who the product is for, the better generate_design_tokens matches reference sites. "B2B SaaS for DevOps teams" gets better results than "a tech product".
Name your mood
Adjectives like "editorial", "brutalist", "warm", "data-dense", or "playful" steer the synthesis toward the right aesthetic family. Don't just describe the product — describe the feeling.
Use avoid to prune
Add "avoid: ["stats section", "dark hero", "logo grid"]" to the prompt if you've seen too many sites use those patterns. The brief will consciously work around them.
State your theme early
If your app has an existing light or dark theme, say it up front. Alcheon will constrain the output palette to match — preventing a dark brief landing in a light codebase.
Ready to try it?
Get your API key and add Alcheon to your AI coding assistant in under two minutes.