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 Alcheon recommends sites
recommend_sitespicks the 4–6 best reference sites from the database for your intent. - 3 Brief + tokens generated
synthesize_briefextracts cross-site patterns and writes a full design brief with a CSS token set. - 4 Build with the brief
Your AI builds the UI following the brief. Every design decision has a rationale from real sites.
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 synthesize a design brief from stripe_com, linear_app, and vercel_com. I want a pricing page for a B2B SaaS product. Generate the brief and CSS tokens, 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
synthesize_briefwithexistingTokensfocuses 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_section_inspirationandget_component_examplesfocus on specific parts of a site — hero sections, pricing cards, nav patterns.
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 Opposing sites selected
recommend_siteswithcontrast: truereturns a pair of sites that pull in opposite directions, plus a named axis of opposition. - 3 Brief honours both poles
synthesize_briefwithcontrastAxisdoesn't resolve the tension — it assigns each pole to different surfaces and contexts. - 4 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. Find two sites with opposing design philosophies, name the axis of contrast, and synthesize a brief that uses tension as a feature.
I'm building a portfolio site and want it to feel genuinely original. Use Alcheon's contrast mode — recommend sites that pull in opposite directions, identify the contrast axis, then synthesize a brief that blends both poles into something neither could produce alone.
Alcheon said that site combination was used recently. Switch to contrast mode — use recommend_sites with contrast: true to get an opposing pair instead, then synthesize a fresh brief using the contrast axis it returns.
Use Alcheon to find sites that oppose each other on "editorial generosity vs brutal minimalism". Synthesize a brief for my SaaS marketing site using that as the contrast axis — 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 recommend_sites matches. "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.