Design Landing Page Art Direction

Use this skill when the page has to persuade, frame a product, or create desire, not merely host controls.

Read ../../references/page-lenses.md before proceeding.

Use when

• The task is a homepage, launch page, campaign page, or feature marketing page.
• The page needs a clearer hero, module sequence, or CTA structure.
• The current output looks generic or flat despite having "pretty" components.

Do not use when

• The page is mainly a working surface such as a dashboard or settings area.
• The task is only to document an already-fixed landing-page design.

Landing-page failures to avoid

• treating every section as equally important
• adding visual energy everywhere instead of concentrating it
• writing a hero with no belief shift
• overloading the page with too many CTAs
• using app-shell density on a marketing page

Workflow

1. Define the page job

Clarify:

• who the page is for
• what they should understand or feel first
• what action matters most

2. Design the hero intentionally

Decide:

• headline posture
• supporting proof
• primary CTA
• visual drama location

3. Sequence the modules

Organize the page through:

• promise
• explanation
• proof
• feature depth
• trust
• CTA close

4. Tune pacing and contrast

Control:

• dense versus spacious sections
• where imagery or gradients are allowed
• where text needs to compress
• where the eye should rest

5. Flag implementation risks

Call out where the design could drift into either bland SaaS or over-designed noise.

Output format

Return:

1. Page goal

• audience
• belief shift
• primary CTA

2. Hero direction

• layout
• copy hierarchy
• visual treatment

3. Section sequence

• ordered modules
• purpose of each module

4. Visual language

• type
• surfaces
• color concentration
• motion

5. Risks and anti-patterns

• what would weaken the page

Use together with

• design-style-archetype-selection
• design-system-distillation
• design-handoff-brief