
Scattered-Cards Magazinev1.0.2
Use this Skill to build blog site.
Build an independent magazine website on a white editorial ground: a hero fan of five rotated paper story cards, a heavy serif headline, a ruled and numbered topic index, generous photographic story grids and long-form article pages with drop caps, pull quotes and a facts aside. Topic archives, a shop for issues and prints with a bag and checkout, subscriptions with gift options, about, contact, FAQ, delivery and legal pages all connect. It arrives as one self-contained file that opens in any browser and works offline.
Picked most often by
Updated Oct 3, 2026
Preview gallery
Runs in
Generates with
Similar Skills
View all skillsWhat you get
- A full magazine site: home, stories, long-form articles, topics with archives, shop and product pages, bag, checkout, subscribe, about, contact, FAQ, newsletter, delivery and legal
- The editorial look: five scattered story cards in the hero, a ruled topic index with hover thumbnails, asymmetric photo grids, a full-bleed feature and a serif reading column
- Working parts: search overlay, story filters with grid or index view, saved stories, print options with a framed preview, a bag drawer, checkout validation and gift subscriptions
Good fit
- Independent magazines, journals and newsletters that publish long reads and want a calm, photographic home online
- Makers, studios, travel or food brands that pair a journal with a small shop and a subscription or membership
- Editors who want stories, topics, products and plans kept as simple collections that every page renders from
Not for
- News sites or high-volume blogs: the layout favours a few long reads per issue over a constant feed
- Brands that want loud colour or a dark theme: the look is a white editorial ground with quiet photography
- Live payments or email: checkout and forms validate and confirm on the page but never claim a charge or a sent message
About this Skill

Scattered-Cards Magazine builds an independent magazine website: a white editorial ground, a hero fan of rotated paper story cards, a ruled topic index and long-form article pages, plus the shop, subscription and help pages a real publication needs. The example is Ferrow, a fictional quarterly of places, objects and people, with 36 connected pages.

What you get
- A home page with the card fan hero, topic index, an issue grid, a full-bleed feature story, a carousel, an issue band, stats, reader letters and a newsletter sign-up
- Long-form article pages with a drop cap, pull quote, facts aside, reading progress and next story, plus topic pages with a print archive
- A shop for issues, prints and notebooks with options that change the price, a bag drawer, a bag page and checkout with validation
- Subscriptions with yearly terms and gift details, an about page with the masthead, contact, FAQ, newsletter, delivery, privacy, terms and a not-found page
- Two web fonts and role-planned photos embedded in one file that works offline

How to use it
- Share your publication's name, topics, a handful of stories, any products and your subscription offer.
- Your agent maps them onto stories, topics and shop, writes one art direction, generates the photos and fills every page.
- Open the file, read a story, add something to the bag, walk through checkout, and ask for changes in plain words.

Photos come from your agent's image tool, which may carry that tool's usage charges, or from your own library. Checkout and forms confirm on the page and never claim a payment or email went through.
What you need before you start
- 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.
- Last tested
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
User reviews
Loading reviews…









