arthai-marketplace

/magazine-generator

Generate a single-file HTML horizontal-swipe magazine from product metadata and brand guidelines.

Synopsis

/magazine-generator [product-name]

When to use it

Creating a visually striking product story to share with a client, prospect, or board — no designer needed
Packaging an engagement outcome or a client’s new product into a swipeable, self-contained showcase
Not for: structured written deliverables like reports and decks — that’s /deliverable-builder; or formal proposals — that’s /pitch-generator

Quickstart

/magazine-generator acme-pro

What you’ll see: a short brand questionnaire (tagline, colors, fonts, product copy), then a self-contained output/magazine-acme-pro.html — a 10-page horizontal-swipe magazine you can open in any browser, email, or host as a static asset (Google Fonts requires internet access to load; offline viewing falls back to system fonts).

Examples

/magazine-generator                 # collect all inputs interactively
/magazine-generator acme-pro        # use "acme-pro" as the product name, collect the rest
/magazine-generator acme-pro --fast # skip optional inputs, use sensible defaults

Arguments & flags

Flag	Values	Default	What it does
`[product-name]`	—	asked interactively	Product name; also drives the output filename slug
`--fast`	—	off	Skips optional inputs and uses sensible defaults

What it does

Reads project context (prep work, before you’re asked anything) — checks .claude/knowledge/shared/domain.md and CLAUDE.md if they exist, for product description, audience, differentiators, and any documented color/font preferences. Anything found here pre-fills the questions in the next step — you won’t be asked for it again.
Collects brand inputs — user-confirmation checkpoint: asks for tagline, primary/accent/dark-panel colors, heading and body fonts (Google Fonts), and product copy via a single AskUserQuestion prompt. Anything already known from step 1 or the argument is pre-filled. For colors/fonts, type “defaults” for a clean dark-teal + Inter combination, or paste/enter your own. Copy can be pasted, given as a file path, or synthesized with “use project context”.
Generates the magazine — a single self-contained HTML file with 10 fixed pages, each covering one story beat: Cover, Problem, Solution, Features, Audience, Competition, Origin Story, Launch/Traction, Tech, Back Cover. Scroll-snap horizontal swipe, dot navigation, keyboard arrows, and touch gestures are built in. All CSS and JS are inline; the only external dependency is Google Fonts.
Quality gate — 12 checks before writing: exactly 10 pages, scroll-snap present, at least 3 dark panels, an oversized stat element, the Google Fonts link, navigation dots, keyboard handler, touch handler, no external JS libraries, all 10 page IDs present, no leaked [PLACEHOLDER] text, and no secrets in the output.
Writes the file and offers next steps — adjust colors, rewrite a page, change fonts, or /share the file.

Output & artifacts

output/magazine-<product-name-slug>.html — the complete magazine (slug = product name lowercased, spaces → hyphens); the output/ directory is created if needed
Safe to commit to a repository as a static asset; works opened directly from the filesystem (no server)

Troubleshooting

Problem	Fix
Fonts don’t load when viewing	Google Fonts needs internet access — for offline viewing, expect fallback fonts
Swipe feels off in Firefox	Known Firefox quirk with smooth scroll + snap — the built-in JS navigation (arrows/dots) handles it correctly; Chrome and Safari are the primary targets
Mobile users don’t find the navigation	Horizontal swipe is non-standard on mobile — ask to add visible left/right arrow buttons for small viewports
No traction numbers to show	Leave them out — the launch page falls back to “Private Beta” or “Coming [Quarter Year]” copy instead of invented stats
Stakeholder raises accessibility concerns	The fixed-page horizontal-scroll format deliberately trades off WCAG 2.1 vertical-scroll compliance for the magazine aesthetic — flag this before publishing

/consulting — the client-engagement suite this complements for product storytelling
/pitch-generator — formal proposals and pitch documents instead of a visual magazine
/deliverable-builder — structured written deliverables from engagement data
/share — format the generated magazine for sharing