Diorama's Jakub Otcenas: designing in Paper with Claude Code, then distilling sessions into skills
A studio creative director steers Claude Code through comments on a Paper canvas to build a design system and app prototype, then turns sessions into skills.
Done withPPaperCCClaude CodeMMobbin
Studio's own open-source system and internal stretch test; not a named client project
WHAT THEY DID
Jakub Otcenas, co-founder and executive creative director at Diorama, describes building the studio's open-source bydiorama/ui design system and a three-column AI to-do app prototype by having Claude Code draw in Paper, reviewing the canvas, leaving comments with moodboards and screenshots, and asking the agent to implement the comments in a new frame. He then had the agent generate a token theme, a live prototype, documentation frames and demo clips.
STEP BY STEP
- Explore Paper by designing essentials (buttons, inputs, checkboxes), then have agents expand those components with all their states.
- Record rules, exceptions and patterns from comment threads into CLAUDE.md, AGENTS.md and CONVENTIONS.md; CONVENTIONS.md 'became our rule book'.
- Prompt Claude Code to one-shot a three-column AI productivity app (to-do list, calendar, chat bar) using the design system, available skills and the Mobbin MCP.
- Review the result in Paper, tweak by hand, and leave comments with moodboards and screenshots; then ask Claude to implement the comments in a new frame, repeating several times.
- Explore variations (hero, dark mode, layouts, breakpoints); redraw the hero banner by hand when generated variants miss.
- Ask the agent to generate a token system as a theme in Paper.
- Build an interactive front-end prototype with the transitions.dev skills; when code fixes fail, bring the design back to Paper, fix it there, and re-implement.
- Generate annotated documentation frames with the design-component skill.
- Render demo clips and stills from storyboards sketched in Paper.
- Turn the session into skills and update documentation.
HOW IT WENT
He reports that the to-do app stretch test added a calendar item component, new widgets and patterns for agentic and conversational components, and better theming options to the system. The bydiorama/ui repository is public on GitHub under an MIT licence (created 2 Aug 2026; commits through 9 Nov 2026), and the article links the Paper file. He also says a client deck made from annotated references needed only a few small tweaks.
Reported results: He reports a working interactive prototype, a token theme, documentation frames and demo clips, and says the stretch test added a calendar item component, agentic and conversational patterns, and better theming to bydiorama/ui. He also reports a client deck that needed only a few small tweaks.
WORTH KNOWING
A dated first-person account from a working studio that shows the design-to-code loop running in both directions through a canvas tool other than Figma, with named skills files and candid limits: he redrew a hero banner by hand, says agent motion timing is usually off, and loosens over-strict accessibility checks by eye.
TRY IT
- Leave feedback for the agent as comments directly on the canvas, with screenshots and moodboards, and explain why each detail matters.
- When a code fix keeps missing, move the design back to the canvas, correct it by hand, and let the agent re-implement it.
- End each session by asking the agent to turn the thread into skills and update a conventions file, so the next prompt can be shorter.
Rates the entry, not the tool.
Source: Jakub Otcenas · CodropsOpen as a page
- Work done: not stated in the source (Unverified: the 1 Nov 2026 article does not date the to-do app work. He writes that 'only in the last couple of weeks' did the change feel real and that the deck was 'a few weeks ago'. The public repo shows design-system work from August to November 2026, but that dates the library, not this specific session.)
- Source published: Nov 1, 2026
- On 4TC: added Nov 9, 2026 · checked Nov 9, 2026
About this source
Type: First-person workflow · Firsthand report · Demonstrated workflow
- Building Digital Products with Design Systems and Agents: A Guide for Terrified Designers
Jakub Otcenas · Codrops · Published Nov 1, 2026 (Visible publish time 'November 1, 2026' (time.ct-subline__pubtime); URL path /2026/11/01/.) · Checked Nov 9, 2026
First-person article by Diorama's co-founder and executive creative director, published on Codrops (a design and front-end publication). No sponsorship label found on the page; no stated tie to Paper, Anthropic or Mobbin.
Access: open - bydiorama/ui — UI library by Diorama
Diorama · GitHub · Published Aug 2, 2026 (GitHub API created_at 2026-08-02T19:43:50Z; latest commit 2026-11-09T14:26:04Z. MIT licence.) · Checked Nov 9, 2026
Studio's own public repository linked from the article (demonstrated artefact: AGENTS.md, CONVENTIONS.md and .claude/skills design-component, diorama-ui-craft, griddy-icons-in-paper).
Access: open - Paper file for the to-do app
Jakub Otcenas / Diorama · Paper · Publication date not stated (Undated shared file.) · Checked Nov 9, 2026
Paper file for the to-do app, linked from the article's 'Used Tools and Resources' list.
Access: open
Source check: Researched from the public page; not yet re-checked by an editor. Nobody at 4TC has tested this.
Claims and where they come from
- Jakub Otcenas, co-founder and executive creative director at Diorama, describes his workflow at Diorama using Paper, Claude Code and the bydiorama/ui design system for internal and client projects. (reported) [1]
- The Codrops article is dated November 1, 2026. (observed in the source) [1]
- He says Paper connects to Claude through an official connector, and that he prompted the agent to one-shot a three-column AI productivity app using the design system, available skills and the Mobbin MCP. (reported) [1]
- He says the first result had redundant components, unnecessary labels and a visual hierarchy that didn't match what he'd expect, while the visual language was faithful to their UI design language from the first iteration. (reported) [1]
- He says he leaves comments with feedback, moodboards and screenshots directly on the Paper canvas, then asks Claude to check his comments and implement them in a new frame, usually repeating several times. (reported) [1]
- He says none of the generated hero variants worked, so he redrew the banner from scratch, taking structural inspiration from them. (reported) [1]
- He says that when things go wrong in code, he asks the agent to bring the design back to Paper first, refines it there, and then has it implemented. (reported) [1]
- He says agents don't perceive a timeline the way humans do, so their motion timing is usually either too slow or too fast. (reported) [1]
- The bydiorama/ui repository is public under an MIT licence, was created on 2 Aug 2026, and includes AGENTS.md, CONVENTIONS.md and Claude skills folders named design-component, diorama-ui-craft and griddy-icons-in-paper. (observed in the source) [2]
- He says the studio plans to migrate one of its clients' design systems to the library soon. (reported) [1]
4TC interpretation
Our reading, not something the source says.
Most agent workflows start in code. This one keeps the canvas as the place where taste gets applied: when something goes wrong in code, he asks the agent to bring the design back to Paper first, fixes it there, and only then sends it back to code.
Designer impact
Alleged [1]
He says that if you let an agent design without supervision the results often feel somewhat empty, and that agent motion timing is usually either too slow or too fast.
- Review every agent draft on the canvas and steer with comments rather than accepting one-shot output.
- Treat motion as the step that needs the most human attention; steer with phrases like 'slow down' a particular part.
Established = documented by primary sources or the company’s own statements. Disputed = contested with evidence on both sides. Alleged = reported, not established.
Votes rate whether this entry was useful. They are not an endorsement of the tool, and don’t mean voters agree with the company’s practices.
Report an issue or correction
Share your own experience
4TC does not endorse a tool unless an explicit 4TC endorsement is shown.