Web Concept Shots
One polished design image per section of your landing page, before any code.
What it does
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.
Install in under a minute
Mac or Linux, after you download
unzip web-concept-shots.zip -d ~/.claude/skills/Windows PowerShell
Expand-Archive web-concept-shots.zip -DestinationPath $HOME\.claude\skills- Start a new Claude Code session so it sees the skill.
- Ask in plain words, for example: "Use Web Concept Shots on this project."
- Unzip the download, then zip just the web-concept-shots folder if your computer added an extra folder.
- In Claude.ai, open Settings, then Capabilities, and upload it under Skills.
- Turn the skill on and ask Claude to use it.
Web Concept Shots uses the open SKILL.md format, so it also works in agents like Cursor, Gemini CLI, GitHub Copilot and Codex. Copy the web-concept-shots folder into that agent's skills folder, for example .cursor/skills/ or .github/skills/ in your project.
What's inside
The 16 main sections of the SKILL.md, in order.
- Active baseline configuration
- The combinatorial variation engine
- Frontend reference rule
- Hero minimalism rules
- Image count & page slicing
- Creativity escalation rule
- Image-first art direction
- Anti-AI-slop rules
- Typography-first discipline
- Section rhythm rule
- Component execution guidelines
- Density & spacing discipline
- Color & material rules
- Image / media direction
- Default site packs
- Multi-image consistency rule
In the download: LICENSE, NOTICE.md, SKILL.md
Credit and license
Web Concept Shots is a renamed, packaged copy of imagegen-frontend-web by Leonxlnx (github.com/leonxlnx/taste-skill), used under the MIT license. The license and a list of changes ship inside the download.
Questions
Does Web Concept Shots work in Claude.ai, not just Claude Code?
Yes. In Claude.ai, upload the web-concept-shots folder as a zip in Settings under Capabilities. It also works in other agents that support Agent Skills, like Cursor, Gemini CLI and GitHub Copilot.
What do I get?
A zip with the web-concept-shots folder: its SKILL.md (6,288 words) and its license files. One payment, instant download.
Who made Web Concept Shots?
It's a renamed, packaged copy of imagegen-frontend-web by Leonxlnx, used under the MIT license. The license and a list of changes ship inside the download.