Condensed from Leonxlnx/taste-skill (MIT licence), the full version is 1,200 lines. It covers landing pages, portfolios and redesigns. If the project has brand guidelines or an existing design system, those win over every rule here.
1. Read the brief first
Before any code, state one line: "Reading this as:
- Infer from the vibe words, the references, the audience and any existing brand assets. The audience picks the aesthetic, not your taste.
- Ask at most one clarifying question, and only when two readings genuinely diverge.
- Quiet constraints (public sector, accessibility-first, regulated) override aesthetic preference.
2. Three dials (1-10)
Baseline DESIGN_VARIANCE 8, MOTION_INTENSITY 6, VISUAL_DENSITY 4. Adjust from the brief and say why.
| Brief | Variance | Motion | Density |
|---|---|---|---|
| Minimalist, calm, editorial | 5-6 | 3-4 | 2-3 |
| Premium consumer | 7-8 | 5-7 | 3-4 |
| Agency, playful, Awwwards | 9-10 | 8-10 | 3-4 |
| Trust-first, public sector | 3-4 | 2-3 | 4-5 |
| Redesign, preserve | match existing | +1 | match existing |
Above variance 4, avoid a centred hero. Collapse every asymmetric layout to one column under 768px.
3. Foundations
- If the brief names a real design system (Fluent, Material, Carbon, Polaris, Primer, GOV.UK, USWDS, shadcn/Radix), install the official package. Use one system per project and never recreate its CSS by hand.
- For an aesthetic with no official package (glass, bento, brutalism), build it in native CSS and label it an approximation. Apple Liquid Glass has no official web CSS.
- Check
package.jsonbefore importing any library. Print the install command first if it is missing. - Use
min-h-[100dvh], neverh-screen. Use CSS Grid, not flex percentage maths. - Icons come from one library (Phosphor, Tabler, Radix). Never hand-draw SVG icon paths.
- Drive continuous values (pointer, scroll) with motion values, never React state. Never use a scroll event listener; use
useScroll, ScrollTrigger, IntersectionObserver or CSS scroll-driven animation.
4. Design rules
Type. Avoid Inter as a default; try Geist, Outfit, Satoshi or Cabinet Grotesk. Avoid serif unless the brand is truly editorial or heritage, and never Fraunces or Instrument Serif by default. Emphasise a headline word with italic or bold of the same font, not a second family. Leave descender room on italic display text (leading-[1.1] minimum).
Colour. One accent, saturation under 80%, no AI-purple glow or neon gradients. Once chosen, the accent is the same on every section. The page has one theme; sections never flip light to dark. No pure #000 or #fff. Rotate palettes: do not default to beige plus brass plus espresso for premium-consumer briefs.
Shape. One radius scale for the whole page. Use cards only when elevation shows hierarchy; otherwise group with spacing or a divider. Tint shadows to the background.
Hero. It fits the first viewport: headline of 2 lines or fewer, subtext of 20 words or fewer, CTAs visible. Top padding is pt-24 at most. At most four text elements: eyebrow (optional), headline, subtext, CTAs. Trust logos, taglines and pricing teasers go in the section below.
Layout variety.
- Do not reuse a layout family within a page.
- At most two image-plus-text splits in a row.
- Bento grids have exactly as many cells as content, with real visual variation between cells.
- No split header (big headline left, small paragraph right).
- Nav is one line, 80px tall or less.
Copy and labels.
- At most one uppercase eyebrow per three sections.
- One label per CTA intent ("Contact" and "Get in touch" are the same intent). CTA labels never wrap.
- Sections use short headlines (8 words or fewer) and short subtext (25 words or fewer).
- Quotes run 3 lines or fewer, with name and role.
- Replace long
divide-ylists (more than 5 rows) with grouped chunks, cards or tabs. - Re-read every visible string before shipping. Rewrite anything that reads like cute AI wordplay.
- No em-dashes or en-dashes as separators in page copy; use a hyphen, comma or full stop.
Motion. Every animation must communicate hierarchy, sequence, feedback or a state change; "looks cool" is not a reason. One marquee per page at most. Animate transform and opacity only. If motion is above 3, honour prefers-reduced-motion; if you claim motion above 4, actually ship it. Do not mix GSAP or Three.js with Motion in one component tree.
Imagery. Landing pages need real images: use an image-generation tool if available, then seeded picsum URLs, then clearly labelled placeholder slots. Never build fake screenshots from divs, and never hand-roll decorative SVG illustrations. Logo walls use real SVG logos and nothing else (no category captions).
5. Tells to avoid
- Generic names ("John Doe", "Acme", "Nexus") and round numbers (
99.99%). - Filler verbs ("Elevate", "Seamless", "Unleash").
- Version labels, section-number eyebrows (
01 / INDEX), scroll cues and locale or weather strips. - Decorative status dots and pills laid over images.
- Fake version footers, hero-bottom keyword strips (
BRAND. MOTION.) and custom cursors. - Three equal feature cards.
6. Redesigns
- Detect the mode: preserve the brand, or overhaul the visuals. Ask once if unclear.
- Audit first: brand tokens, information architecture, content, SEO baseline, existing analytics events.
- Modernise in order: type, spacing, colour, motion, hero, then whole-block replacement. Stop when the brief is met.
- Never change silently: URL slugs, nav labels, form field names, logo, or legal and consent copy.
7. Pre-flight before delivering
- Design read stated and dials justified
- One theme, one accent, one radius scale, one design system
- Hero fits the viewport, with no more than four text elements
- Eyebrow, CTA-intent and layout-repetition limits respected
- Real images; no div screenshots or hand-drawn SVG
- Button and form contrast pass WCAG AA (4.5:1 body, 3:1 large)
- Reduced motion honoured; dark mode checked; mobile collapse explicit
- Empty, loading and error states exist
- Copy re-read; no em-dashes