[Anthropic's announcement](https://www.anthropic.com/news/claude-design-anthropic-labs) on their new "Design" feature showed up on my feed three days ago and naturally, I decided to experiment with it. This post is a documentation of that attempt and my own thoughts of what I feel about this feature. To set some context, I am not a professional designer, so I view this tool through the lens of *"Can it wow me? Can it help me be unstuck?"*. TLDR of Claude Design's feature according to Anthropic - - Pick up a brand kit from design artefacts *or* code - Multimodal import by default - Live editing of spacing, colour and layout; comments and collaboration built in - Export anywhere i.e internal URL, PDF, PPTX, standalone HTML, or straight into Canva The "Canva" bit is pretty welcome because I had tried their Canva + Claude Code integration a few weeks ago, and it was really really bad! See the example below (it was so off what I wanted and it was not even consistent with what "it thought" it did). ![[canva, claude, crap.png]] ## Experimenting with Claude Design In order to experiment with claude design, I decided to fish out one of my old projects from my MSc days. After a few minutes of searching through my github repos, I landed on the [ted talk content analysis](https://github.com/ry05/TED-Talk-Content-Analysis/tree/main#) - a 16-year longitudinal analysis of TED talks. This project included several quantitative text analysis techniques and I thought it was fun to think through this again! ### The Design Brief After a few back-and-forths with Claude Code, I had a design brief ready to hand over. My conversations with Claude Code were predominantly centred around what the project was about and suggestions on short design-heavy projects I can test out to experiment with Claude Design. Having bits laid out in a design brief would help ensure the LLM consumes all the tokens it does consume towards a specific purpose. It's a bit like using the "plan" mode for agentic coding. >[!note]- Full design brief (click to expand) >``` ># Design Brief: TED Talk Evolution Interactive Research Report > >## Overview >Design an interactive web application that transforms a static research report (PDF) into a guided, explorable digital experience. The app showcases a 16-year longitudinal analysis of TED talks, revealing how presentation styles, linguistic complexity, engagement patterns, and topics have evolved from 2006-2021. > >**Core Problem Solved**: Make academic research findings accessible and explorable, not just readable. > >## Goals >- Present complex research findings in an intuitive, visually engaging way >- Guide users through 5 research questions with interactive evidence >- Enable exploration and drill-down without overwhelming users >- Create a "wow" moment showing how TED talks have fundamentally changed > >## User Journey: Guided Journey App > >### 1. Landing Page >- **Purpose**: Hook users with the core finding >- **Key Message**: "TED talks have evolved. Here's the 16-year story." >- **Visual**: Hero section showing the transformation (complexity ↑, humor ↓, engagement patterns shifted) >- **CTA**: "Explore the research" → navigates to Chapter 1 > >### 2. Chapter Navigation >- Left sidebar or top navigation showing 6 main chapters (NRQ1–5 + Key Findings) >- Progress indicator, "Next" button, ability to jump between chapters > >### 3. Chapter Template (NRQ1–4) >Each chapter has: research question & context, interactive visualisation (time-series across 2006-09, 2010-13, 2014-17, 2018-21, with hover tooltips and confidence-interval toggles), statistical evidence (ANOVA & Games-Howell in plain language), insights & interpretation, and an optional "filter by topic" deep-dive. > >### 4. Chapter 5: Topic Evolution >Grid or heatmap of 15 topics across 4 time periods; click a topic → sample talks from each era. > >### 5. Chapter 6: Key Findings & Correlations >Interactive correlation matrix + "insights at a glance" cards (e.g. "Speakers using 'we' or 'you' use 4x more numerical information"). > >### 6. Conclusions Page >Summary, implications, download link to full PDF. > >## Visual & UX >- Palette: navy/charcoal primary, orange/teal accents; gradients for complexity and humour trends; 15-colour topic palette. >- Typography: bold modern headlines (36–48px), readable sans-serif body (16–18px). >- Desktop: 200px sidebar + content area, 40px padding. Mobile: stacked, collapsible nav. >- Smooth animations, hover states, colour-blind friendly, keyboard-navigable. > >## Data Context >Metrics: MWS, FKL, MTLD, SPM, PM_I/We/You, LF, NIP. Time periods: 2006-09, 2010-13, 2014-17, 2018-21. 15 auto-labelled topics. > >## Tone & Voice >Academic but accessible, narrative-driven, visual-first, engaging. > >## Success Metrics >Users complete all chapters in one session; interactive elements are discovered; findings are understood in ~5 minutes; design feels professional and modern. >``` ### The Claude Design Interface [Claude Design](https://claude.ai/design) has a pretty neat looking interface and is in Research Preview at the moment. I selected the "Prototype" artefact, and chose the "High Fidelity" option. I did not set up a design system for this experiment. However, it does seem like [setting up a design system is highly recommended](https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design). ![[claude-design-ui.png]] After passing the design brief through into the prompt, the Design agent creates a TODO list and goes through building it all. The left bar below shows this "chain of output" and the right screen displays the design artefacts created by the agent. ![[ted-report-initial-output.png]] After a few minutes, the design was ready and for a first shot, it was way more than impressive! ![[ted-report-build-progress.png]] Another feature of Design allows the **addition of comments** on the design directly. So, for bits which I felt needed enhancements, adding comments was quite easy. Of course, the design can also be edited directly, but I didn't try that out. ![[ted-report-chapter-view.png]] ![[ted-report-inline-comments.png]] In the comments tab on the left, you can select comments and ask Claude to work through them - feels a lot like leaving review comments on a Google Doc, except the doc builds itself. ### Usage Limits Hit! Back to Claude Code :) Hit the usage limit wall. But Design has its *own* usage limits, separate from Claude Code's - which means my Code quota was still intact. ![[claude-design-usage-limit.png]] Turns out you can export a Design project to Claude Code. This is quite a nice handy feature. ![[export-to-claude-code.png]] ![[claude-code-handoff.png]] However, Claude Code was a bit awkward with the handoff - probably because I have the Canva skill loaded, so it kept trying to route me back there. ![[canva-skill-interference.png]] Slightly annoyed that this did not work as I wanted it to, but downloading and pasting the code works fine. The bundle ships with a generated README which looks deceptively simple. But hey, is that not the point? ![[exported-bundle-readme.png]] I copied over the in-progress changes I'd made in Design before hitting the limit, and answered the clarifying questions Code threw back. ![[claude-code-clarifying-questions.png]] Fair warning: my frontend knowledge is about as good as my backend knowledge - absolute crap! So this whole path is a real test of whether Design + Code can carry someone who can't really debug either end themselves. I left Claude Code weave its magic and opened it up in localhost. Voila! All the changes I wanted landed neatly! - Notes added in Chapter 2 around laughter events. - Topic modelling caveat included. - A brand new methodology page - hover over each step and the detail unfolds inline. I genuinely didn't expect that to work! ![[ted-report-localhost.png]] ![[ted-report-methodology-page.png|697]] Once again, I am pretty much in awe of this methodology page. All I really typed in were some words about how I wanted it to be, and its been created! Also, at this point I feel this methodology page is reusable. Slot different projects in and it then becomes so easy to build an interactive resume! ![[methodology-page-hover-1.png]] ![[methodology-page-hover-2.png]] ![[methodology-page-hover-3.png]] ![[methodology-page-final.png]] ## The important bit - Do I love Claude Design then? Two days in, cautiously yes. I am not a designer by profession, so to me having Claude Design is really helpful to prototype things I want. I also manage social media for a cricket club and I see strong potential in the Claude Design + Canva export to speed up our processes (I hope to god its nothing like the previous Claude + Canva integration!). That is an article for another day! If you were keen to see a bit more on what Claude Design can be used for, Peter Yang has a [good walkthrough on YouTube](https://www.youtube.com/watch?v=WMnk1LFBMqA) where he builds a video, slide deck, landing page and a mobile app prototype with Design. Worth a watch if you want to see the ceiling!