正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

#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:

Cathryn

17,798 subscribers

11,607 次观看 • 3 个月前 •via X (Twitter)

科学技术教育

Anya Rossi• Live Now

Private livecam show

23 条评论

Alex Lieberman 的头像

Alex Lieberman3 个月前

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

Cathryn 的头像

Cathryn3 个月前

let's do it!

Chris Dunn 的头像

Chris Dunn3 个月前

you're awesome 😎

Cathryn 的头像

Cathryn3 个月前

🥰🥰🥰

Mat Silverstein 的头像

Mat Silverstein3 个月前

catpack in action @ x1wealth dot com

hidden user 的头像

hidden user3 个月前

great job, support

Matt Van Horn 的头像

Matt Van Horn3 个月前

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

Cathryn 的头像

Cathryn3 个月前

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

Hiten Shah 的头像

Hiten Shah3 个月前

Congrats!!!

rootletmistake 的头像

rootletmistake3 个月前

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

Muhammad Ahmed 的头像

Muhammad Ahmed3 个月前

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

Jack Shahin 的头像

Jack Shahin3 个月前

Fantastic.

⬣ Ceo of Mandingoswap ⬣ 的头像

⬣ Ceo of Mandingoswap ⬣3 个月前

Very nice 🤝 thanks for making it open source

John Ely 的头像

John Ely3 个月前

Keep it up Cathryn Looks amazing woll definitely try it

Raj 的头像

Raj3 个月前

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

RUFY 的头像

RUFY3 个月前

Kindly check your dm

Sushrut 的头像

Sushrut3 个月前

Link?

Visome 的头像

Visome3 个月前

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 的头像

Gaurabh3 个月前

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

Adè, The Negotiator. 的头像

Adè, The Negotiator.3 个月前

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

AI Mastery Guide 的头像

AI Mastery Guide3 个月前

No mermaid slop finally, gonna check this

Mitchell Wright 的头像

Mitchell Wright3 个月前

That's amazing! Nice work!

安叫兽|Bird🕊️ 🔶 BNB 的头像

安叫兽|Bird🕊️ 🔶 BNB3 个月前

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

相关视频

diagram-design is a Claude Code skill built by someone tired of fighting Figma for 30 minutes every time she needed an architecture sketch. Your agent becomes a high-end editorial graphic designer, generating stunning self-contained HTML and SVG files. Zero JavaScript, zero external images, zero build steps. 13 built-in structural types including sequence diagrams, state machines, Venn diagrams, and swimlanes. #github #opensource

diagram-design is a Claude Code skill built by someone tired of fighting Figma for 30 minutes every time she needed an architecture sketch. Your agent becomes a high-end editorial graphic designer, generating stunning self-contained HTML and SVG files. Zero JavaScript, zero external images, zero build steps. 13 built-in structural types including sequence diagrams, state machines, Venn diagrams, and swimlanes. #github #opensource

GitHub Awesome

61,800 次观看 • 6 个月前

Mermaid code to FigJam diagram pipeline

Mermaid code to FigJam diagram pipeline

Figma

25,625 次观看 • 1 年前

1. create a diagram from my code 2. ok, I updated the diagram, please update the code to match it

1. create a diagram from my code 2. ok, I updated the diagram, please update the code to match it

tldraw

306,461 次观看 • 8 个月前

Turn Claude Code or Codex into a diagram designer. Diagram Design can create polished architecture diagrams, flowcharts, schemas, and more, then match them to your brand and export them for docs, presentations, or social posts. #ClaudeCode #Codex #AITools #DiagramDesign #devswarm

Codename Poshan

11,200 次观看 • 1 个月前

A diagram drawn in JavaScript using lauren's /statechart skill. The life of one animal cell Open source. Made with Claude Opus 5.5

A diagram drawn in JavaScript using lauren's /statechart skill. The life of one animal cell Open source. Made with Claude Opus 5.5

Kevin Ngo

38,996 次观看 • 15 天前

I finally cracked the code to Trump's unhinged administration picks. Annnnd made a Venn diagram to prove it:

I finally cracked the code to Trump's unhinged administration picks. Annnnd made a Venn diagram to prove it:

Kat Abughazaleh

161,900 次观看 • 1 年前

Codex can generate charts inline... Here are the different charts you can ask for: 1. Before-and-After Diagram 2. Cause-and-Effect Chart 3. System Architecture Diagram 4. Network Map 5. Data-Flow Diagram 6. Information-Flow Diagram 7. Flywheel 8. Feedback Loop 9. Hierarchy Chart 10. Organization Chart 11. Mind Map 12. Concept Map 13. Relationship Map 14. Ecosystem Map 15. Stakeholder Map 16. Dependency Map 17. Journey Map 18. User-Flow Diagram 19. Roadmap 20. Milestone Chart 21. Gantt-Style Chart 22. Swimlane Diagram 23. Sankey-Style Flow Chart 24. Venn Diagram 25. Comparison Table 26. Comparison Matrix 27. Quadrant Chart 28. Pros-and-Cons Chart 29. Pyramid Diagram 30. Layer Diagram 31. Spectrum Chart 32. Maturity Model 33. Progression Chart 34. Scorecard 35. Statistic Cards 36. Bar Chart 37. Line Chart 38. Donut Chart 39. Scatter Plot 40. Heat Map 41. Annotated Interface Diagram 42. Exploded Interface Diagram 43. Code-to-Outcome Diagram 44. How-It-Works Explainer 45. Incident Reconstruction Diagram

Codex can generate charts inline... Here are the different charts you can ask for: 1. Before-and-After Diagram 2. Cause-and-Effect Chart 3. System Architecture Diagram 4. Network Map 5. Data-Flow Diagram 6. Information-Flow Diagram 7. Flywheel 8. Feedback Loop 9. Hierarchy Chart 10. Organization Chart 11. Mind Map 12. Concept Map 13. Relationship Map 14. Ecosystem Map 15. Stakeholder Map 16. Dependency Map 17. Journey Map 18. User-Flow Diagram 19. Roadmap 20. Milestone Chart 21. Gantt-Style Chart 22. Swimlane Diagram 23. Sankey-Style Flow Chart 24. Venn Diagram 25. Comparison Table 26. Comparison Matrix 27. Quadrant Chart 28. Pros-and-Cons Chart 29. Pyramid Diagram 30. Layer Diagram 31. Spectrum Chart 32. Maturity Model 33. Progression Chart 34. Scorecard 35. Statistic Cards 36. Bar Chart 37. Line Chart 38. Donut Chart 39. Scatter Plot 40. Heat Map 41. Annotated Interface Diagram 42. Exploded Interface Diagram 43. Code-to-Outcome Diagram 44. How-It-Works Explainer 45. Incident Reconstruction Diagram

Agent Native

68,234 次观看 • 2 个月前

Claude Design. Here's a landing page I made with it.

Claude Design. Here's a landing page I made with it.

Gary Simon

60,646 次观看 • 6 个月前

- AI document editing with auditable changes - your AI coding agent writes the least code that works - Anti-AI-slop design skill for Claude, Codex - reusable animated components - CTA design inspiration

- AI document editing with auditable changes - your AI coding agent writes the least code that works - Anti-AI-slop design skill for Claude, Codex - reusable animated components - CTA design inspiration

Csaba Kissi

11,634 次观看 • 2 个月前

I made a Claude Code skill that generates conference posters 🛠️ Instead of a static PDF, it outputs a single HTML file — drag to resize columns, swap sections, adjust fonts, then give your layout back to Claude. 🔁 🔗 Skill 👉

I made a Claude Code skill that generates conference posters 🛠️ Instead of a static PDF, it outputs a single HTML file — drag to resize columns, swap sections, adjust fonts, then give your layout back to Claude. 🔁 🔗 Skill 👉

Ethan Weber

188,888 次观看 • 8 个月前

How to install a Claude skill from GitHub — even if you have no idea how GitHub works. Download the repo, let Claude check the files for risks, customise the skill around how you actually work, then package it as a Claude-ready ZIP and upload it. GitHub looks technical. This part really isn’t. Save this for the next Claude skill someone sends you. #claude #claudeskills #github #aitools #claudetips

How to install a Claude skill from GitHub — even if you have no idea how GitHub works. Download the repo, let Claude check the files for risks, customise the skill around how you actually work, then package it as a Claude-ready ZIP and upload it. GitHub looks technical. This part really isn’t. Save this for the next Claude skill someone sends you. #claude #claudeskills #github #aitools #claudetips

The AI Impact | AI Workflows

24,800 次观看 • 2 个月前

love this style, so I asked grok 4.7 to draw a diagram showing how vietnamese folks make incense sticks and tbh it absolutely ate, no skill needed, just plain JavaScript

love this style, so I asked grok 4.7 to draw a diagram showing how vietnamese folks make incense sticks and tbh it absolutely ate, no skill needed, just plain JavaScript

Ann Nguyen

32,966 次观看 • 14 天前

Self-Attention vs Cross-Attention interactive diagram. Open

Self-Attention vs Cross-Attention interactive diagram. Open

Tom Yeh

21,228 次观看 • 2 个月前

Motion2Code Claude can't design motion this good on its own. So I let H3 Max on fal design it, and fal-agent (Claude Opus 5.5) rebuilds it as one HTML file: SVG + GSAP GSAP, looping seamlessly, sharp up to 32K. I'm open-sourcing the library that makes these animations.

Motion2Code Claude can't design motion this good on its own. So I let H3 Max on fal design it, and fal-agent (Claude Opus 5.5) rebuilds it as one HTML file: SVG + GSAP GSAP, looping seamlessly, sharp up to 32K. I'm open-sourcing the library that makes these animations.

Lovis Odin

37,611 次观看 • 25 天前

I built this onboarding before Claude Code or Codex existed. I made it open source on GitHub, so take it if you want.

I built this onboarding before Claude Code or Codex existed. I made it open source on GitHub, so take it if you want.

Juanjo Valiño

57,065 次观看 • 9 个月前

i made a skill called /remove-ai-slop. inspired by emil’s review skill and cursor’s code quality skill, it’s for everyone who’s tired of the same AI slop tells in design and copy. you can grab it here: if it helps make your apps, websites, or landing pages a little less generic, give it a ⭐

i made a skill called /remove-ai-slop. inspired by emil’s review skill and cursor’s code quality skill, it’s for everyone who’s tired of the same AI slop tells in design and copy. you can grab it here: if it helps make your apps, websites, or landing pages a little less generic, give it a ⭐

Tushar Mehta

80,360 次观看 • 4 个月前

Self-Attention vs Cross-Attention interactive diagram. Open

Self-Attention vs Cross-Attention interactive diagram. Open

Tom Yeh

17,535 次观看 • 1 个月前

My favorite Claude design hack right now: Create a prototype.md skill. Instead of one-shotting UI, I have Claude generate 5 variations for every feature in a single HTML file, side-by-side. I pick the winner. Claude builds it.

My favorite Claude design hack right now: Create a prototype.md skill. Instead of one-shotting UI, I have Claude generate 5 variations for every feature in a single HTML file, side-by-side. I pick the winner. Claude builds it.

Brett

182,381 次观看 • 5 个月前

My favorite way of interacting with Claude Code is to have it generate static HTML files as outputs (reports, explorations, code structure, mockups etc.) I wanted to iterate on the file by commenting in browser and having Claude update the output live. So, I built this Claude Skill👇 How it works: - Install Claude Code skill (ask it to clone repo) - Build an HTML page for anything (e.g. research coding agents and generate HTML report) - Ask it to make the page interactive That's it. CC will launch a localhost server and allow you to then leave comments on the page itself and once it updates, will give you a tour of changes. It's like Google Docs kind of comments/iteration but for HTML pages.

My favorite way of interacting with Claude Code is to have it generate static HTML files as outputs (reports, explorations, code structure, mockups etc.) I wanted to iterate on the file by commenting in browser and having Claude update the output live. So, I built this Claude Skill👇 How it works: - Install Claude Code skill (ask it to clone repo) - Build an HTML page for anything (e.g. research coding agents and generate HTML report) - Ask it to make the page interactive That's it. CC will launch a localhost server and allow you to then leave comments on the page itself and once it updates, will give you a tour of changes. It's like Google Docs kind of comments/iteration but for HTML pages.

Paras Chopra

216,705 次观看 • 5 个月前

Design tools from the future 🪐✨ Introducing the new

Design tools from the future 🪐✨ Introducing the new

Diagram

283,291 次观看 • 3 年前