
Grid-Paper Beverage Brand Sitev1.0.2
Use this Skill to build brand site.
Build a complete, shoppable brand website on warm grid paper: heavy condensed headlines, outlined cards with hard ink shadows, a rotated photo fan with stickers in the hero, and one playful color per flavor. Product, collection and recipe pages, a story page, stockists with a map, wholesale, FAQ, delivery, contact, a working bag and checkout, and legal pages all connect. It suits drink, food and other small consumer brands, and 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 brand shop: home, product, collection and recipe pages, our story, stockists with a map, wholesale, FAQ, delivery, contact, newsletter, bag, checkout and legal pages
- The grid-paper look: warm paper with fine grid lines, heavy condensed headlines, outlined flavor-tinted cards, a five-photo hero fan with stickers and a cobalt footer wordmark
- Working shop details: a bag drawer with a free-delivery meter, size and subscription pricing, search, filters, a recipe servings scaler and checkout with validation
Good fit
- Oat, juice, coffee, tea, kombucha or snack brands that want a cheerful sticker-and-carton personality
- Small consumer brands that need shop, recipes or rituals, stockists and support pages designed as one family
- Founders who want a believable storefront before connecting real payments, or a design to port into their own project
Not for
- Quiet luxury or corporate brands: heavy condensed type, stickers and flavor colors are deliberately loud and playful
- Stores that need real payments, accounts or order delivery today: the bag and checkout confirm on the page and say nothing was charged
- One-screen teasers: the Skill builds a whole connected site, so a single landing section would waste most of it
About this Skill

Grid-Paper Beverage Brand Site builds a complete, shoppable brand website on warm grid paper, with heavy condensed headlines, outlined cards, sticker accents and one playful color per flavor. Every link leads to a designed page, and the bag, search and forms all respond. The example is Oat Parade, a fictional oat drink brand with 34 connected pages.

What you get
- A home page in varied compositions: photo fan hero, flavor marquee, product rail with filters, story split, stat bento, field-to-fridge journey, recipe bento, testimonials, FAQ, stockist finder and newsletter
- Inner pages for every product, collection and recipe, plus our story, stockists with a map, wholesale, FAQ, delivery, contact, bag, checkout, privacy, terms and a not-found page
- Shop interactions: a bag drawer with quantities and a free-delivery meter, size and subscription prices, search, saved items, a recipe servings scaler and checkout with validation
- Photos planned one per subject in one art direction, embedded with the fonts in one file that works offline

How to use it
- Share your brand name, one-line promise, products with prices and sizes, how people buy, and your story.
- Your agent maps flavors, recipes and stockists to your business, generates the photos and fills every page.
- Open the file, click through the shop, bag and recipes on desktop and phone, 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. Nothing in the bag or checkout is charged or sent until you connect real services.
What you need before you start
- You bring
- Brand name, one-line promise and audience · Products with names, prices, sizes and what makes each one different · How people buy (online, stockists, wholesale, subscription), your story, and delivery and contact details
- 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 product, recipe and story photos (optional if you supply your own photos)
- Outside costs
- The agent generates product, recipe and story photos with its 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…








