- Client: Danny Fresko’s creative studio
- 2026
- In build
sequenced designs instagram stories in a studio’s house style.
Brief the pages and drop in photos. Claude lays out the whole sequence from the studio’s own layouts, checks its work, and exports an editable file for Canva with every text box, pill and photo on its own layer.
(scroll, it designs itself)
what if a whole story sequence
took one brief
(tap)
the layouts come from 63 real sequences.
the studio’s own work, broken down page by page.
so it looks like the studio, not like a template.
(next slide)
claude never draws pixels.
it picks a layout & fills it.
(the layout lives in code)
and when it’s done..
every text box, pill & photo lands in canva as its own layer.
brief it.
generate it.
finish the last 10% in canva.
(see how it’s built)
63 sequences•457 pages•12 carousels•23 layouts
The studio’s work, studied page by page and turned into code. (and the export is 100% editable in canva)
the problem:
about 25 clients. every sequence built by hand.
Danny’s studio designs Instagram story sequences for about 25 clients, and every one is hand-built in Canva, page by page.
the hours go on ideas layout.
Generic AI design tools don’t help. They ignore the studio’s style.
how it works:
brief it. watch it design.
Each page gets a role and a goal, the photos go in, and the client’s accent gets picked. Claude chooses one of the studio’s 23 layouts for every page and fills it: copy with emphasis, photo placement, the giant background word and the hand-drawn marks.
what if a whole story sequence
took one brief
(tap)
the layouts come from 63 real sequences.
the studio’s own work, broken down page by page.
so it looks like the studio, not like a template.
(next slide)
claude never draws pixels.
it picks a layout & fills it.
(the layout lives in code)
and when it’s done..
every text box, pill & photo lands in canva as its own layer.
brief it.
generate it.
finish the last 10% in canva.
(see how it’s built)
then it checks its own work:
a second look, before a designer’s first.
With design check on, the rendered pages go back to Claude as images. It flags overlaps, bad crops and weak contrast, then sends back corrected specs. One of the house rules: text never covers a face.
- OverlapHeadline sat on the face. Moved under it, onto the dark torso.✓
- CropHead clipped at the top edge. Photo re-framed on its focus point.✓
- ContrastGrey aside on a bright patch. Extra black fade added.✓
real talk..
layout is the slow part.
so the tool does it, & the designer keeps the last 10%.
(next slide)
(demo page, made for this case study)
the export:
every element, its own layer.
and when it’s done..
every text box, pill & photo lands in canva as its own layer.
and when it’s done..
every text box, pill & photo lands in canva as its own layer.
and when it’s done..
every text box, pill & photo lands in canva as its own layer.
and when it’s done..
every text box, pill & photo lands in canva as its own layer.
and when it’s done..
every text box, pill & photo lands in canva as its own layer.
and when it’s done..
every text box, pill & photo lands in canva as its own layer.
The export is an editable .pptx that opens in Canva. Photos arrive pre-cropped, highlights become vector shapes, and the hand-drawn marks and gradients become PNG layers. Every line break is written in, so nothing re-wraps.
Layers
the house style:
63 sequences, turned into rules.
I had the studio’s work broken down page by page: colours measured from pixels, the type matched down to its letter spacing, every page sorted into a layout. Each rule was checked against the original pages before it went in. The result is a guide Claude reads and a set of layouts that keep it on-brand.
one accent per sequence. try one:
It re-themes this whole page, the way one pick re-themes a sequence.
inter only, at -68.
two weights in every line, one pill per block.
the emphasis grammar claude writes
-
**word**the meaning words carry it SemiBold spine -
==word==the most loaded noun Pill -
++word++names & numbers Accent -
__word__the payoff tail Marker underline -
((word))one hinge word Hand ellipse -
[[word]]a reframe Dashed box -
~~word~~itcouldwill Strike scribble
how i built it:
claude doesn’t draw pixels.
That one rule shaped the whole build. I decided where the AI is good (choosing, writing, checking) and where code is better (layout, type, export), then had AI write the code to my plan.
- 01 The AI chooses. The code draws.
Every layout lives in code, built from the studio’s own pages. Claude only picks one per page and fills its slots. That keeps a ten-page sequence on-brand, and a designer can still finish the last 10% by hand.
- 02 A design check, not a redraw.
The check sends the rendered pages back to Claude as images. It returns corrected specs, so the fix goes through the same layouts instead of new pixels.
- 03 Export for the person who finishes it.
The .pptx measures the browser layout and writes every line break, so Canva can’t re-wrap the text and the pills stay aligned.
- 04 Bring your own key.
Requests go straight from the browser to Anthropic and photos are stored in the browser. No server route, so no serverless timeouts.
- Next.js 16
- React 19
- Tailwind 4
- Anthropic SDK
- pptxgenjs
- IndexedDB
In build with Danny’s studio.
