contextgo 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-selectiondesign-system-distillationdesign-handoff-brief