
Marker-Doodle Brand Studiov1.0.2
Use this Skill to build agency site.
Build a loud, warm, hand-drawn website for a brand or packaging designer: cobalt, red and yellow marker accents on warm paper, a laughing cut-out portrait in a cobalt blob, colour-blocked service cards and real packaging photography. Case studies, a scope estimator and a contact brief all work, in 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
- 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.
- Case studies that pair each packshot with an in-use photo, plus a scope estimator, monthly and quarterly plans, process tabs and a validated contact brief.
- The signature marker headlines, blob portrait, stickers and colour service cards in a 21-page example with 16 images.
Good fit
- Independent brand and packaging designers who want their personality on the page.
- Photographers and illustrators who can keep Work as commissions and sell packages as services.
- Bakeries and food makers who can turn Work into their range and Process into how they make it.
Not for
- Real form delivery or payments; the contact brief and estimator show honest demo results only.
- Brands that want a quiet, minimal or corporate look rather than marker type and stickers.
- Presenting the fictional Juno Halvorsen, her clients or quotes as real work.
About this Skill

Marker-Doodle Brand Studio builds a loud, warm, hand-drawn website for an independent brand or packaging designer: warm paper, ink text and three marker colours (cobalt, tomato red and sunflower yellow), chisel-marker headlines, a laughing cut-out portrait in a cobalt blob, colour-blocked service cards and real packaging photography. The example is the fictional designer Juno Halvorsen, with 21 connected pages.

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 studio site: a work index with filters, search and sort, four case studies with packshot and in-context photos and copyable colour swatches, services with four detail pages, about, insights with four articles, process, contact, privacy and a not-found page.
- A scope estimator that totals a starting price and timeline and pre-fills the contact form, plus plans with a monthly and quarterly switch.
- A validated contact brief with loading and success states, process tabs with a timeline chart, and a reading-progress bar on articles.
- One-time hero entrance, a red underline that draws in, googly eyes that follow the pointer and a client ribbon that pauses on hover, all calm under reduced-motion settings.

How to use it
- Share your name, what you design, your projects with clients and outcomes, services with real prices and your contact details. Missing copy is drafted as plausible placeholders and listed for you to confirm.
- Send a cut-out portrait on white and a black-and-white square portrait, plus packshots and in-use photos for each project, or let the agent generate them in the same style.
- Open every page on desktop and phone, try the filters, estimator and contact form, and ask for changes.

Type is set in Permanent Marker, Bricolage Grotesque and Kalam, embedded in the file. New images come from your agent's own image tool and may carry its usage charges.
What you need before you start
- You bring
- Your name, what you design and a short introduction · Projects with client, year and outcome, plus services with real prices and contact details · A cut-out portrait and project photos, or approval to generate stand-ins
- 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 portraits, packshots and in-use photos
- Outside costs
- New packshots, in-use photos and portraits are generated with your agent's own image tool, which may charge for usage. Without one, supply your own photos; the studio, process and sticker images can stay. Viewing the example costs nothing.
- Last tested
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
User reviews
Loading reviews…









