The AI design system

When you use the AI chat modal inside Flexweg to generate or modify a page, every result looks coherent, on-trend and consistent — not like a copy of ten random CodePens. Behind the scenes, the AI is constrained by a curated design system: a library of 12 professional design templates, one of which is locked to your site so every page the AI produces shares the same colors, typography, spacing and feel.

This page explains how the system works from a user's perspective, and how to choose, change or customize the design for your site.

Why a design system

AI models are very good at producing HTML, but left on their own they tend to:

• pick a different style on every page,
• mix typographic scales that don't harmonize,
• reuse the same "default Tailwind gradient" over and over,
• forget the visual decisions they made in the previous turn.

Flexweg solves this by telling the AI: "Whatever the user asks for, render it using this exact design spec." The spec comes from one of 12 hand-crafted templates (the Stitch library) — picked automatically the first time you use the AI on a site, then locked in for future conversations.

Result: every page on your site shares the same visual identity, even when you ask the AI for completely unrelated content over weeks of iteration.

The 12 templates

Each template targets a different kind of site — niche, tone, industry. Browse them in the AI modal's template dropdown; each card has a screenshot, a name and a short description.

Template	Best for
Aura & Ember	Fine dining, cocktail bars, luxury hotels
Iron & Oak	Tradespeople, home services, BTP, artisans
Neon Monochrome	Creative portfolios, fashion agencies
Electric Fizz	Quizzes, games, kids & teen education
Ethereal Minimal	Wellness, yoga, spa, natural cosmetics
Organic Earth	Landscaping, ecology, outdoor living
Cyber Brutalist	Tech SaaS, crypto, developer tools
Sovereign Reserve	Law firms, private banks, wealth management
Vibrant Glass	Tech landing pages, AI demos, product launches
Modern Rebel	Bold CVs, creative portfolios, manifestos
Luxury Editorial	Premium quizzes, editorial magazines
Organic Coming Soon	Teasers, architecture studios, waitlists

Each template ships with its own color palette, typography pairing, component styling (buttons, cards, forms, sections), spacing rhythm and tone of voice — everything the AI needs to produce visually consistent output.

How the AI picks (and locks) a template

When you open the AI chat modal on a brand-new site for the first time, the selector shows "Auto". In Auto mode:

1. You describe what you want in plain language ("build me a landing page for my cocktail bar, with a reservation form at the bottom").
2. The AI reads the 12 template specs, uses an expert selection prompt to match your brief against their tones and use cases, and picks the best fit — for a cocktail bar that's Aura & Ember.
3. The AI announces its choice in its reply ("I've selected Aura & Ember for its moody, luxury-bar aesthetic…") and generates the page using that template's design rules.
4. As soon as the first page uploads successfully, the template is locked for your site. The selector badge switches from Auto to Aura & Ember, and every future conversation on this site starts with the same design pre-loaded.

From then on, the AI only sees the locked template — not the 12 — so it responds faster and with a more focused design.

You can pre-pick a template yourself

Don't want to rely on the AI's judgment? Open the selector dropdown before typing your first prompt and pick the template you want. The AI will use it directly, no selection step.

Changing the design mid-project

After a template is locked, opening the template dropdown and picking a different one surfaces a 3-way dialog:

Choice	What it does
Replace site design	Swaps the locked template entirely. All future generations use the new template. Existing pages remain as they are — they keep their old styling unless you ask the AI to regenerate them.
Use for this prompt only	One-shot override. The AI uses the new template just for this turn, then reverts to the previously locked template on the next message. Handy for generating a single off-brand page (a landing page for a partner, an experiment).
Cancel	Go back — the selector reverts to the current locked template.

This decision is remembered per site, so changing the design on one site never affects another.

Customizing the design

Templates are starting points, not cages. You can customize the locked design in two ways:

Ask the AI to tweak it

When you ask for a visual change in normal chat — "make the primary color a deeper navy", "switch the body font to something more modern", "reduce the card border radius" — the AI does two things in one response:

1. Applies the change to the HTML it's generating.
2. Patches the stored design spec to record the tweak.

From that moment on, every new page the AI generates respects the updated rule. The coherence holds even across many small iterations.

Edit the design directly in your account

Go to Account → My sites. Every site card has a Design System block showing the currently locked template and a last updated timestamp. Click Edit design and a built-in online editor opens with:

• A monospaced text area preloaded with the current design spec of your site (in Markdown).
• A dropdown to load a pristine template into the editor as a starting point — pick one of the 12, then tweak.
• Save to persist your edits, or Clear design to reset to Auto mode.

You can paste arbitrary design specs here — for example a brief your designer wrote, or a spec generated externally on stitch.design. The AI will apply it verbatim on the next conversation.

Bring your own Stitch design

If you've already designed your brand system on stitch.design, you can drop it straight into Flexweg:

1. Open Account → My sites and find the site you want to apply your design to.
2. Click Edit design on that site's card.
3. Paste the Markdown export from Stitch into the editor, replacing whatever is there.
4. Click Save.

The site now uses your own design. Every future AI-generated page will follow your brand's colors, typography, spacing and voice — no code changes on your side.

When would I edit manually?

• You have a house brand guide that the AI should respect exactly (colors, fonts, voice).
• You've built your own design on stitch.design and want the AI to use it verbatim.
• You want to hybridize two templates — take Iron & Oak color palette, but Sovereign Reserve typography.
• You're experimenting with a custom system the built-in templates don't cover.

What the AI remembers between conversations

Per site, Flexweg persists:

• The locked template (which one of the 12 — or Custom if you've edited the spec).
• The full design specification (the Markdown spec itself, with any customizations you've applied via chat or manual edit).
• When it was last updated.

This is stored per site, not per conversation — so starting a fresh chat doesn't lose your design. Conversation history (messages) is scoped per site as well, so each site has its own independent thread.

Tips for best results

• Let Auto mode pick for the first page. The selection prompt is tuned to match templates to use cases. Overriding too early can give you a beautiful template that doesn't quite fit your niche.
• Think of the locked template as your brand, not a decoration. Once set, every page is coherent. If you later ask for a "contact page", a "pricing page" and a "blog index", they'll feel like one site.
• Use one-shot overrides sparingly. They're perfect for a landing page that promotes a partner event, but if you find yourself overriding often, your real template pick was probably wrong — Replace the site design instead.
• Edit the design spec directly for brand-strict clients. Paste the brand palette + fonts into the Markdown editor in My Sites, save, and the AI will respect it on every future page.
• The AI can still break the rules if you tell it to. The system biases toward consistency, but explicit user instructions win: "ignore the template, use a gradient from pink to cyan" will do exactly that.

Related

• Build your site with AI — the three ways to pay (or not pay) for AI on Flexweg, plus the free external AI tools.
• MCP integration — connect Claude, Cursor, ChatGPT and friends to your site so they use the same design system when editing from your IDE.
• Forms on your site — the AI can also create forms as part of any page it generates, with no extra effort from you.