Grid-Paper Beverage Brand Site
+6Skillry Pick
Gradient Juice Brand Sitev1.0.2
Use this Skill to build brand site.
Rising
5.014 downloads0 likes0 saves
$4.99
What do I get when I buy this Skill?Build a joyful brand and shop website for a drinks or food brand: a full-bleed gradient campaign photo of someone drinking from your bottle, cream text ribbons drifting along curves, wavy section edges and bright photo tiles. The shop, crate builder, bag and checkout preview all work, delivered as one self-contained file that opens in any browser and works offline.
Picked most often by
Updated Oct 3, 2026
Similar Skills
View all skills+6
What you get
- One self-contained website file that opens in any browser and works offline, with fonts and images built in; a port into your own framework project when you have one.
- Working commerce flows: product pages with pack sizes, a subscription crate builder, a bag drawer, a checkout preview with delivery-area checks and a stockist map.
- The signature hero, ribbons, waves and photo collage in a 28-page example with 17 images, plus story, growers, journal, delivery, FAQ and policy pages.
Good fit
- Juice, coffee, tea and snack brands that sell online and want a bright, cheerful storefront.
- Local makers who deliver in set zones or run a subscription box.
- Cafes and bakeries that can turn the shop into a menu and find-us into a single visit block.
Not for
- Real payments or order fulfilment; checkout validates details but never charges anyone.
- Brands that need a dark, minimal or corporate look rather than gradients and ribbons.
- Selling the fictional Halcy products or using its bottle artwork as your own.
Brand IdentityDigital Publications & Web PagesBuild Brand SiteStyle-lockedEditable OutputJuice CollageJuice HeroJuice RibbonJuice Wave
About this Skill
Gradient Juice Brand Site builds a joyful brand and shop website for a drinks, food or lifestyle brand: a full-bleed gradient campaign photo of someone drinking from your bottle, cream text ribbons drifting along curved paths, wavy edges between sections and bright photo tiles. The example is Halcy, a fictional cold-pressed juice press in Ventura, California, with 28 connected pages including a working shop, crate builder and checkout preview.
What you get
- One self-contained website file that opens in any browser and works offline, with fonts and images built in. If you already have a framework project, the design is ported into it instead.
- A full shop: six product pages with pack sizes and live prices, collections, a weekly crate builder, a bag drawer, a checkout preview with delivery-area checks and an honest success page.
- Brand pages: our story, growers with a month switcher, a journal with four articles, a stockist finder with a map, delivery and returns, FAQ with search, contact, newsletter, policies and a designed not-found page.
- One art direction for every image: matching product still lifes in the same bottle and light, plus bright lifestyle scenes.
- Ribbons whose text drifts slowly, a quick hero entrance and calm reveals, all paused for reduced-motion settings.
How to use it
- Share your brand, products with prices and pack sizes, where and when you deliver, your story and contact details. Missing copy is drafted as plausible placeholders and listed for you to confirm.
- Let the agent generate a new hero photo with your name on the bottle and one still life per product in the same light, or send your own photos. Two neutral drink scenes in the package can stay.
- Open every page on desktop and phone, add products to the bag, build a crate, try the checkout preview, and ask for changes.
Type is set in Bricolage Grotesque, Figtree and DM Serif Display, embedded in the file. New images come from your agent's own image tool and may carry its usage charges; the checkout never takes payment.
What you need before you start
- You bring
- Brand name, products with prices and pack sizes, and a short story · Market details: currency, delivery zones or shipping, and contact details · Your own product and team photos, or approval to generate new images
- 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, or your own photos, for the hero and product images
- Outside costs
- The hero photo and product still lifes are generated with your agent's own image tool, which may charge for usage. Without one, supply your own photos; two neutral drink scenes can stay. Viewing the example costs nothing, and the checkout never charges.
- Last tested
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
User reviews
Loading reviews…