Website Taste Pass

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:

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:

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:

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:

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:

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