agentsclimarketplace
Sign in

Imagegen frontend web

Skill wedabro/bro-skills/.agents/skills/imagegen-frontend-web

Generate premium horizontal website design-reference images for landing pages, marketing sites, and product pages. Use when the requested deliverable is web design imagery or when an image-first implementation workflow needs upstream section concepts. Produce images only, one standalone image per page section; do not write frontend code or mobile-app screens.From its SKILL.md

Install
npx -y skills add wedabro/bro-skills --skill imagegen-frontend-web

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.8 KB, 500 tokens by cl100k_base, as published. Nobody here has run it

Frontend Web Image Direction

Create a coherent set of implementation-ready website section images, not a compressed mood board.

Output contract

  • Generate one separate horizontal image for every requested section.
  • Never combine multiple sections into one tall board or tiny overview.
  • Keep one palette, typography system, material language, and narrative spine across the set.
  • Make each image large enough to inspect and recreate accurately.
  • Generate fresh section images; do not crop earlier outputs to simulate missing views.
  • Return images only. Do not write code.

Workflow

  1. Infer audience, conversion goal, section list, brand constraints, and required visual tone.
  2. Define a compact design bible: palette, type character, imagery, surfaces, grid, CTA language, and recurring motif.
  3. Assign each section a distinct composition and purpose before generating.
  4. Generate sections individually in narrative order while carrying the same design bible forward.
  5. Check legibility, realistic content density, CTA clarity, cross-section consistency, and composition variety.

Composition rules

  • Keep the hero clean and readable; match headline scale to copy length and leave the main CTA visible.
  • Vary composition anchors: centered, split, off-grid, full-bleed, product-led, editorial, or data-led as the story requires.
  • Do not repeat left-text/right-image layouts throughout the page.
  • Use real visual hierarchy instead of filling every section with cards, badges, pills, or KPI tiles.
  • Avoid generic AI-purple gradients, empty glass panels, fake dashboards, placeholder copy, and decorative noise.
  • Use background imagery, texture, typography, and negative space intentionally; not every section needs a container.
  • Keep all visible text short, plausible, and comfortably readable at the output resolution.

Detailed reference

Read only the relevant section of references/full-guide.md:

  • Variation system and composition choices: search COMBINATORIAL VARIATION ENGINE.
  • Hero constraints: search HERO MINIMALISM RULES.
  • Section counting and sizing: search IMAGE COUNT & PAGE SLICING.
  • Anti-slop, type, density, and material rules: search the corresponding heading.
  • Standard page packs or examples: search DEFAULT SITE PACKS or EXAMPLE INTERPRETATIONS.

Use rg -n "<heading>" references/full-guide.md; do not load the full guide unless the brief genuinely needs the complete art-direction system.

What ships with it: 1 file

36.0 KB alongside SKILL.md

references/

Gives 0 of the 12 instructions most design frontend skills give in 500 tokens

Counted across 1,169 of the 1,878 authors here whose files we hold, read 2026-08-07

  • Use CSS variables for color consistencyin 72 of 1169, across 23 files
  • Commit to one bold aesthetic direction before codingin 72 of 1169, across 27 files
  • Match implementation complexity to the aesthetic visionin 70 of 1169, across 20 files
  • Add atmospheric background effects and texturesin 57 of 1169, across 9 files
  • Use unexpected spatial compositions and layoutsin 56 of 1169, across 8 files
  • Implement real working codein 55 of 1169, across 7 files
  • Vary themes and aesthetics across different designsin 48 of 1169, across 7 files
  • Launch chromium in headless modein 47 of 1169, across 4 files
  • Close the browser when donein 47 of 1169, across 4 files
  • Run provided scripts with help flag firstin 47 of 1169, across 4 files
  • Wait for network idle statein 47 of 1169, across 4 files
  • Use descriptive selectors for elementsin 47 of 1169, across 4 files

Said here and by no other author read

  • maintain one palette and typography system across the set
  • infer audience conversion goal and brand constraints
  • assign each section a distinct composition and purpose
  • generate sections individually in narrative order
  • use real visual hierarchy over decorative elements
  • use background texture and negative space intentionally

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 326,696. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.