# Design Landing Page Art Direction

> Art-direct a landing page, homepage, or campaign page through narrative, visual pacing, hierarchy, and CTA discipline.

- Skill: `contextgo/design-landing-page-art-direction` (Agent Skill)
- Install (CLI): `npx skillmds@latest add contextgo/design-landing-page-art-direction`
- Raw SKILL.md: https://api.skillmd.com/api/skills/contextgo/design-landing-page-art-direction/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: contextgo (https://skillmd.com/u/contextgo)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/contextgo/design-landing-page-art-direction

---


# 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`