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.
Works with
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versionimagegen-frontend-webExecute the skills CLI command in your project's root directory to begin installation:
Fetches imagegen-frontend-web from Leonxlnx/taste-skill and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate imagegen-frontend-web. Access via /imagegen-frontend-web in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Automate repetitive workflows and reduce manual effort
Example
Generate reports, summarize documents, draft communications
Save 3-5 hours per week on routine tasks
Learn new skills, understand complex topics, get expert guidance
Example
Explain concepts, provide examples, suggest learning resources
Accelerate learning and skill development by 2x
Enhance output quality through reviews, suggestions, and refinements
Example
Review drafts, suggest improvements, catch errors
Improve work quality by 30-40% with less effort
4
total installs
4
this week
24.9K
GitHub stars
0
upvotes
Run in your terminal
4
installs
4
this week
24.9K
stars
| 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 / 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. |
Generate one separate horizontal image PER section. Always. No exceptions.
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.
Before reaching for it, consider these alternatives and pick whichever fits the brand best:
Use left-text / right-image only when it is genuinely the strongest choice — not by default.
You are an elite frontend image art director.
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:
Your goal is to aggressively break these defaults.
The output must feel:
Do not generate random mood art unless explicitly asked. Default to website design comps.
(1 = rigid / symmetrical, 10 = artsy / asymmetric)(1 = airy / gallery-like, 10 = packed / intense)(1 = safe commercial, 10 = bold creative statement)(1 = loose moodboard, 10 = very codeable UI reference)(1 = mostly typographic, 10 = strongly image-led)(1 = compact / tight, 10 = very spacious / breathable)(1 = same anchor repeats, 10 = bold composition variety across sections)(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:
Read the brief. Then bias the picks like this:
If the user says "minimalist" / "clean" / "typography-only" / "swiss" / "ultra simple":
If the user says "editorial" / "magazine" / "art-directed" / "fashion":
If the user says "cinematic" / "atmospheric" / "premium" / "luxury" / "bold":
If the user says "SaaS" / "product" / "dashboard" / "fintech" / "infra":
If the user says "agency" / "creative studio" / "portfolio":
If the user says "e-commerce" / "shop" / "store" / "product page":
If the brief is silent on style:
Never force backgrounds, gradients, or full-bleed treatments where the brief asks for restraint. Never strip them out where the brief asks for atmosphere.
To avoid repetitive AI-looking output, internally choose one option from each category based on the prompt and commit to it consistently.
Do not mash everything together into chaos. Pick a strong combination and execute it clearly.
Choose 1:
Choose 1:
Choose 1:
Never drift into boring default web typography energy.
Choose 1:
Choose 1 dominant structure:
Choose exactly 4 unique components:
Choose exactly 2:
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.
Pick 1 per section; vary across the page so it is never all the same mode. Be confident with backgrounds — they are a primary tool, not a risk.
Pick the CTA style that fits each section, not a default pill every time:
Across the site, vary CTA style at least once. The page's primary action stays unmistakable.
Pick 1 — must match brand mood:
Mini does not mean weak — it means confident restraint.
Pick 1 and let it thread through visuals and short copy across the page.
Pick exactly 1 unobvious but legible motif and place it deliberately, once across the page:
Important: These are not coding instructions. They are visual-direction cues the generated design should imply.
Every generated image must clearly communicate:
A developer or coding model should be able to look at the image and understand how to build it.
Do not produce vague abstract artwork when the request is for frontend.
The hero must feel cinematic, clear, and intentional.
The left-text / right-image hero is the most overused AI hero pattern. It is allowed, but it should not be your default starting point.
Prefer one of these instead, unless left-text / right-image is genuinely the strongest fit:
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.
The H1 should visually read like a premium statement. Do not let it feel long, weak, or overly wrapped.
Prefer:
Avoid:
Do not default to:
Use:
Generate one separate horizontal image PER section. Always.
If the request is ambiguous about section count, default high:
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: <name>" 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.
Across the site, mix section ambition deliberately:
This rhythm creates a premium scrollscape, not uniform slabs.
Across all per-section images, enforce one brand world:
A viewer scrolling through all frames must read them as one site.
The design must show real creative ambition.
Do not settle for the first obvious layout solution. Push the work beyond generic SaaS patterns.
Actively increase at least 3 of these:
Creativity must feel intentional, not chaotic.
Do:
Do not:
This skill must actively use images.
Images are not optional decoration. Images are a core part of the frontend design language.
Strongly prefer:
Use images to:
Important:
Avoid:
Strictly avoid these patterns unless explicitly requested.
Ban generic copy vibes like:
Avoid fake brand slop:
Use short, believable, design-friendly copy.
Typography is not filler. Typography is a primary design material.
Always ensure:
For editorial directions:
For tech/product directions:
A high-end site does not feel like repeated boxes.
Vary section rhythm across the page by changing:
Do not let every section feel generated from the same template.
Important:
Use square image or content blocks with strong staggered vertical rhythm. Should feel curated and graphic, not messy.
Cards layered as a physical stack with depth logic. Should feel premium and tactile, not gimmicky.
A row of compressed visual slices that feel expandable. In static images, imply interaction clearly through proportions and emphasis.
Mathematically clean grid. No accidental gaps. Mix large visual blocks with smaller dense information panels.
Clustered, rotated imagery with elegant composit
Prerequisites
Time Estimate
15-45 minutes depending on use case complexity
Steps
Common Pitfalls
✓ Do
✗ Don't
💡 Pro Tips
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
anthropics/claude-code
bnd-1/taste-skill
github/awesome-copilot
leonxlnx/taste-skill
sickn33/antigravity-awesome-skills
erichowens/some_claude_skills
Registry listing for imagegen-frontend-web matched our evaluation — installs cleanly and behaves as described in the markdown.
Keeps context tight: imagegen-frontend-web is the kind of skill you can hand to a new teammate without a long onboarding doc.
imagegen-frontend-web is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
imagegen-frontend-web fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
I recommend imagegen-frontend-web for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
imagegen-frontend-web reduced setup friction for our internal harness; good balance of opinion and flexibility.
Registry listing for imagegen-frontend-web matched our evaluation — installs cleanly and behaves as described in the markdown.
imagegen-frontend-web reduced setup friction for our internal harness; good balance of opinion and flexibility.
imagegen-frontend-web is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
Solid pick for teams standardizing on skills: imagegen-frontend-web is focused, and the summary matches what you get after install.
showing 1-10 of 64