marketing-ui-mockup-hero-generatorlisted

Generates finished raster marketing visuals — landing-page hero shots, device-in-context product mockups, and dashboard screenshots — and actually renders them via the ideogram MCP tools, not just drafts a prompt. Use whenever the user asks for a "hero image," "landing page hero," "device mockup," "product mockup," "dashboard screenshot," "App Store screenshot," "pitch deck visual," or "pitch deck screenshot." This skill produces finished images, not functional HTML/CSS/React — a request for working code, a live component, or a responsive layout should go to a code-output tool instead, never get pulled into this skill just because it also involves UI. Sibling to `brand-identity-sheet`, `character-model-sheet`, and `moodboard-generator` structurally (same prompt-composition pattern, same paragraph-prompt + compositional-deconstruction pair of artifacts), but targets marketing-visual deliverables — a single hero shot, a device-in-context product photo, a dashboard screen — rather than a whole brand system or a
devkindhq/ideogram-ai-toolkit · ★ 2 · Web & Frontend · score 70

Install: claude install-skill devkindhq/ideogram-ai-toolkit

# Marketing UI Mockup / Hero Generator This skill produces one of three fixed format types, each a finished raster image rendered via Ideogram, not a mockup described in prose or built as working code: - **Landing-page hero shot** — a full-bleed marketing hero with headline, subheadline, and CTA button copy baked in via Ideogram's text rendering, typically showing the product in a browser/device frame or as a standalone visual. The shot a visitor sees before scrolling. - **Device-in-context product mockup** — a product's UI shown inside a physical device shell (laptop, phone, tablet, browser chrome) placed in an environmental or lifestyle context (desk surface, hand, studio backdrop). The format for pitch-deck slides and "see it in the real world" shots. - **Dashboard screenshot** — a single stylized app/dashboard screen (nav, cards, charts, sidebar) rendered to look polished and "real" for App Store listings, pitch decks, or marketing pages — not a literal render of any actual live codebase. See `references/mockup-anatomy.md` for each format's full compositional-layer breakdown; read it before drafting a prompt (workflow step 2 below), not reverse-engineered only after generation. ## The two artifacts this skill produces 1. **A generation prompt** — a paragraph, Ideogram-legible, naming every assigned compositional layer in reading order with literal copy in quotes. 2. **A compositional deconstruction** — the structured JSON breakdown per `referenc