Loading video...

Video Failed to Load

Go Home

#1 Trending Today on Github w/ Diagram Design skill ☺️ 29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop. here's why I made it:

11,477 views • 1 month ago •via X (Twitter)

23 Comments

Alex Lieberman's profile picture
Alex Lieberman1 month ago

i dm'd you! let's jam on this live

Cathryn's profile picture
Cathryn1 month ago

let's do it!

Chris Dunn's profile picture
Chris Dunn1 month ago

you're awesome 😎

Cathryn's profile picture
Cathryn1 month ago

🥰🥰🥰

Mat Silverstein's profile picture
Mat Silverstein1 month ago

catpack in action @ x1wealth dot com

hidden user's profile picture
hidden user1 month ago

great job, support

Matt Van Horn's profile picture
Matt Van Horn1 month ago

Omggg I saw this didn’t realize was you. So cool!!!!!

Cathryn's profile picture
Cathryn1 month ago

what other cathryn lavery do you know?! I will fight her 😆

Hiten Shah's profile picture
Hiten Shah1 month ago

Congrats!!!

rootletmistake's profile picture
rootletmistake1 month ago

Awesome! I've been using it, and the results are great. Thanks for sharing! 👏

Muhammad Ahmed's profile picture
Muhammad Ahmed1 month ago

Thanks for building this definitely using it the next time I need a diagram

Jack Shahin's profile picture
Jack Shahin1 month ago

Fantastic.

⬣ Ceo of Mandingoswap ⬣'s profile picture
⬣ Ceo of Mandingoswap ⬣1 month ago

Very nice 🤝 thanks for making it open source

John Ely's profile picture
John Ely1 month ago

Keep it up Cathryn Looks amazing woll definitely try it

Raj's profile picture
Raj1 month ago

Nice I ran into the same issue and good diagrams make it easier to tell a story.

RUFY's profile picture
RUFY1 month ago

Kindly check your dm

Sushrut's profile picture
Sushrut1 month ago

Link?

Visome's profile picture
Visome1 month ago

As a business owner, before increasing your advertising budget, check whether your website can actually convert the attention you're already paying for. Check out for more on @Visome_

Gaurabh's profile picture
Gaurabh1 month ago

I love it. Thanks for schooling Claude to pay more attention in geometry and design classes :)

Adè, The Negotiator.'s profile picture
Adè, The Negotiator.1 month ago

love that these are opinionated, instead of trying to support every possible diagram style

AI Mastery Guide's profile picture
AI Mastery Guide1 month ago

No mermaid slop finally, gonna check this

Mitchell Wright's profile picture
Mitchell Wright1 month ago

That's amazing! Nice work!

安叫兽|Bird🕊️ 🔶 BNB's profile picture
安叫兽|Bird🕊️ 🔶 BNB1 month ago

没有 Mermaid 垃圾这句有点太真实了

Related Videos

Anthropic released Claude Design TODAY and it's now accessible at I spent the last hour giving it a first look, and shared my thoughts and results in the video below. This is a BIG drop. This is a new design surface from Anthropic, and it changes what "AI design" means. Short version: Claude can now design. Not "describe a design." Not "generate an image of a design." Actual production work — prototypes, wireframes, high-fidelity mocks, slide decks, landing pages — editable, on-brand, and ready to hand off. Here's what stood out on first look: → Real design surfaces Prototypes, wireframes, hi-fi, and slide decks — each with templates and proper structure, not just pretty screenshots. → Comment-based edits Leave a comment on any element and Claude revises it. This is the Figma-style review loop, with the designer replaced by a model that works at 3am. → Brand design systems You can feed it your system — colors, type, components — and it actually respects it. On-brand output, not generic AI slop. → Export anywhere PDF, PowerPoint, Canva, standalone HTML. Plus a built-in handoff straight to Claude Code for engineers to implement. → Import from real tools Figma, GitHub, and captured web elements come in as inputs. Your existing work is the starting line, not the discard pile. → Collaboration Share links for view / comment / edit — the exact tier system teams already expect. What I tested on Opus 4.7: • A 5-slide deck generated from a single screenshot. Claude asked clarifying questions BEFORE generating and shipped speaker notes by default. • A landing page build. Solid first pass, real components, real layout logic. • Multiple chats running concurrently. You can parallelize design work across threads like a small team. Why this matters: PMs, founders, marketers, and non-engineers can now create designs that engineers can actually ship with production-ready output and a claude code handoff built in. The gap between "I have an idea" and "here's a working prototype with my brand applied" just collapsed to minutes. Full walkthrough, live demos, exports, and honest takes on where it breaks below. P.S. • This is an Anthropic Labs product — NOT GA yet. • Claude Design is currently webapp only (no API), and does not yet support the Analytics API, Compliance API, or cost/usage reporting. • Availability: – Default ON for Pro / Max / Team – Default OFF for Enterprise Enterprise admins can toggle it on via RBAC in console (comes with a ~$20/user initial credit).

JJ Englert

32,445 views • 5 months ago