Each image is one section, generated as its own image call. Never combine multiple sections into one frame. Never return a single tall image that contains the whole page.
If you can only render one image at a time, output them sequentially in the same response, one after the other, until every section has its own image. Announce each one (“Section 1 of 8: Hero”, “Section 2 of 8: Trust bar”, etc.).
This rule overrides any model default that wants to collapse output into a single image.
The default left-text / right-image hero is the most overused AI pattern. It is allowed, but it should not be your first instinct.
About this skill
Trigger
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.
MIT — the text of every skill is reproduced unmodified, frontmatter included, under the upstream licence.
Discovery
13 skills found by walking the repository tree for SKILL.md, not by matching a directory convention. One layout observed: skills/*/SKILL.md.
Issue colours
Resolved from a deterministic hash of the owner name. Two accent tones are generated per issue and each is proven against its own ground before it ships: a single accent that passes AA on both light and dark paper is arithmetically impossible.
Heading repairs
1 repair applied to this skill so the document has one h1 and no skipped levels:
Shifted “84 headings” from h1 to h2 so the skill title is the only h1.
Spec compliance
10 editorial notes across 10 of 13 skills. They are printed in the margin of each skill rather than as errors here.
Your job is not to generate generic AI art.
Your job is to generate highly creative, premium, frontend design reference images that feel like real high-end website concepts.
Standard image generation tends to collapse into repetitive defaults:
centered dark hero
purple/blue AI glow
floating meaningless blobs
generic dashboard card spam
weak typography hierarchy
cloned sections
“luxury” that is just beige serif text
“creative” that is actually messy and unreadable
text-heavy layouts with not enough imagery
overly dense sections with no breathing room
Your goal is to aggressively break these defaults.
The output must feel:
art-directed
premium
visually memorable
structured
readable
implementation-friendly
clearly usable as a frontend reference
Do not generate random mood art unless explicitly asked.
Default to website design comps.
LAYOUT_VARIATION: 8
(1 = same anchor repeats, 10 = bold composition variety across sections)
CONVERSION_DISCIPLINE: 8
(1 = pure art moodboard, 10 = clear funnel + premium design balance)
AI Instruction:
Use these as global defaults unless the user clearly asks for something else.
Do not ask the user to edit this file.
Adapt these values dynamically from the prompt.
Interpretation:
Adaptation priority: the user’s brief always overrides defaults. Read the prompt carefully, then adjust dials, hero scale, background mode, gradient use, and composition variety to match — never force a recipe that contradicts the brief.
If the user says “clean”, reduce density and increase clarity.
If the user says “crazy creative”, increase variance and art direction.
If the user says “premium SaaS”, keep clarity high and art direction controlled.
If the user says “editorial”, allow stronger type and more asymmetry.
Bias toward stronger visual concepts, not safe layouts — but never against the brief.
Use imagery as a core design material — including as full-bleed backgrounds, not only as inline assets, when the brief allows it.
Vary composition: do not default to “text left, image right”. Move text to bottom-left, center, top-right, etc. across sections.
Keep sections breathable. Do not over-pack the page.
Prefer slightly more whitespace between sections than default.
Stay conversion-aware: every section has a job (hook / proof / educate / convert).
Use defaults from §1 + §2 with confident background variety
Pick one Hero Scale decisively, do not split the difference
Never force backgrounds, gradients, or full-bleed treatments where the brief asks for restraint. Never strip them out where the brief asks for atmosphere.
The left-text / right-image layout is allowed, but it is the most overused AI pattern — do not use it as the default. Reach for it only when it is the genuinely best fit.
Each section picks 1 anchor; across the site at least 3 different anchors must appear; vary the hero so the page does not open on the AI default.
Centered statement
Top-left lead, support bottom-right
Bottom-left text over background image
Bottom-right CTA cluster
Left-third caption + right-two-thirds visual (classic — use sparingly, never twice in a row)
Before rendering the hero image, ask yourself: “Am I drafting the default text-left / image-right layout out of habit?” If yes, prefer a different anchor from the list above unless the brief or brand truly requires the classic.
“full website” -> default to 8 sections -> 8 images
“marketing site” -> default to 8 sections -> 8 images
“product page” -> default to 6 sections -> 6 images
“portfolio” -> default to 6 sections -> 6 images
If the model can only render one image per call, generate them sequentially in the same response, one after the other, labeled “Section X of N: “ until the full set is delivered.
Do not collapse multiple sections into one tall slice. Section size and density may still vary, but the canvas stays horizontal and one section per frame.
If multiple images exist, do they clearly belong together?
Is imagery used strongly enough (with variation, not one repeated crop)?
Does the page breathe, or is it too dense?
Is there enough spacing between sections?
Does the creativity feel intentional and premium (concept spine visible, not cluttered)?
Is the spacing between sections even and controlled?
Do smaller sections still have enough surrounding space to feel clean?
Is there exactly one disciplined “second-read” moment supporting scan order?
Is composition varied across sections (anchors and background modes mixed)?
Is the hero scale (giant / mid / mini) chosen and executed cleanly?
Is there a clear conversion path (hook -> proof -> action) even in artistic sites?
Is the palette consistent across all per-section images?
Is each image horizontal and one-section-only?
Is the total number of images equal to the number of sections (never fewer)?
Is the hero using a varied composition (not defaulting to left-text / right-image out of habit)?
If not, refine internally before output. If the count is wrong, regenerate the missing sections. If the hero feels like a reflexive left-text / right-image default, prefer a different composition anchor.
Across the slice, deliberately vary foreground/background intensity at least twice (lighter → richer → calmer) so the scroll feels paced, not monotonous slabs.
Mix at least two distinct image crops where multiple sections exist — e.g. macro product + contextual environment, or portrait editorial + widescreen artifact — avoiding one repeated stock silhouette.
Charts, sparklines, and graphs appear only when the site type logically needs them (analytics, pricing, infra, observability brands). Else keep proof human (quotes, receipts, timelines, screenshots of real workflows).
When the brief names an industry or region, steer palette and typographic temperament to match — don’t ship default “neutral SF startup” unless the brief is intentionally generic SaaS.
Across all per-section images, internally log the chosen composition anchor and background mode. Reject the set if:
the same composition anchor repeats more than 2 sections in a row
the same background mode repeats more than 3 sections in a row
every section is inline-asset (no full-bleed background ever appears) AND the brief does not call for minimalism / typography-only / swiss / ultra simple
For non-minimalist briefs: push for at least one full-bleed (or duotone / atmospheric) background and at least one mini minimalist section in any multi-section site.
For minimalist briefs: this rule is suspended. Restraint is the design.
generate every per-section horizontal image, labeled “Section X of N: “, until the full set is delivered. Do not stop early. Do not summarize. Do not return only one image.
Do not ask unnecessary follow-up questions if a strong interpretation is possible.
The result should look like a top-tier website concept with strong imagery, confident creativity, and generous spacing - not a dense, repetitive AI layout.
Images inside a skill come from the upstream repository. Where the author gave no alternative text we mark the image decorative rather than inventing a description — a plausible caption we made up is worse than none for the reader who depends on it.
Marketplace
A plugin manifest is published at .claude-plugin/marketplace.json by leonxlnx, declaring 1 plugin. It is read for editorial metadata only — never as the skill index, which is always the repository tree.
Signal
Install counts come from skills.sh. They measure downloads, not quality, and an unranked repository is not an unread one.
Agent surfaces
The whole issue is available as one markdown document at /Leonxlnx/taste-skill.md, and each skill at its own .md URL.
Publication
Set by Skills Docs from the source repository. Body text is Literata at the reader’s chosen size and measure; code is Geist Mono. Nothing on this page was written by us except this paragraph.