oli-deacon Codex Marketing Taste
Use this skill for front-of-site work where visual distinctiveness matters:
- marketing sites
- landing pages
- launch pages
- portfolios
- bold homepage redesigns
Do not use this as the default for dashboards, settings, tables, admin tools, or dense product UI. Use a calmer product-facing skill for those.
This skill is intentionally more opinionated than a general frontend taste skill. It should create stronger visual direction without turning into random novelty.
1. Start With A Concept Read
Before coding, identify:
- the conversion goal
- the audience
- the emotional register: premium, playful, austere, technical, editorial, trust-first, experimental
- the strongest available brand cues
- the risk level: conservative refresh or bold redesign
State a one-line concept read internally. The page should feel like it was built around one idea, not assembled from generic sections.
Examples:
- "Editorial AI infrastructure launch page for technical buyers, restrained but cinematic, credibility first."
- "Playful consumer product landing page for design-aware shoppers, bright, tactile, and conversion-led."
If two clearly different visual directions are plausible, ask one concise clarifying question. Otherwise commit and move.
2. Build A Concept Spine
Pick one dominant visual logic and carry it through the page:
- typography-led
- image-led
- contrast-led
- grid-led
- motion-led
- material-led
Every section should feel like part of the same story, even when layouts vary.
3. Avoid Safe Sameness
Avoid default AI compositions unless the brief clearly calls for them:
- centered hero with small badge and two CTAs
- three equal feature cards in the same row
- soft gradient plus glass cards with no brand logic
- repeated sections that only swap copy
- fake charts, fake dashboards, or fake browser windows used as filler
- generic startup illustration style
When the page looks competent but forgettable, push one of these harder:
- section composition
- typography contrast
- image treatment
- rhythm between dense and open sections
- background system
- CTA staging
4. Layout Pacing
Marketing pages need rhythm, not uniformity.
Rules:
- vary section families when useful: split, stack, grid, editorial, showcase, proof, comparison, CTA
- alternate compression and breathing room intentionally
- make at least one section feel surprising in composition, while staying legible
- let one hero choice dominate instead of hedging every idea at once
Do not produce eight sections that all resolve to headline, paragraph, cards.
5. Typography
Typography should do real brand work.
Rules:
- choose a clear type mood that matches the brief
- control hierarchy with weight, contrast, width, case, spacing, and line length, not just font size
- keep copy blocks readable and decisive
- avoid default-looking font choices when the project permits stronger direction
If the repo already has a locked type system, work within it rather than fighting it.
6. Color And Surface Direction
Color should look chosen, not generated by habit.
Rules:
- derive accents and backgrounds from the brand or concept read
- use gradients only when they reinforce the visual system
- avoid flat emptiness unless minimal restraint is the point
- use texture, pattern, framing, or tonal depth when it improves atmosphere
Do not rely on one fashionable effect across the whole page.
7. Motion
Marketing motion can be stronger than product motion, but it must still feel authored.
Rules:
- use reveal, sequencing, parallax, stickiness, or transitions only when they support the concept
- ensure reduced-motion fallbacks exist
- keep interactions performant and readable
- make the strongest motion moments count instead of animating everything equally
8. Proof And Credibility
Marketing pages still need trust.
Rules:
- make social proof, product proof, or outcome proof feel integrated, not bolted on
- prefer believable screenshots, metrics, quotes, logos, or product details over decorative filler
- if assets are missing, choose a cleaner layout instead of inventing fake proof
9. Images And Assets
Use real images or credible assets when available.
If assets are missing:
- generated imagery is allowed when it fits the workflow and the concept
- avoid filler visuals that weaken the page
- call out missing critical assets when they block a convincing result
Image generation is a tool, not a requirement.
10. Redesign Safety
For redesigns:
- keep track of what makes the current page recognizable
- preserve critical messaging, routes, and compliance constraints unless the user approves changes
- upgrade composition, hierarchy, and art direction without casually breaking structure
11. Shipping Check
Before shipping, confirm:
- the page has a recognizable concept spine
- sections do not all use the same composition
- the hero has a clear focal point
- CTAs are visible and unambiguous
- typography and spacing feel intentional
- the page looks less generic than the default agent output
- the boldness level still matches the audience and product
- responsiveness and reduced-motion behavior are acceptable
If a local preview is available and browser tooling exists, verify visually before finalizing.
12. Delivery Style
In the final response:
- summarize the concept read in one short sentence when useful
- explain the high-level visual changes and why they support the page goal
- mention preserved constraints
- mention any missing assets or unverified visual risks
13. Boundaries
This skill does not:
- turn every project into an Awwwards clone
- justify disruptive changes that hurt usability or trust
- replace an existing design system without reason
- force image generation or motion-heavy execution
Strong taste is useful only when it sharpens the message.