| skill_id | marketing-site-design-review |
| name | Marketing Site Design Review |
| description | Review a marketing or landing page section by section against pro-vs-amateur heuristics, layout rules, typography and color guardrails, and a 4-pixel mathematical system. Use when auditing a homepage, landing page, pricing page, or product page for conversion-grade design quality. |
| skill_type | combo |
| categories | ["marketing-and-content","product-and-design"] |
| path | docs/research/youtube-library/skill-drafts/marketing-site-design-review/SKILL.md |
| promoted_to | apps/web/src/lib/services/agentic-chat/tools/skills/definitions/marketing_site_design_review/SKILL.md |
| last_promoted | 2026-06-10 |
| status | registered |
Marketing Site Design Review
Use this skill to audit a marketing website (homepage, landing page, pricing page, comparison page, product page, contact page) section by section. The review distinguishes between an amateur-looking marketing site and a conversion-grade one without rebuilding from scratch.
This skill is the public-facing sibling of ui-ux-quality-review (which targets in-app product UI). They share foundational rules; this skill adds section-specific scorecards for the page types found on a marketing site.
When to Use
- Audit a homepage, landing page, pricing page, or comparison page
- Diagnose why a marketing site converts poorly despite good traffic
- Improve a section the founder already knows is weak (hero, FAQ, demo, contact)
- Plan a redesign before writing copy
- Score a competitor's marketing site to learn what to copy or beat
Do not use this skill for in-app product UI (use ui-ux-quality-review), brand identity work, or assessment-funnel design (use landing-page-scorecard-funnel).
Foundational Rules (Apply Everywhere)
These pre-conditions must hold across the whole site before section-level review is meaningful.
- 4-pixel system. Every spacing, padding, gap, container width, and font size is a multiple of 4px (scale: 4, 8, 12, 16, 24, 32, 48, 64, 96). Type scale: 16, 20, 24, 28, 32, 40, 48, 64.
- Type roles only. Headings (2–3 levels), paragraphs, buttons, labels. No invented styles per section.
- Line height inversely proportional to size. ~1.0× for big headlines, ~1.5× for body. Never trust browser 125%.
- Body text contrast ≥ 4.5:1, ideally 7:1.
- 60/30/10 color proportion. 60% dominant, 30% secondary, 10% accent (CTAs only).
- Hierarchy ranking. One primary, a few secondary, the rest uniform — per section and across the page.
- Layout effort uniform. Hero, FAQ, testimonials, contact all get the same care. Dropping effort in any one section signals "template."
Section Scorecard
Walk the page top to bottom. For each section present, run the matching review.
| Section | Amateur Tell | Pro Move |
|---|
| Hero | Stock photos + four-cell layout + corporate blue + generic tagline | Two zones (text + visual), real photo of real work, named customer, primary + secondary CTA |
