Taste

Taste — Website Visual Improvement

Purpose: Upgrade a website from merely functional to visibly credible, high-intent, and conversion-ready in one focused pass.

This skill is for agents asked to "make this look better," "polish the site," "improve the landing page," "make it feel premium," or "fix the design." Do not make random decorative changes. Taste is a system: category, worldview, hierarchy, restraint, alignment, rhythm, contrast, proof, and visual verification.

Supporting files:

• references/taste-principles.md — category-first principles and the taste rubric.
• references/website-improvement-loop.md — the step-by-step browser screenshot loop.
• references/benchmark-notes.md — one-shot before/after benchmark notes.
• references/immersive-landing-pages.md — guidance for WebGL, animation, bespoke motion, and generated media.

1. Outcome

A successful taste pass makes the page easier to believe before it makes the page prettier.

The finished page should answer these questions within five seconds:

1. What is the category idea? The page has one memorable thesis, not a feature inventory.
2. Why now? The hero opens with the market shift, tension, or newly scarce resource.
3. Why should I care? The product exists because that tension matters.
4. What should I do next? One primary CTA is visually dominant.
5. Why should I trust it? Proof, research, recruiting seriousness, or domain artifacts appear early.
6. Where should my eye go? The layout has an obvious reading order.

2. Taste rules for agents

2.1 Decide before decorating

Before editing CSS, write these two lines:

markdownCopy code
Category thesis: [sharp category phrase, e.g. "the judgment layer for product feedback"]
Worldview sequence: [market shift] → [scarce resource] → [why this product exists]

Then map the page to a sequence:

markdownCopy code
Sequence: worldview → category thesis → domain artifact → proof → action

If the current page lacks a sequence, fix structure before styling.

2.2 Lead with worldview, not product mechanics

Do not open with dashboards, workflows, or feature bullets. Start with the tension the audience already feels.

Strong copy is short and declarative:

textCopy code
Creation is cheap. Judgment is scarce.
The challenge is not generating more. It is knowing what deserves to exist.
We make subjective quality measurable.

Avoid 10x, seamless, AI-powered, supercharge, generic productivity claims, and inflated adjectives unless the page proves them.

2.3 Create hierarchy with restraint

Use three hierarchy levers first:

1. Scale: one dominant headline, clear section titles, smaller supporting text.
2. Spacing: generous section rhythm, tight grouping inside components.
3. Contrast: one strong CTA color or treatment, muted secondary content.

Avoid using many colors, gradients, font weights, or shadows to compensate for weak structure. Austerity can be a premium signal when the thesis is sharp.

2.4 Use domain artifacts instead of generic UI

Replace fake dashboards and generic cards with artifacts from the product's judgment domain:

• Accepted/rejected examples.
• Interface states.
• Visual comparisons.
• Brand systems.
• Typography specimens.
• Product shots.
• Charts or evidence packs.
• Research notes, lab entries, hiring briefs, or essays.

Artifacts should make the scope of judgment felt without explaining every feature.

2.5 Make the visual system embody the thesis

If the product is about judgment, the page itself must feel judged, edited, and restrained. Every decorative element should reinforce the category idea. Remove neon blobs, default purple-blue gradients, robots, chatbot visuals, floating sparkles, and checkmark confetti unless they are the product's real domain language.

2.6 Make motion bespoke, not templated

Premium motion is a product surface, not confetti. Prefer one or two signature interactions over many generic animations:

• Hover or image trails.
• Orbiting artifact systems.
• Pointer-reactive layouts.
• Scroll-driven editorial reveals.
• Restrained canvas or WebGL moments.

Motion should express the thesis and respect static, mobile, and prefers-reduced-motion paths. See references/immersive-landing-pages.md before adding WebGL or generated media.

2.7 Upgrade credibility early

Add or elevate proof above the first long explanation:

• Customer logos, user count, revenue/time saved, testimonial, case study metric, security/compliance note, founder/team credibility, recognizable integration, research program, hiring seriousness, or transparent product artifacts.
• If no proof exists, do not invent metrics. Use clarity, polish, explicit limitations, research notes, and strong artifact quality to create credibility.

2.8 Keep accessibility intact

Animated typography and decorative artifacts must not pollute the accessibility tree. Add accessible labels where needed, hide purely decorative spans with aria-hidden="true", preserve semantic headings, keep contrast readable, and maintain keyboard focus states.

3. One-shot workflow

Step 1 — Capture the baseline

Use the browser to capture screenshots before editing:

bashCopy code
npx -y chrome-devtools-axi open http://localhost:3000
npx -y chrome-devtools-axi resize 1440 1100
npx -y chrome-devtools-axi screenshot /tmp/before.png

Also capture mobile if the task is responsive:

bashCopy code
npx -y chrome-devtools-axi resize 390 844
npx -y chrome-devtools-axi screenshot /tmp/before-mobile.png

Step 2 — Score the page

Use the taste rubric from references/taste-principles.md.

Score 1–5:

• Category idea
• Worldview
• Hierarchy
• Clarity
• Trust
• Visual rhythm
• CTA gravity
• Domain specificity
• Consistency
• Motion restraint
• Accessibility
• Mobile scanability

Write the top three failures. Do not edit yet.

Step 3 — Apply the smallest complete design system

Make one coherent pass:

1. Write the category thesis and worldview sequence.
2. Establish tokens or reuse existing tokens.
3. Redesign the hero around the thesis.
4. Replace generic UI with domain artifacts.
5. Move proof, research, recruiting, or credibility signals above dense explanation.
6. Convert feature lists into scan-first decision units.
7. Use one visual motif repeatedly.
8. Add one bespoke interaction only if it expresses the thesis.
9. Remove decorative elements that do not guide attention.
10. Keep page weight and accessibility in view.

Step 4 — Verify visually

Re-run screenshots and inspect them side-by-side:

bashCopy code
npx -y chrome-devtools-axi screenshot /tmp/after.png

The after screenshot must show at least three visible improvements from the baseline:

• The category thesis is the strongest element.
• The page starts with worldview before mechanics.
• The primary CTA is obvious.
• Domain artifacts replace generic SaaS UI.
• Trust or proof is visible without hunting.
• The page feels less noisy at thumbnail size.

Step 5 — Do not ship until the page wins at thumbnail size

Open before and after screenshots as thumbnails. If the improved page does not have a clearer reading order when small, keep iterating. Good taste survives zooming out.

4. Agent guardrails

Do not:

• Add generic gradients, blobs, glassmorphism, fake dashboards, robots, sparkles, or stock emojis by default.
• Invent customer logos, testimonials, metrics, security claims, or press quotes.
• Start the hero with product mechanics when a worldview is needed.
• Hide real information behind vague manifesto copy.
• Use visual novelty where clarity is missing.
• Ship without screenshots.
• Add WebGL, Three.js, video, or generated visuals without a static fallback.
• Let animation obscure the headline, CTA, proof, or accessibility tree.

Do:

• Preserve existing brand tokens unless they are demonstrably harming hierarchy.
• Prefer fewer stronger sections over many weak sections.
• Make one action primary and all others visibly secondary.
• Use real product UI, real customer language, real workflow screenshots, or clearly illustrative domain artifacts.
• Integrate research, lab notes, essays, or recruiting when they strengthen category ownership.
• Keep accessibility: readable contrast, focus states, semantic headings, tap targets.
• Pause or simplify animation on mobile, reduced motion, idle tabs, and weak connections.

5. PR checklist

Before opening a PR:

• Baseline screenshot captured.
• After screenshot captured at the same viewport.
• Taste rubric scores improved.
• Category thesis and worldview sequence are explicit.
• No fake proof or unsupported claim added.
• No default AI aesthetic added by reflex.
• No unrelated UI was redesigned.
• Mobile still scans correctly, if mobile is in scope.
• Decorative animation is hidden from screen readers.
• The PR includes screenshots or a link to screenshots.