skills.rest
Gekkos-tech
Gekkos-techOFFICIAL
Explore all skills by this author →
WebsiteGitHub

imagegen-web

Generate website design reference images per section with consistent style tokens.

4|Updated Jul 10, 2026
Search Tags:#developer tools#website design#reference images#style consistency#composition variety
One-click install
npx skills add https://github.com/Gekkos-tech/agency-os --skill imagegen-web
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: imagegen-web
Source: https://github.com/Gekkos-tech/agency-os/tree/main/plugins/ad-creative/skills/imagegen-web
Command: npx skills add https://github.com/Gekkos-tech/agency-os --skill imagegen-web

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill generates website design reference images, enabling developers to rebuild designs with precision.

Core Features & Use Cases

  • Design Reference Images: Generate images for each section of a website, ensuring high fidelity and rebuildability.
  • Style Consistency: Enforces a shared style-token block across all images for a cohesive look.
  • Composition Variety: Offers at least 4 distinct compositions to avoid repetition and enhance visual interest.
  • Text Clarity: Ensures readable text within images for important information.

Quick Start

Generate website design reference images for a landing page with 8 sections using the style-token block provided.

Frequently Asked Questions about imagegen-web

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate website design reference images for developer rebuilds?▼

To generate website design reference images, you input a section list, a style-token block, and specific design elements. The Skill outputs a set of high-fidelity images for each section, optimized for developers to rebuild designs with precision.

How do I maintain style consistency across multiple website section images?▼

You maintain style consistency across website section images by enforcing a shared style-token block across all generated outputs. This ensures a cohesive look throughout the entire set of design reference images for your website sections.

Can I get composition variety in website design reference images?▼

Yes, you can get composition variety in website design reference images. The Skill offers at least 4 distinct compositions for each section to avoid repetition and enhance visual interest across the generated website design references.

What inputs do I need to create high-fidelity website design references?▼

You need a section list, a style-token block, and specific design elements to create high-fidelity website design references. These inputs allow the Skill to generate accurate, readable, and rebuildable design images for each part of your website.

Does this tool ensure text clarity inside website design reference images?▼

Yes, this tool ensures text clarity inside website design reference images. It guarantees readable text within the generated images so developers can accurately identify and rebuild important information during the development process.

Related Skills

Explore More Design & Creative Skills→
magicpro97magicpro97
8

imagegen-frontend-web

Generate horizontal design reference images for landing page sections.

Community
Advanced
MarcoAntoliniMarcoAntolini
1

image-to-code

Analyze website design images and generate frontend implementation code references.

Community
Advanced
Cao-RCao-R

frontend-design

Transform UI style requirements into React and TypeScript code using design tokens.

Community
Advanced
mvillmowmvillmow
18

phase-plan-generate

Generate plan.md files with a 9-section Template 1 structure.

Community
Basic