Design Breakdown Assistant
Turns a screenshot, website, or Figma file into a written guide to its design system.
by uxKero · ★ 227 on GitHub
What it does
You share a screenshot, link, or Figma file, or point to one specific element like a navbar or card. Claude studies the colors, fonts, spacing, and patterns, then writes a document explaining how to rebuild it. You get a design summary or a single-element guide you can hand to a designer or another AI.
Who it’s for
A good fit for designers and anyone making visuals and anyone working with Word, PDF, Excel or PowerPoint files.
Do you need to code?
No. You can use this without writing or editing any code.
How to install
Add it to Claude as a skill. Download the skill folder from its source page, zip it, and upload it in Claude’s settings under Skills. See the step-by-step guide.
Safety note
Reads the files, screenshots, or web pages you point it at.
As with any add-on, only install skills from sources you trust, and read what it does first.
License
MIT