Mock Up a Website
Generate premium website comps: one art-directed image per section that looks like a real high-end landing page, clear enough to hand to a coding agent to build. Images only, no code.
Install the skill or give me an instruction how to install it - imagegen-frontend-web from https://github.com/Leonxlnx/taste-skill Free Open source Works in Claude, Cursor, Codex & more
What it does
Give it a brief, the kind of site and the brand vibe, and it generates a full set of website design comps: one art-directed image per section, each looking like a real high-end site. It renders images only, six frames for a landing page or eight for a full site by default, and keeps them clear enough that a coding agent can build straight from them.
Every frame is its own horizontal image showing layout, hierarchy, spacing, type scale, and which CTA leads, so it works as a buildable reference rather than a vague moodboard or one endless scrolling mockup. It commits to a single art direction up front, theme, typography, hero scale, and palette, then deliberately varies the composition and calls to action section to section while holding everything in one brand world. It bans the tired left-text, right-image AI hero by default.
When to use it
- You want website design comps before building
Get one art-directed image per section that looks like a real high-end site.
- You need mockups a coding agent can build from
Each frame stays clear enough to hand straight off, never a vague moodboard or one tall image.
- You want section variety in one brand world
It commits to a single art direction, then varies composition and CTAs across every section.
FAQ
Does it write any code?
No. imagegen-frontend-web produces images only, one art-directed comp per section, clear enough to hand to a coding agent to build. The building happens elsewhere.
Does it keep the sections consistent?
Yes. imagegen-frontend-web commits to one art direction for theme, typography, and palette, then renders each section as its own frame in that single brand world while varying the composition.
Will it default to the usual AI hero?
No. imagegen-frontend-web deliberately bans the overused left-text, right-image AI hero, varying layout and CTAs across frames so the comp looks art-directed rather than generated.
Pairs well with
Design the Image, Then Build It
Leon Lin & blueemi Design the website as an image first, then build it to match. Your agent art-directs section references, then codes a frontend from them instead of guessing straight into markup.
taste-skill/image-to-code 62.8k 
Mock Up a Mobile App
Leon Lin & blueemi Generate premium mobile app mockups: app-native screens and full flows in clean phone frames, with readable type and one design system across every screen. Images only, no code.
taste-skill/imagegen-frontend-mobile 62.8k