What is the default deliverable?

One self-contained HTML file containing the connected pages, fonts and images. The source template still refers to external fonts and local images; the bundled build script embeds them into the final offline file. If you have a framework project or request one, the design is adapted into native components and real routes rather than displayed inside an iframe.

Must I generate new images?

You can supply your own assets. Otherwise the agent’s image tool can create project packshots and matching context photographs, with any provider charges billed separately. Supply real portraits for a real person; generated portraits must be identified as stand-ins. The neutral studio/process and three article illustrations can remain temporary placeholders, but fictional project images should not represent your actual commissions.

Can the estimator and plans use my prices?

Yes. Replace the estimator’s line items, bundle logic, additional-packaging rules and timelines with your own, then verify the results and contact prefill. Remove it if you do not quote this way. Keep monthly/quarterly switching only for two real offers; unspecified rates and availability remain placeholders for confirmation.

Marker-Doodle Brand Studio

Previews from the publisher

Give a small creative business a recognizable face and a clear route from selected work to an enquiry. Marker-Doodle Brand Studio combines a cut-out portrait, oversized marker lettering and cobalt, red and yellow accents on warm paper. Its project stories, service pages and scope builder explain what you offer; the fictional example supplies the structure, not your identity or client proof.

What you get

A connected studio website with Work, Services, About, Insights, Process and Contact, project/service/article detail pages, Privacy and a designed missing-page view. The example contains 21 routes: four project cases, four services and four articles. Collections can be adapted to your actual work rather than preserving those counts.
A consistent handmade visual system: four short marker headline lines, portrait inside a cobalt blob, stickers and small doodles, a tilted client ribbon, colored service cards and an asymmetric project grid. Permanent Marker handles short display text, Bricolage Grotesque handles reading and controls, and Kalam supplies handwritten notes. Warm paper and ink hold the cobalt, tomato-red and sunflower-yellow accents together.
Case studies with client/year/service/timeline facts, brief, approach, outcome, deliverables, an attributed quotation and copyable color swatches. Each project pairs a product packshot with a photograph of the same product in use. Previous/next links connect the cases; the work index provides filters, search, sorting and an empty state.
Service detail pages with inclusions, phases, fit, related work and FAQs. A scope estimator calculates a starting price and duration, then carries the chosen scope into the contact brief. Plan cards switch between monthly and quarterly rates where both genuinely exist. These are configurable presentation tools, not a checkout or a binding quotation.
A process view with selectable steps and a timeline chart, articles with reading progress, a quote carousel, newsletter validation and a contact brief with errors, loading, a local success summary and reset. Form demonstrations do not store or send messages; real delivery requires a connected service.
By default, one HTML file with fonts and images embedded for offline viewing. The package supplies the source template, 16 example images, image directions, adaptation guides, an asset-building script and a static validator. An existing or requested framework project instead receives native pages and components, preserving the visual system.

Before you choose

Choose the work and services first, then let the marker treatment give them character. Two photographs of the same real project and a concrete explanation of your decisions are more useful than extra decorative sections. Keep local form demonstrations separate from real enquiry delivery and publish only prices and client proof you can support.

Good fit

Independent brand or packaging designers whose project stories, services and personality should reinforce each other.
Photographers and illustrators presenting commissions as case studies and offering clearly scoped service packages.
Food makers or bakeries able to map Work to their range, Services to wholesale/events and Process to how they make their products. Selling directly needs additional commerce functionality.

Not for

A restrained corporate or minimal identity: marker headlines, bright color fields, portraits and stickers define this format.
Collecting real enquiries, accepting payments or running a shop from the unconnected example alone.
Publishing the fictional designer Juno Halvorsen, her clients, outcomes, prices or quotations as your own verified work.

How to use

You say

/marker-doodle-brand-studio Build a site for Juno Halvorsen, a brand and packaging designer who draws in marker, with four case studies.

Prepare your name, discipline, location, introduction and contact details. For each project supply the client, year, services, timeline, brief, approach, actual outcome and permitted quotation. For services supply the promise, price/unit, inclusions, phases and relevant FAQs. Add biography, process, articles, availability and privacy details; identify missing facts as placeholders to approve.
Plan the images before building. Supply a color cut-out portrait on white and a square black-and-white portrait of the same person, plus a packshot and matching in-use photo for each project. Use your own photographs or the agent’s available image tool; generation can incur charges. Generated people remain disclosed stand-ins. The package’s studio/process photographs and three neutral article doodles may serve as placeholders, while sample-specific packaging imagery and the sample-tin illustration need replacement.
Choose the output in context. With no existing project, build the single HTML file; Node.js 18 or newer and build-time internet are needed to download and embed the three font files. Viewing the finished embedded file needs no network. In an existing framework, preserve its stack and port the design to real routes; React outputs have a supplied ReUI control mapping, while other stacks use suitable native primitives.
Map the content to useful pages rather than retaining fictional names. The guidance supports two to six projects, two to four services, three to six articles and three to six process steps. Keep headings, navigation, indexes, detail links and image pairs consistent when counts change. Replace names in metadata, contact details, archive rows, captions and footer as well as the main text.
Replace every estimator price, bundle condition and duration with your real commercial rules, or remove the estimator. Keep two billing periods only if you actually offer both. Try individual services, combined services, extra packaging systems and an empty selection; confirm the totals and the scope carried into the brief. The supplied calculations are an example, not a recommendation for your rates.
Build and run the provided static checks, then inspect every route on desktop and phone, including 1440, 1024, 768 and 390px widths and overflow at 360px. Check portrait crops, service-card alignment, work filters/search/sort, swatch copy, quotes, process tabs/chart, rate switching, form errors/success/reset, menu keyboard behavior and browser back/forward. Confirm reduced motion and remove or disclose all placeholder claims before publication. A successful file check does not replace those browser checks.

Requirements and costs

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.
Publisher testing: v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT