83.3K+Download
Skip to the usage guide
imagegen-frontend-webby Leonxlnx

ImageGen Frontend Web Skill.

A Claude Code and Codex skill for UI design: section-by-section website design references via image generation.

  • Web & UI
  • Image
Download OpenDesignView usage guide
Leonxlnx/taste-skill · skills/imagegen-frontend-web/SKILL.mdSKILL.md
--- name: imagegen-frontend-web description: 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 / … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. THE COMBINATORIAL VARIATION ENGINE ## 3. FRONTEND REFERENCE RULE ## 4. HERO MINIMALISM RULES ## 5. IMAGE COUNT & PAGE SLICING ## 6. CREATIVITY ESCALATION RULE
Front matter and section headings read from the upstream file on 2026-09-14 · 36,780 characters in full

01 What it does

What the imagegen-frontend-web Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

The skill generates premium website design references as separate horizontal images—one image per section. It enforces composition variety beyond the overused left-text/right-image pattern, uses full-bleed backgrounds confidently, varies hero scales (giant/mid/mini), and maintains a single consistent palette across all sections. Designed for landing pages, marketing sites, and product comps that developers or coding models can recreate.

It uses configurable baseline dials: DESIGN_VARIANCE 8, VISUAL_DENSITY 4, ART_DIRECTION 8, IMPLEMENTATION_CLARITY 9, IMAGE_USAGE_PRIORITY 9, SPACING_GENEROSITY 8. The skill breaks AI defaults through combinatorial variation—choosing one theme paradigm, typography character, hero architecture, section system, and narrative concept spine—while maintaining conversion discipline and generous even spacing between sections.

What it produces

  • Horizontal images (16:9, 16:10, or 21:9) rendering one focused section per frame in high fidelity
  • Section-labeled image set: 'Section X of N: <name>' until the full count is delivered
  • Consistent brand world across all frames: same palette, typography family, CTA identity, border radius, image treatment, tonal voice
See the example prompt ↗

How It Works

  1. 01
    Read Brief and Adapt Baseline Dials

    The skill reads the user prompt carefully, then adjusts dials (design variance, visual density, art direction, implementation clarity, image usage, spacing, layout variation, conversion discipline), hero scale, background mode, gradient use, and composition variety to match the brief.

  2. 02
    Choose One Option from Each Combinatorial Category

    The skill commits to one theme paradigm, one background character, one typography character, one hero architecture, one section system, exactly 4 signature components, exactly 2 motion-implied languages, and one narrative concept spine—all based on the prompt.

  3. 03
    Generate One Horizontal Image per Section

    Each section receives its own separate horizontal 16:9, 16:10, or 21:9 image. The skill never combines multiple sections into one frame or returns a single tall slice.

  4. 04
    Vary Composition Anchors and Background Modes

    Across sections, the skill picks different composition anchors (centered, bottom-left over image, top-left lead, stacked center, off-grid editorial, etc.) and background modes (solid, full-bleed image, editorial side-image, duotone, radial vignette) so the page avoids repetitive AI layouts.

  5. 05
    Run 21-point Clarity Check Before Output

    Before finalizing, the skill verifies hierarchy, hero cleanliness, visual distinctiveness, absence of AI tells, premium feel, codeability, multi-image consistency, imagery strength, breathing room, even spacing, intentional creativity, and correct image count.

02 Find your fit

When to Use the imagegen-frontend-web Skill

Use the imagegen-frontend-web skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Landing pages, marketing sites, and product comps that developers or coding models need to accurately recreate
  • Premium designs with clear conversion funnels—not pure art moodboards
  • Image-led designs that use photography as core design material
  • Developers or coding models needing very codeable UI references
  • Sites requiring bold composition variety across sections to avoid repetitive AI layouts

Know the Boundaries

  • Requests wanting one combined tall image instead of separate per-section frames
  • Safe commercial layouts without creative ambition or bold statements

What to Provide

  • Site type and conversion goalThe skill infers the site type (landing page, marketing site, product page, portfolio, SaaS, e-commerce, agency, editorial) and primary conversion goal from the prompt to guide design decisions.
  • Section count or default ambiguitySpecify the number of sections, or the skill defaults to 6 for landing pages and 8 for full websites.
  • Brand mood keywordsKeywords like minimalist, clean, editorial, magazine, cinematic, atmospheric, premium, luxury, SaaS, product, fintech, agency, creative studio, e-commerce steer hero scale, background mode, gradient use, and composition choices.
  • Industry or region for cultural alignmentWhen the brief names an industry or region, the skill steers palette and typographic temperament to match—not defaulting to neutral SF startup unless intentionally generic SaaS.

03 Inside the skill

Rules the imagegen-frontend-web Skill Gives Claude Code and Codex

4 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Avoid left-text/right-image Hero by Default

    The default left-text/right-image hero is the most overused AI pattern.

  2. Vary Composition—at Least 3 Different Anchors Must Appear

    Each section picks one composition anchor (centered, top-left lead, bottom-left over image, bottom-right CTA cluster, left-third/right-two-thirds, right-third/left-two-thirds, centered low, off-grid editorial, stacked center, image-as-canvas).

  3. Default Section Counts by Request Type

    Landing page or site template defaults to 6 sections (6 images). Full website or marketing site defaults to 8 sections (8 images). Product page or portfolio defaults to 6 sections.

  4. Keep Hero Headline Short and Powerful

    The H1 should visually read like a premium statement. Headlines should usually read like 5-10 strong words, not a paragraph.

04 Put it to work

Install imagegen-frontend-web in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add imagegen-frontend-web to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-web

Generic skills CLI form for skills/imagegen-frontend-web/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Adapt this prompt with your own content and constraints, then run it in Claude Code or Codex.

Example prompt
design 8 sections for a fintech website

Source: SKILL.md example (verbatim).

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Total number of images equals the number of sections—never fewer
  • Page breathes—spacing between sections is even and controlled, not too dense
  • Composition is varied across sections—anchors and background modes are mixed
  • Someone can code from this reference

In OpenDesign imagegen-frontend-web is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Branch main
Skill file
skills/imagegen-frontend-web/SKILL.md Content checksum recorded at verification; commit ccbc156
License
MIT From LICENSE.
Repository stars
86,946 GitHub snapshot taken 2026-09-14 for the whole Leonxlnx/taste-skill repository, which contains 11 skills in this catalog. Not a rating or usage count for imagegen-frontend-web.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. HARD OUTPUT RULE — READ FIRSTGenerate one separate horizontal image per section always, never combine multiple sections into one frame
  2. HERO COMPOSITION BIAS — READ FIRSTAvoid the overused left-text/right-image hero default; prefer alternatives like centered over background or bottom-left over image
  3. 1. ACTIVE BASELINE CONFIGURATIONSets dials: DESIGN_VARIANCE 8, VISUAL_DENSITY 4, ART_DIRECTION 8, IMPLEMENTATION_CLARITY 9, IMAGE_USAGE_PRIORITY 9, SPACING_GENEROSITY 8, adapted from prompt
  4. 2. THE COMBINATORIAL VARIATION ENGINEChoose one option from each category: theme paradigm, background character, typography character, hero architecture, section system, 4 signature components, 2 motion languages, narrative spine
  5. 4. HERO MINIMALISM RULESKeep hero clean, headline short and powerful, prioritize negative space, avoid overcrowding first viewport with pills and detail
  6. 5. IMAGE COUNT & PAGE SLICINGOne horizontal image per section; landing page defaults 6, full website 8; mix section size variety; enforce continuity across frames
  7. 6. CREATIVITY ESCALATION RULEShow real creative ambition by increasing at least 3: composition, typography, scale contrast, hero concept, image treatment, section rhythm, framing
  8. 7. IMAGE-FIRST ART DIRECTIONActively use images as core design material: art-directed photography, product imagery, editorial imagery, image crops, framed panels, layered compositions
  9. 8. ANTI-AI-SLOP RULESBan: endless centered sections, purple/blue AI gradients, floating blobs, glassmorphism spam, gradient headlines, generic copy, marquee logo strips, fake KPIs
  10. 10. SECTION RHYTHM RULEVary section rhythm by changing density, image-to-text ratio, alignment, scale, whitespace, card grouping, background intensity; avoid repeated template boxes
  11. 12. DENSITY & SPACING DISCIPLINEPage must breathe; use even vertical spacing between major sections, avoid cramped-then-empty jumps, whitespace is a design tool
  12. 13. COLOR & MATERIAL RULESUse one controlled palette: 1 primary, 1 secondary, 1 accent, neutral scale; allow professional tonal gradients; ban rainbow mesh blobs
The Skill's Own Description
“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.”

Front-matter description from SKILL.md. The full file is about 36,780 characters. Read the full file on GitHub.

ImageGen Frontend Web

Run imagegen-frontend-web on a Real UI Design Task.

The imagegen-frontend-web skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-web