What is the imagegen-frontend-web skill?
Imagegen-frontend-web is a SKILL.md by makies06 that makes an AI agent generate website design reference images. It picks one option per design category, builds the image prompt from a six-block template, then runs a self-critique gate and regenerates once if the result drifts into generic AI looks.
Imagegen-frontend-web is a single-file skill in the makies06/imagegen-frontend-web repository. It generates images of website designs, such as a hero or an 8-section landing page, that a developer or coding agent can read and recreate. It does not write the page code itself.
The leonxlnx/taste-skill repository also contains a skill with this name. They are different files in different repositories, so check which one your agent has loaded.
What changes in your agent's output
- The agent follows a nine-step workflow, from inferring site type and tone to returning the image with a one-line note on its choices.
- It commits to one option in each category, such as theme, hero architecture and section system, and picks exactly four signature components and two motion cues.
- The prompt is built from six blocks: scene, layout, typography, palette, imagery and mood, plus a standing list of negatives.
- A self-critique gate checks for flags like a centered glowing hero or purple-blue defaults, and the agent regenerates once if needed.
What the variation engine and gate cover
The engine covers theme paradigm, background character, typography character, hero architecture, section system, signature components and motion-implied language. A brand archetype layer, with Sage as the default, and five surface finishes sit on top. Defaults, flags and an aspect ratio matrix keep images implementation-friendly.
Who the imagegen-frontend-web skill is for
Best for
- Designers and developers who want a visual reference before a page is built.
- Projects with a CLAUDE.md, styleguide or design-tokens file, because the skill inherits palette and type from them.
- Teams who will turn the reference into code afterwards with a skill such as image-to-code.
Not for
- Mobile app screens. imagegen-frontend-mobile is built for those, though this skill has a short mobile mode.
- Generating front-end code. For that, use design-taste-frontend.
- Commercial reuse without checking terms. The repository declares no license.
Use it with UiChemy
The output here is a reference picture. Once a coding agent has turned it into a built site, UiChemy AI to WordPress imports that AI build into editable Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install Imagegen Frontend Web Skill: Website Design References
git clone https://github.com/makies06/imagegen-frontend-web.gitClone the repository
Run
git clone https://github.com/makies06/imagegen-frontend-web.git. The repository holds a README.md and one SKILL.md.Copy the skill
Copy
SKILL.mdinto a folder named imagegen-frontend-web inside the place where your agent loads skills. The README says to drop it into your skills directory or package it with Anthropic's package_skill.py.Use an image-capable agent
The workflow ends with generating an image, so your agent needs an image generation tool available.
Ask for a reference
Request a hero or a multi-section page, for example an 8-section fintech landing page.
Check that it loaded
Ask for a hero for an architecture studio. The agent should return an image plus a one-line note on the choices it made, and the hero should not be a centered headline over a glowing gradient.
Key features
- Nine-step workflowInfer the request, check project context, make combinatorial choices, pick archetype and finish, set image count and ratio, build the prompt, generate, run the critique gate, and return the image.
- Six-block prompt templateThe template is scene, layout, typography, palette, imagery and mood, followed by a negative list, written out as one dense paragraph for the image model.
- Aspect ratio matrixFixed ratios, such as 16:10 for a single hero, 3:4 for a page slice and 9:19.5 for mobile. Square outputs are ruled out because they collapse hierarchy.
- Combinatorial variation engineOne choice per category: theme paradigm, background, typography, hero architecture and section system, with four signature components and two motion cues.
- Brand archetype layerArtisan, Sage, Rebel, Magician, Caregiver or Explorer sets positioning. Sage is the default when the brief is unclear.
- Surface finish layerOne finish per image: clean digital, subtle film grain, print halftone, risograph offset or scanned paper.
- Self-critique gateCritical flags, such as a centered glow hero, gradient headline or purple-blue palette, trigger a regeneration. Two quality flags do the same, with at most one automatic retry.
- Project context ingestionThe agent checks an agent instructions file, a styleguide, design-tokens.json, a references folder and package.json, and inherits palette and type when they exist.
- Multi-image consistencyLater images copy the palette, typography and mood blocks verbatim from the first, so a multi-slice page reads as one site.
Frequently asked questions
What is the imagegen-frontend-web skill?
It is a SKILL.md by makies06 that makes an AI agent generate website design reference images. The agent makes combinatorial design choices, builds the prompt from a six-block template, generates the image and runs a self-critique gate, regenerating once if it drifts into AI defaults.
How do I install imagegen-frontend-web?
Clone makies06/imagegen-frontend-web and place its SKILL.md in a folder named imagegen-frontend-web where your agent loads skills. The README also mentions packaging it with Anthropic's package_skill.py. Your agent needs an image generation tool for the skill to finish its workflow.
Does it write website code?
No. It generates reference images of site designs that a developer or coding agent can recreate. To go from an image to code, pair it with a skill such as image-to-code, which handles the implementation side.
Is this the same as imagegen-frontend-web in taste-skill?
No. The leonxlnx/taste-skill repository has its own skill with the same name. They are separate files in separate repositories, so check the repository and its README before you pick one for your agent.
What is the self-critique gate?
After the first image, the agent checks critical flags, such as a centered glowing hero, gradient headline, symmetric card rows or purple-blue AI colors, and quality flags like unclear hierarchy. If flags trip, it regenerates once with a corrective note.
Can it use my brand colors and fonts?
Yes. Before generating, it scans the working directory for CLAUDE.md, a styleguide, design-tokens.json, a references folder and package.json. If it finds project context, palette and typography come from it, while layout choices stay fresh.
What license does the skill use?
GitHub shows no license for the repository, which holds only a README and a SKILL.md. The install count of 1 comes from a third-party skills listing. Ask the author about terms before using it in commercial work.