AI-built sites that don’t look AI-built.
Tinctra is a curated library of hand-crafted design directions. Tweak the palette, type, and spacing live, then copy a prompt that carries your exact look into Claude Design. A third of the library is free, no card required.
Drag the color. Watch the prompt.
This is the real product, not a video of it — a template from the library driven by the actual Tweaker. Change the palette, the type, the spacing; the prompt rewrites itself in the same instant, and the marked phrases are the parts you just changed.
Live preview — the real template, repainting as you change the controls.
The prompt, rewriting itself
Build a complete, responsive multi-section marketing website for my business in a warm editorial style — the feel of a well-set literary magazine, not a tech landing page. AESTHETIC DIRECTION The design language is typographic and bookish. Use hairline rules (1px, low-contrast) to structure the page the way a magazine uses them: a masthead-style header with a thin utility line above the logo and navigation, rules between major sections, and a centered ornament or folio mark to close the hero. Headlines are large serif with occasional words set in italic as accents. Body copy is set to a comfortable reading measure (around 60–70 characters). One paragraph in the main editorial section should open with a drop cap. Include a large italic serif pull-quote and a full-width testimonial band on a slightly tinted surface. Avoid card grids with heavy shadows, gradients, and rounded corner boxes — structure comes from rules and whitespace, not containers. COLOR The page background is a warm cream white (#faf7f0). Body text is a near-black ink (#1d1a15). The primary accent is a forest green (#1f6f43) — use it for links, buttons, italic accent words in headlines, and other selective emphasis. The secondary accent is an orange (#a8681c) — use it sparingly for eyebrows, small-caps labels, and the drop cap. Tinted panels and bands sit on a soft ivory (#f1ebdd). Keep the overall page light on accent color: ink and background do most of the work. TYPOGRAPHY Use a characterful old-style display serif for headings with a clean neutral sans-serif for body text (Fraunces for headings, Inter for body). Headlines are set large and confident with tight leading; eyebrows and labels are small, letterspaced uppercase in the body face. SPACING Overall spacing should feel balanced and comfortable, with unhurried room between sections (6.5rem section padding). MOOD The site should feel warm and literary, like a trusted periodical. STRUCTURE Include: the masthead header; a centered hero with an eyebrow line, a large headline with an italic accent word, a short standfirst paragraph and a primary button plus a quiet text link; a three-column "what we do" section separated by vertical hairlines; a two-column editorial section pairing a large italic pull-quote with prose (drop cap on the first paragraph); a full-width testimonial band; a centered closing call-to-action; and a multi-column footer with small-caps headings. Adapt all copy to my actual business, keep the design language perfectly consistent across every section, and make it fully responsive — the three-column section stacks to one column on small screens.
Every control here is the real thing. The workbench adds the copy button, tablet and mobile preview widths, and keeps your tweaks — and this template is free.
“a forest green”
“an orange”
“a warm cream white”
“a soft ivory”
“a near-black ink”
“warm and literary, like a trusted periodical”
Browse real designs
Every template is a responsive, hand-crafted page with a point of view. Scroll it, poke it, judge it the way your client will.
Tweak it live
Pick a palette, switch the type pairing, loosen the spacing. The preview repaints instantly and the prompt rewrites itself to match.
Copy the prompt
One click puts a complete design brief on your clipboard, carrying your exact choices into Claude Design. Aim it at any client, any industry.
From the library
See everything
Meridian
A warm editorial direction with the feel of a well-set literary magazine: masthead header, oversized serif headlines with italic accents, hairline rules, a drop cap, and generous, bookish whitespace. Works as beautifully for an accounting firm as for a café.
Structura
A precise, Swiss-grid minimal direction: an index-rail hero with a metadata sidebar, hairline-ruled capability grid, numbered process steps, and one disciplined accent color on cool paper. Reads as competence — equally right for a consultancy, a clinic, or a contractor.
Volta
A bold brutalist direction: massive stacked display type with an outlined word, thick borders, hard offset shadows, a scrolling ticker strip, and one loud accent against raw paper. For businesses that would rather be remembered than polite — trades, studios, food, events.
Fair questions
- Will the generated site match the preview exactly?
- The preview shows the aesthetic and your exact choices: colors, typography, spacing. The prompt instructs the AI to honor those same choices. Layout can vary between generations because AI tools are non-deterministic, so treat it as your look carrying over, not a pixel-for-pixel copy. We'd rather tell you that up front.
- Which AI tools do the prompts work with?
- They're written for Claude Design, and they're plain-language design briefs rather than tool-specific syntax, so they work in any AI site builder that accepts detailed instructions.
- What's actually free?
- About a third of the library, permanently, with the full Tweaker and prompt copying on every free template. No card required. Pro unlocks the rest of the shelf.
- Can I use this for client work?
- Yes. Prompts you export and sites you generate from them are yours for any project, commercial or personal, without attribution. The only thing you can't do is resell the template library itself.