What is the default output?

One self-contained HTML file with both web-font families and chosen photos embedded for offline opening. The supplied builder converts the source and separate assets into that file. An existing or requested framework gets native components, routes and typed content; the guide selects Next.js with TypeScript when the framework is unspecified.

Where do photographs come from?

The agent plans a consistent set by role, then uses your owned assets or its image tool, which may charge for generation. Stories need appropriate lead/detail images, products their own subjects, and real masthead people their photographs or disclosed stand-ins. Issue covers and framed prints are composed from photo plus editable type and layout in the page.

Can this represent another type of brand?

Yes. A studio can publish journal entries and techniques alongside pieces/workshops; a travel publisher can organize neighborhood guides and maps; a food brand can connect origin stories to delivery plans. Adjust collections, counts and terms to the business. Missing facts remain identified drafts, and the site still needs actual commerce/email services if those actions are to be live.

Scattered-Cards Magazine

Previews from the publisher

Give a small publication space for its stories as well as the objects and subscriptions around them. Scattered-Cards Magazine combines a five-card paper fan, a ruled topic index and generous photography with substantial long-form reading pages. A connected shop and subscriber journey extend the editorial identity without turning the site into a constant news feed.

What you get

A white editorial home with five rotated story cards, a heavy Newsreader headline, ruled/numbered topic index and thumbnail reveals. Asymmetric story grids, a full-bleed feature, portrait carousel, composed issue band, publication figures, reader letters and newsletter keep the page varied. Schibsted Grotesk handles navigation and controls.
Stories with search, topic filters, sorting, saved items and grid/index views, plus an explanatory empty state. Article pages include lead/detail photography, drop cap, subheads, pull quote, facts/credits aside, reading progress, copy/save controls and a next story. Topic pages connect online stories with a print archive and relevant issue links.
A small shop for issues, prints and notebooks with product galleries, option-dependent prices, framed print previews, quantities and local stock states. Covers and print treatments combine photographs and editable page typography rather than baking text into generated images. A bag drawer/page, delivery-zone/method totals and validated checkout lead to a no-payment demonstration.
Subscription cards with one-/two-year terms, per-issue prices and recipient/gift controls, plus an About masthead, contact tabs, FAQ/search, newsletter, delivery, privacy, terms and 404. Subscription selections enter the local bag; no paid subscription or recurring delivery service is activated.
A worked example with 36 connected routes, eight stories, seven topics, six products and 21 role-planned photographs. Content collections drive repeated pages and counts; the buyer’s range and publication schedule can differ. Reader letters, staff, stockists, prices and dates need actual facts or identified placeholders.
One HTML deliverable with both font families and chosen photos embedded for offline viewing by default. Source, visual/page/interior/image/motion/framework guides, builder and static validator are supplied. An existing or requested framework project receives native components/routes and typed content instead.

Before you choose

Make each story useful enough to justify its full reading page, then connect relevant topics and objects around it. The editorial structure should carry the identity even before buying anything. Keep subscription terms explicit and make local checkout/form feedback honest until real services are connected.

Good fit

Independent magazines, journals and newsletters publishing a considered selection of long reads per issue.
Makers, studios, travel or food brands combining editorial stories with a small shop, subscription or membership offer.
Editors who want stories, topics, archive entries, products and plans managed as simple linked content collections.

Not for

A high-volume news operation or a continuously updated blog feed; the composition favors a few substantial reads.
A loud multicolor or dark-theme identity; white paper, restrained photography and a quiet accent carry this design.
Live payments, recurring subscriptions or email delivery without separate integrations. Local form feedback does not establish an actual submission.

How to use

You say

/scattered-cards-magazine Build the website for Ferrow, a quarterly of places, objects and people, with a shop and subscriptions.

Provide the publication/brand name, audience, statement, topics and several stories with titles, places, summaries and full reading content. Add products/prices, subscription terms and delivery details where relevant. Record missing people, letters, stockists and figures as placeholders to confirm, not invented proof.
Map the content to stories, topics, print archive, shop and plans. Keep at least three stories and ideally enough for the homepage selection; its signature fan always has five linked cards. Update issue schedule, counts, reading paths and archives together. A studio can use techniques and pieces, a travel publisher neighborhoods/guides, and a coffee brand origins/delivery plans while preserving the editorial relationships.
Write one photographic direction and a role-based slot plan: lead/detail per story, issue still life, product still life and masthead portraits. Supply owned photography or use the agent’s image tool, whose generation may cost credits. Reuse an image only for the same story/object; real editors/authors need real photos or disclosed stand-ins. Compose masthead text and print frames in code.
Configure product options, subscription issue counts/terms, gift details and delivery zones/rates with actual offers. Verify each option’s price and visual preview and the per-issue arithmetic. Remove periodical-specific issue fans if the business has no issues, and remove unsupported reader letters or stockists rather than filling them with fiction.
Use Node.js 18 or newer and build-time internet to embed the three font files and local images into the default offline HTML file. The finished file opens without runtime requests. In an existing or requested framework, port the shared design and page/content collections natively; the guide uses Next.js/TypeScript when a framework is requested but unnamed.
Run static checks and review the home plus every route family at desktop/tablet/phone widths. Read a full article and check caption/facts/next-story links, search/filter/saved/empty states, carousel keys, print options, gift validation, bag/delivery/checkout and invalid/valid contact/newsletter forms. Test reduced motion and mobile overflow. Connect and separately verify commerce, subscriptions and actual message delivery before publishing those promises.

Requirements and costs

You bring: Publication or brand name, audience and a short statement · Topics and a few stories with titles, places and summaries · Products, prices, subscription terms and delivery details (optional; missing facts become listed placeholders)
Dependencies: Node.js 18 or newer on your agent's machine, to run the bundled script that builds the single offline file · Internet access while the file is built, so the fonts can be downloaded once and embedded · An image tool in your agent for the story, product and portrait photos (optional if you supply your own photos)
Outside costs: Story, product and portrait photos are generated with your agent's own image tool, which may incur that tool's usage charges. You can supply your own photos instead. Nothing else uses a paid service.
Publisher testing: v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT