website-finishing-director（网站整理总监）

Website Finishing Director

Structured 5-pass website finishing audit — from first impression to launch readiness — scored on 100 points. Like painting: primer, base coat, details, clear coat, final inspection. No site ships without a finishing pass.

When to Use This Skill

• Pre-launch gate — Final validation before DNS goes live or traffic is sent
• Post-redesign audit — After a visual overhaul, verify nothing regressed
• Client handoff — Generate a structured report proving the site meets quality standards
• Quarterly maintenance — Catch accumulated UX debt, broken links, stale content
• Targeted pass — Run just one pass (e.g., "Pass 2 only" after a performance sprint)

Methodology Foundation

Sources:

• Nielsen Norman Group — Heuristic evaluation framework (10 usability heuristics)
• Google Web Vitals — LCP, CLS, INP thresholds
• OWASP — Security headers baseline
• Oli Gardner / Unbounce — Landing page conversion best practices
• Don Norman — Emotional Design (visceral/behavioral/reflective layers)
• GUIA production memory — 8 shipped websites, documented gotchas across Next.js, Framer Motion, GSAP, Lenis, Railway, Docker

Core Principle: A website that passes Lighthouse and has correct meta tags is technically valid but not *finished*. Finishing is the gap between "it works" and "it's ready." It requires evaluating the site as a visitor experiences it — progressive, emotional, cross-device — not as a checklist of individual metrics.

Why This Matters: Existing tools (Lighthouse, Screaming Frog, Awwwards) each audit one dimension. No tool combines visual polish + UX completeness + technical foundation + content quality + brand alignment in a sequential, scored workflow. This skill is that tool.

What Claude Does vs What You Decide

"Claude runs the audit. You decide what ships."

Remember: This is a centaur workflow. Claude structures the audit rigorously; you validate the verdict with human eyes on real devices.

What This Skill Does

1. 5-Second First Impression Test — Evaluates clarity, emotional fit, and CTA visibility in the first moments
2. Technical Foundation Audit — Performance (Core Web Vitals), SEO basics, security headers, broken links
3. UX Completeness Check — Component states, form behavior, animation polish, mobile usability
4. Content & Brand Validation — Copy quality, placeholder detection, voice consistency, visual coherence
5. Cross-Device & Launch Readiness — Browser testing, OG previews, analytics, 404 page, favicon

How to Use

Full website audit before launch

I'm about to launch [site URL]. Run a full website-finishing-director audit (all 5 passes).
Brand quadrant: [Warm+Calm / Warm+Active / Cold+Active / Cold+Calm].
Target audience: [who].

Single pass after a specific fix

I just optimized performance on [site URL]. Run Pass 2 only (Technical Foundation).

Landing page quick audit

Audit this landing page: [URL]. Use the Landing Page profile (passes 1, 2, 4).

Instructions

When running this audit, follow the 5 passes in order. Each pass builds on the previous one — foundation before polish. Score each checkpoint, classify issues by priority, then generate the final report.

Audit Profiles

Not every site needs all 5 passes. Select the profile that matches the project:

Adjust point totals proportionally when using a reduced profile. The Go/No-Go thresholds apply to the percentage score, not raw points.

Pass 1: First Impression (15 points)

*"What does a visitor understand and feel in 5 seconds?"*

Show the homepage (or hero section) for 5 seconds. Answer these 5 questions — 3 points each:

## Pass 1 — First Impression (5-Second Test)

### 1. WHAT is this? (3 pts)
Can a visitor identify what the site/product/service IS?
[ ] 3 — Immediately clear, no ambiguity
[ ] 2 — Clear after reading subheadline
[ ] 1 — Vague, requires scrolling to understand
[ ] 0 — No idea what this is

### 2. WHO is it for? (3 pts)
Are there signals identifying the target audience?
[ ] 3 — Obvious demographic/psychographic signals
[ ] 2 — Implied but not explicit
[ ] 1 — Generic ("everyone")
[ ] 0 — Actively confusing (signals wrong audience)

### 3. WHY should I care? (3 pts)
Is the value proposition or benefit visible?
[ ] 3 — Clear benefit, emotionally resonant
[ ] 2 — Feature-focused but understandable
[ ] 1 — Present but buried
[ ] 0 — No value proposition visible

### 4. WHAT do I do next? (3 pts)
Is the primary CTA visible and clear?
[ ] 3 — CTA visible above fold, action-specific text
[ ] 2 — CTA present but generic ("Learn more")
[ ] 1 — CTA below the fold or hard to find
[ ] 0 — No CTA visible

### 5. HOW does it feel? (3 pts)
Does the emotional tone match the brand quadrant?
[ ] 3 — Perfect quadrant match (warm brand = warm design)
[ ] 2 — Mostly aligned, minor dissonance
[ ] 1 — Noticeable mismatch (warm brand + cold design)
[ ] 0 — Opposite quadrant (positioning confusion)

### Pass 1 Score: ___/15

Verdict:
- 12-15: PASS — First impression is clear and emotionally aligned
- 8-11: NEEDS WORK — Visitor gets it, but slowly or with friction
- <8: FAIL — Redesign the above-fold experience

Integration: Compare the emotional feel against the web-design-director quadrant system. If the brand is Warm+Calm but the site feels Cold+Active, that's a P0 regardless of score.

GUIA gotchas for this pass:

• Calendly URL hardcoded in CTA instead of /contact/ page (breaks analytics)
• Mixing warm copy tone with cold UI elements (terracotta palette + monospace font = confusion)

Pass 2: Technical Foundation (25 points)

*"Is the infrastructure solid enough to build on?"*

## Pass 2 — Technical Foundation

### Performance (10 pts)

| Metric | Target | Score |
|--------|--------|-------|
| LCP (Largest Contentful Paint) | ≤ 2.5s | 0-3 pts |
| INP (Interaction to Next Paint) | ≤ 200ms | 0-2 pts |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | 0-2 pts |
| Lighthouse Performance score | ≥ 85 | 0-3 pts |

Scoring:
- LCP: 3 = ≤2.5s, 2 = ≤4.0s, 1 = ≤6.0s, 0 = >6.0s
- INP: 2 = ≤200ms, 1 = ≤500ms, 0 = >500ms
- CLS: 2 = ≤0.1, 1 = ≤0.25, 0 = >0.25
- Lighthouse: 3 = ≥90, 2 = ≥85, 1 = ≥70, 0 = <70

### SEO Basics (8 pts)

- [ ] (2 pts) Canonical URLs defined + trailing slash consistent
- [ ] (1 pt) Meta titles unique per page (≤60 chars)
- [ ] (1 pt) Meta descriptions present per page (≤160 chars)
- [ ] (1 pt) Sitemap.xml accessible and valid
- [ ] (1 pt) robots.txt present and correct
- [ ] (1 pt) Structured data present (JSON-LD)
- [ ] (1 pt) Alt text on all images

### Security & Links (7 pts)

- [ ] (2 pts) HTTPS enforced (no mixed content)
- [ ] (2 pts) Security headers present (CSP, X-Frame-Options, HSTS, X-Content-Type-Options)
- [ ] (1 pt) No broken internal links (404s)
- [ ] (1 pt) No broken external links
- [ ] (1 pt) No exposed source maps or debug endpoints in production

### Pass 2 Score: ___/25

Verdict:
- 21-25: SOLID — Ship it
- 16-20: ACCEPTABLE — Fix P0s, ship with P1 backlog
- 11-15: FRAGILE — Significant technical debt
- <11: BROKEN — Do not launch

GUIA gotchas for this pass:

• trailingSlash: true missing in next.config.js (caused deindexation on Rental-CRM, Jan 2026)
• export const metadata on a 'use client' component (metadata not rendered server-side)
• Module-level SDK init (Supabase/Stripe) fails at build when env vars missing — lazy-initialize inside functions
• Vercel env vars trailing newline from echo — use printf instead
• Railway *.railway.internal hostnames unreachable during Nixpacks build — use public URLs

Pass 3: UX Completeness (25 points)

*"Does the site handle real-world usage, not just the happy path?"*

## Pass 3 — UX Completeness

### Component States (8 pts)

For EACH interactive component (buttons, cards, forms, modals, lists):
- [ ] (2 pts) Loading state — skeleton, spinner, or progressive render
- [ ] (2 pts) Error state — clear message + recovery action
- [ ] (2 pts) Empty state — helpful message, not blank screen
- [ ] (2 pts) Success state — confirmation feedback

Score: deduct per missing state across all components.
8 pts = all states covered. -1 per missing state (cap at 0).

### Forms (6 pts)

- [ ] (1 pt) Client-side validation with clear error messages
- [ ] (1 pt) Server-side validation (not just client)
- [ ] (1 pt) Success feedback after submission (toast, redirect, or inline)
- [ ] (1 pt) Submit button disabled during processing (no double-submit)
- [ ] (1 pt) Spam protection (honeypot, reCAPTCHA, or rate limiting)
- [ ] (1 pt) Privacy policy link near form (GDPR)

### Animation Polish (6 pts)

- [ ] (1 pt) `viewport={{ once: true }}` on scroll animations (no replay on scroll-back)
- [ ] (1 pt) `useGSAP` hook used (not `useEffect`) for GSAP animations
- [ ] (1 pt) `prefers-reduced-motion` respected (disable or reduce animations)
- [ ] (1 pt) No animation blocks content access (content visible even if animation fails)
- [ ] (1 pt) Lenis initialized correctly (not Locomotive Scroll)
- [ ] (1 pt) Exit animations don't cause layout shift

### Mobile Usability (5 pts)

- [ ] (1 pt) Touch targets ≥ 44px (iOS HIG standard)
- [ ] (1 pt) No horizontal overflow / horizontal scroll
- [ ] (1 pt) Font sizes ≥ 16px for body text (prevents iOS zoom)
- [ ] (1 pt) Sticky/fixed elements don't overlap content
- [ ] (1 pt) Scroll behavior works correctly (no scroll-jacking that traps users)

### Pass 3 Score: ___/25

Verdict:
- 21-25: COMPLETE — Real-world usage covered
- 16-20: MOSTLY THERE — Edge cases need attention
- 11-15: INCOMPLETE — Users will hit dead ends
- <11: UNFINISHED — UX not production-ready

GUIA gotchas for this pass:

• GSAP + React 18 Strict Mode fires animations 2x in dev (use useGSAP, not useEffect)
• Global CSS a {color: var(--color-coral)} overrides Tailwind text-white on anchor CTAs — use inline style={{color: 'white'}}
• Framer Motion AnimatePresence exit animations break with Next.js App Router
• Too many simultaneous ScrollTrigger instances kill mobile performance
• Lenis package name: npm install lenis (NOT @studio-freight/lenis)

Pass 4: Content & Brand (20 points)

*"Is the content finished, consistent, and on-brand?"*

## Pass 4 — Content & Brand

### Copy Quality (8 pts)

- [ ] (2 pts) No placeholder text detected ("Lorem ipsum", "[Your Name]", "Coming soon",
      "example.com", "TODO", empty sections)
- [ ] (1 pt) No spelling or grammar errors
- [ ] (1 pt) Link text is descriptive (not "click here" or naked URLs)
- [ ] (1 pt) CTA copy is specific ("Start free trial" not "Submit")
- [ ] (1 pt) Heading hierarchy is logical (H1 → H2 → H3, one H1 per page)
- [ ] (1 pt) Alt text is descriptive (not "image1.png" or empty)
- [ ] (1 pt) Phone numbers, emails, addresses are real (not placeholder)

### Brand Voice (6 pts)

- [ ] (2 pts) Tone matches brand positioning (warm/cold, formal/casual)
- [ ] (2 pts) Voice is consistent across all pages (same person "speaking")
- [ ] (1 pt) No AI-smoothing markers ("Don't hesitate to contact us",
      "In today's fast-paced world", "It's important to note that")
- [ ] (1 pt) CTAs match the emotional quadrant (warm brand = inviting CTA, not aggressive)

### Visual Consistency (6 pts)

- [ ] (1 pt) Color palette used consistently (no off-brand colors)
- [ ] (1 pt) Typography hierarchy clear (display, heading, body, caption — max 2-3 fonts)
- [ ] (1 pt) Spacing rhythm consistent (not random padding between sections)
- [ ] (1 pt) Icon style uniform (don't mix outline, filled, and emoji)
- [ ] (1 pt) Image treatment consistent (all photos same filter/tone, or all illustrations)
- [ ] (1 pt) Component style consistent (cards, buttons, inputs follow same pattern)

### Pass 4 Score: ___/20

Verdict:
- 17-20: POLISHED — Content is finished and on-brand
- 13-16: GOOD — Minor inconsistencies, shippable
- 9-12: ROUGH — Content needs editing pass
- <9: UNFINISHED — Major content gaps or brand mismatch

GUIA gotchas for this pass:

• Calendly URL must match the correct professional (Valeria vs Matthieu vs client)
• Mixing warm copy ("We understand your challenges") with cold UI (dark mode, monospace, sharp corners)
• AI-generated copy detection: remove double line breaks before publishing (AI signature on LinkedIn)
• credou.bzh copy direction: mechanism-first, no CV, no parcours/timeline

Pass 5: Cross-Device & Launch (15 points)

*"Does it work everywhere, and is everything ready to go live?"*

## Pass 5 — Cross-Device & Launch

### Browser Testing (5 pts)

Test on the 3 major browsers. Score per browser:
- [ ] (2 pts) Safari — renders correctly, animations work, fonts load
- [ ] (2 pts) Chrome — renders correctly, animations work, fonts load
- [ ] (1 pt) Firefox — renders correctly, no major breaks

Per browser, check: layout, animations, fonts, forms, scroll behavior.
Deduct 1 pt per browser with visual bugs. Deduct 2 pts per browser with functional bugs.

### Device Testing (4 pts)

- [ ] (2 pts) Mobile (375px) — full site usable, no content cut off
- [ ] (1 pt) Tablet (768px) — layout adapts, no awkward breakpoints
- [ ] (1 pt) Desktop (1440px) — content doesn't stretch or float in empty space

### Launch Readiness (6 pts)

- [ ] (1 pt) Analytics installed and firing (GA4, Plausible, or equivalent)
- [ ] (1 pt) OG image renders correctly (test with opengraph.xyz or Twitter card validator)
- [ ] (1 pt) 404 page exists and is styled (not default browser/framework error)
- [ ] (1 pt) Favicon present in all sizes (16, 32, 180, 192, 512 — or SVG adaptive)
- [ ] (1 pt) Google Search Console configured (or equivalent)
- [ ] (1 pt) Social preview correct on LinkedIn, Twitter, WhatsApp

### Pass 5 Score: ___/15

Verdict:
- 12-15: LAUNCH READY — Ship it
- 9-11: ALMOST — Fix critical device/browser issues
- <9: NOT READY — Cross-device experience is broken

GUIA gotchas for this pass:

• Lenis smooth scroll has known issues on Safari — test carefully
• Vercel env vars with trailing newline break OG image URLs
• Docker healthcheck must pass before CI/CD reports success
• deploy.sh uses flock — no concurrent deploys on VPS
• Resend subdomain DNS: send.send.<zone> looks wrong but is correct (Resend adds send. prefix)

Step 6: Generate the Final Report

After running all applicable passes, compile the report:

## Final Report Template

# Website Finishing Audit: [Site Name]

**URL:** [https://...]
**Date:** [YYYY-MM-DD]
**Profile:** [Landing Page / Full Website / E-commerce]
**Auditor:** [Name] + Claude (website-finishing-director)

---

## Score Summary

| Pass | Name | Score | Max | Status |
|------|------|-------|-----|--------|
| 1 | First Impression | __/15 | 15 | [PASS/NEEDS WORK/FAIL] |
| 2 | Technical Foundation | __/25 | 25 | [SOLID/ACCEPTABLE/FRAGILE/BROKEN] |
| 3 | UX Completeness | __/25 | 25 | [COMPLETE/MOSTLY/INCOMPLETE/UNFINISHED] |
| 4 | Content & Brand | __/20 | 20 | [POLISHED/GOOD/ROUGH/UNFINISHED] |
| 5 | Cross-Device & Launch | __/15 | 15 | [READY/ALMOST/NOT READY] |
| **TOTAL** | | **__/100** | **100** | |

---

## Verdict

| Score Range | Verdict |
|-------------|---------|
| 85-100 | LAUNCH READY |
| 70-84 | CONDITIONAL — fix P0s then ship |
| 50-69 | NEEDS WORK — significant issues |
| <50 | NOT READY — major gaps |

**Override rule:** 1 unresolved P0 = NOT READY, regardless of total score.

**VERDICT: [LAUNCH READY / CONDITIONAL / NEEDS WORK / NOT READY]**

---

## Issues

### P0 — Blockers (must fix before launch)

| # | Pass | Issue | Location | Fix |
|---|------|-------|----------|-----|
| 1 | [1-5] | [Description] | [file:line or URL path] | [Concrete solution] |

### P1 — Important (fix within 1 week of launch)

| # | Pass | Issue | Location | Fix |
|---|------|-------|----------|-----|
| 1 | [1-5] | [Description] | [file:line or URL path] | [Concrete solution] |

### P2 — Nice-to-have (backlog)

| # | Pass | Issue | Location | Fix |
|---|------|-------|----------|-----|
| 1 | [1-5] | [Description] | [file:line or URL path] | [Concrete solution] |

---

## Strengths

- [What the site does well — acknowledge good work]
- [Specific design/technical/content wins]

## Recommendations

1. [Highest-priority improvement]
2. [Second priority]
3. [Strategic suggestion for next iteration]

---

## Sign-off

- [ ] All P0s resolved
- [ ] P0 + P1 resolved (optimal)
- [ ] Stakeholder review completed
- [ ] Go-live date confirmed: ____________

Examples

Example 1: Full Website Audit — credou.bzh

Context: Personal brand website for a consultant. Warm+Calm quadrant. Next.js 16, Framer Motion, Lenis. Just completed copy v3 and deployed.

Input:

Run a full website-finishing-director audit on credou.bzh. Brand quadrant: Warm+Calm. Target: decision-makers struggling with AI integration.

Output:

Website Finishing Audit: credou.bzh

URL: https://credou.bzh Date: 2026-02-12 Profile: Full Website Auditor: Matthieu + Claude (website-finishing-director)

Score Summary

Verdict

CONDITIONAL — Score 78/100. Fix P0s then ship.

Issues

P0 — Blockers

P1 — Important

P2 — Nice-to-have

Strengths

• Copy v3 (articulation bottleneck) is sharp — mechanism-first, no CV padding
• Papier/Encre dual theme is cohesive and on-brand
• Grain texture + borderless cards create genuine warmth (not template-y)
• Edge-rendered OG image is a solid SEO win

Recommendations

1. Fix security headers (P0) — 15 min task, high security impact
2. Create custom 404 page (P0) — maintain brand experience on dead links
3. Add prefers-reduced-motion (P1) — accessibility compliance

Why this works: The audit catches the gap between "technically deployed" and "actually finished." The site scores well on impression and content but has infrastructure gaps (security headers, 404) that a pure Lighthouse audit would flag separately without prioritization.

Example 2: Landing Page Audit — SaaS Product Launch

Context: New SaaS landing page for a productivity tool. Cold+Active quadrant. Single page, no forms, CTA links to waitlist.

Input:

Audit this landing page with the Landing Page profile (passes 1, 2, 4): taskflow.app. Quadrant: Cold+Active. Audience: engineering managers.

Output:

Website Finishing Audit: TaskFlow

URL: https://taskflow.app Date: 2026-02-12 Profile: Landing Page (Passes 1, 2, 4) Auditor: Product team + Claude (website-finishing-director)

Score Summary

Verdict

CONDITIONAL — 70% score. P0 in Pass 1 requires attention.

Issues

P0 — Blockers

P1 — Important

P2 — Nice-to-have

Strengths

• Technical foundation is solid (22/25) — fast, well-optimized
• Dark UI + gradient accents match Cold+Active quadrant perfectly
• Responsive layout works well across breakpoints

Recommendations

1. Clarify the hero — visitors need to understand the product category in 3 seconds
2. Remove fake testimonials — empty space is better than fake social proof
3. Rewrite CTA to match the actual action (waitlist, not "get started")

Why this works: The Landing Page profile skips UX completeness (Pass 3) and cross-device (Pass 5), focusing on what matters most for a single page: does it communicate clearly, is the tech solid, and is the content honest? The 70% score flags it as shippable with fixes — the P0s are copy problems, not engineering problems.

Skill Boundaries (Frontier Recognition)

This skill excels for:

• Pre-launch validation of any website (static, dynamic, SPA, SSR)
• Generating structured audit reports for client handoff
• Catching the "finishing gap" between technically working and truly ready
• Teams using GUIA stack (Next.js, Framer Motion, GSAP, Lenis) — gotchas are baked in

This skill is NOT ideal for:

• Deep performance engineering — Use Lighthouse, WebPageTest, or Chrome DevTools directly
• Accessibility audit (WCAG compliance) — This covers basics but isn't a full a11y audit. Use axe-core or WAVE.
• Security penetration testing — This checks headers, not vulnerabilities. Use OWASP ZAP.
• Conversion rate optimization — Use landing-page-optimizer for CRO. This skill checks if the CTA exists, not if it converts.
• Design direction — Use web-design-director for choosing the visual direction. This skill validates the execution.

Quality Checkpoints

Before accepting the audit output, verify:

• All 5 passes (or profile-appropriate passes) have been scored
• Total points match (15 + 25 + 25 + 20 + 15 = 100 for full audit)
• Every P0 has a concrete fix (not just "improve this")
• The verdict respects the override rule (1 P0 = NOT READY)
• Strengths section acknowledges genuine wins (not just problems)

Iteration Guide

"First pass catches the obvious. Second pass catches the subtle."

Recommended Iteration Pattern

Useful Follow-up Prompts

• "Re-run Pass 2 only — I fixed the security headers and 404 page."
• "The brand voice feels inconsistent between the homepage and about page. Deep-dive on Pass 4."
• "Score this against the E-commerce profile — we added a checkout flow."
• "Compare this audit to the previous one and show me what improved."

Learning Curve

Pro tip: Run Pass 1 (First Impression) at 50% completion, not just at the end. Catching positioning mismatches early saves redesign time.

Checklists & Templates

Quick Pre-Launch Checklist (5 min)

## Quick Check (non-negotiable minimums)

- [ ] Site loads in < 4s on mobile
- [ ] CTA visible above the fold
- [ ] No placeholder text anywhere
- [ ] No broken links on main pages
- [ ] HTTPS enforced
- [ ] 404 page exists
- [ ] OG image renders

If ALL checked → safe to soft-launch
If ANY unchecked → run full audit

GUIA Stack Checklist (Next.js + Framer + GSAP)

## GUIA Stack Finishing Checklist

### Next.js Config
- [ ] trailingSlash: true in next.config.js
- [ ] export const metadata on server components (not 'use client')
- [ ] Lazy SDK init (getSupabase(), getStripe()) — not module-level
- [ ] sitemap.ts + robots.ts present

### Animation
- [ ] useGSAP (not useEffect) for GSAP
- [ ] viewport={{ once: true }} on scroll animations
- [ ] prefers-reduced-motion media query
- [ ] Lenis (not Locomotive Scroll)

### CSS
- [ ] Global a{color} doesn't override CTA text — use inline style if needed
- [ ] No horizontal overflow on mobile
- [ ] Touch targets ≥ 44px

### Deploy
- [ ] Env vars set with printf (no trailing newline)
- [ ] Docker healthcheck passes before success report
- [ ] deploy.sh flock prevents concurrent deploys

Red Flags Checklist

## Warning Signs in Your Audit

- [ ] Score is 85+ but something still "feels off" → trust your gut, re-examine Pass 1
- [ ] All passes score well except one pass scores <50% → that pass is a blocker
- [ ] P0 list has more than 3 items → the site isn't ready, period
- [ ] Multiple P2s in the same area → that's actually a P1 (systemic issue)
- [ ] "It works on my machine" for any browser test → test on real devices

Integration with Other ClawFu Skills

Workflow sequence:

web-design-director → [build site] → website-finishing-director → [fix issues] → landing-page-optimizer
(direction)            (code)         (QA/finishing)               (iterate)      (CRO/optimization)

References

• Nielsen, Jakob. "10 Usability Heuristics for User Interface Design" (1994, updated 2020) — Foundation for UX completeness checks
• Google. "Web Vitals" — LCP, CLS, INP threshold definitions
• OWASP. "Secure Headers Project" — Security header recommendations
• Gardner, Oli. "101 Landing Page Optimization Tips" (Unbounce) — Pre-launch conversion checklist
• Norman, Don. "Emotional Design" (2004) — Visceral/behavioral/reflective design evaluation
• GUIA Production Memory — .claude/memory/agents/webdesign.md, seo.md, devops.md, gotchas.md

Related Skills

• web-design-director — Visual direction framework (use BEFORE this skill)
• design-trends-2026 — Current visual trends for Pass 4 validation
• minimalist-image-director — AI photography direction for image consistency
• landing-page-optimizer — Conversion optimization (use AFTER this skill)
• ai-video-qa — Sibling QA skill for video content (same scoring philosophy)

Skill Metadata

name: website-finishing-director
category: ai-design
subcategory: quality-assurance
version: 1.0
author: GUIA
source_expert: Nielsen Norman Group + Google Web Vitals + OWASP + GUIA Production Memory (8 shipped sites)
source_work: null
difficulty: intermediate
mode: centaur
estimated_value: QA/finishing audit engagement (~1500-3000 EUR per site)
tags: [web-design, qa, audit, finishing, pre-launch, ux, performance, seo, brand, cross-device, scoring]
created: 2026-02-12
updated: 2026-02-12

*This skill is part of the GUIA Premium Marketing Skills Library — the 201 layer that bridges AI basics and technical implementation.*