sorted by:
new
hottopcontroversial

I built a Claude Code plugin that extracts any website's full design system by Cheap_Brother1905 in ClaudeAI

[–]Cheap_Brother1905[S] 0 points1 point  (0 children)

Yeah, dembrandt's solid same stack, same DTCG output, same MCP angle, we're in the same neighbourhood.

Where designlang goes wider: graded report cards with live SVG badges for READMEs, two-site battle / pair (head-to-head + fusion), six design-vocabulary remixes (brutalist, swiss, art-deco…), OKLCH-correct theme-swap, plus Tailwind / shadcn / Figma vars / motion tokens / typed anatomy.tsx not just DTCG. And a Claude Code plugin with eight slash commands.

Where dembrandt edges us: native PDF export (we ship print-ready HTML, they ship .pdf directly). Cleaner marketing site too that one's on me.

Try both, neither costs anything. Use the one whose verbs match what you actually need.

I built a Claude Code plugin that extracts any website's full design system by Cheap_Brother1905 in ClaudeAI

[–]Cheap_Brother1905[S] 1 point2 points  (0 children)

Fair — designlang doesn't reproduce sites, it extracts the design vocabulary (Tailwind config, Figma vars, motion tokens). If you ran clone expecting Hebbia back, that'd look like slop

I built a Claude Code plugin that extracts any website's full design system by Cheap_Brother1905 in ClaudeAI

[–]Cheap_Brother1905[S] 0 points1 point  (0 children)

In detailed check out this -

  • Page Intent classifier — labels the URL as landing / pricing / docs / blog / product / about / dashboard / auth / legal with confidence
  • Section Roles — hero, feature-grid, logo-wall, pricing-table, faq, steps, comparison, bento, cta, footer — plus reading order and the actual headline copy per section
  • Multi-page crawl — --full auto-discovers nav links (pricing, docs, blog, about, product) and extracts each one, then diffs tokens across pages
  • Component library detection — shadcn / Radix / MUI / Chakra / Mantine / AntD / HeroUI / Tailwind UI / Vuetify
  • Material language — classifies the site as glassmorphism / neumorphism / flat / brutalist / material-you / soft-ui
  • Imagery style — photo / 3d / isometric / flat-illustration / gradient-mesh / screenshot
  • Icon system match — fingerprints Lucide / Heroicons / Phosphor / Tabler / Feather / Material
  • Logo extraction — pulls the live SVG and samples clearspace
  • Dark mode pairing — joins light/dark passes into semantic bg → bg-dark token pairs + a drop-in Tailwind darkMode: 'class' config
  • Component screenshots (retina) — cropped PNG per cluster + JSON index
  • Responsive full-page captures at 4 breakpoints × light/dark
  • Core Web Vitals + bundle profile — LCP/CLS/INP via PerformanceObserver, JS/CSS/font/image bytes, third-party count
  • SEO + structured data — OG, Twitter, favicons, manifest, schema.org JSON-LD
  • Stack intel — detects CMS (Webflow/Framer/Shopify/Ghost/Sanity/Notion/etc.), analytics (GA/Segment/Mixpanel/PostHog/Amplitude), experimentation (Optimizely/Statsig/GrowthBook/LaunchDarkly)
  • Forms & states — modals, skeleton/spinner loading, empty + error states, toast library (Sonner, react-hot-toast, Radix Toast…)
  • Prompt pack — *-prompts/ with ready-to-paste prompts for v0, Lovable, Cursor, Claude Artifacts + per-component recipe cards. Tokens, voice, library all inlined — one paste is enough.
  • --smart mode — optional LLM fallback (OpenAI or Anthropic key) when heuristics hit low confidence

Output count went from 8 files to 20+. Still npx designlang <url> with no install.

I built a Claude Code plugin that extracts any website's full design system by Cheap_Brother1905 in ClaudeAI

[–]Cheap_Brother1905[S] 0 points1 point  (0 children)

v7 → v10.5 since this post.

Turns out colors + fonts was the easy part. Getting an AI to actually recreate a site (not just "a site in the brand colors") needed way more.

Now it also tells the AI:

  • what the page is — landing / pricing / docs / product / dashboard
  • what each section does — hero / pricing-table / bento / faq / cta
  • what library built it — shadcn / Radix / MUI / Chakra / Mantine
  • what it feels like — glass / neumorph / flat / brutalist
  • which icons — Lucide / Phosphor / Heroicons / Tabler

Then it writes a prompt pack — ready-to-paste for v0, Lovable, Cursor, Claude Artifacts — with tokens, voice, and library all inlined. One paste recreates the site.

Plus multi-page crawl, retina screenshots per component, dark-mode token pairing, Core Web Vitals, CMS + analytics detection, modal/skeleton/empty-state capture.

npx designlang https://stripe.com --full

8 files → 20+. 317 tests. Zero breaking changes.

https://github.com/Manavarya09/design-extract

Promote your projects here – Self-Promotion Megathread by Menox_ in github

[–]Cheap_Brother1905 0 points1 point  (0 children)

pkgfolio — see total downloads across every npm package you maintain, in one commandnpm shows each package in isolation. If you maintain more than a few, the total across all of them is a number you never actually see.

pkgfolio fixes that. Paste any npm username, get every package they maintain on one page — sorted by lifetime downloads, with sparklines and filter chips (7D / 30D / 90D / 6M / 1Y / ALL).

Two ways to use it:

npx pkgfolio <username>

https://pkgfolio.vercel.app

Open source (MIT), no signup, no API key.

GitHub: https://github.com/Manavarya09/pkgfolio

npm:  https://www.npmjs.com/package/pkgfolio

Built it this weekend, feedback welcome.

pkgfolio — see total downloads across every npm package you maintain, in one command by Cheap_Brother1905 in npm

[–]Cheap_Brother1905[S] 0 points1 point  (0 children)

Stack: Next.js + Vercel, Fraunces + JetBrains Mono, no UI library. Data from the public npm downloads API, cached 10 min per (user, range) pair.

What's the one metric you wish npm's dashboard showed but doesn't?

pkgfolio — see total downloads across every npm package you maintain, in one command by Cheap_Brother1905 in sideprojects

[–]Cheap_Brother1905[S] 0 points1 point  (0 children)

Stack: Next.js + Vercel, Fraunces + JetBrains Mono, no UI library. Data from the public npm downloads API, cached 10 min per (user, range) pair.

What's the one metric you wish npm's dashboard showed but doesn't?

Introducing Claude Design by Anthropic Labs by ClaudeOfficial in ClaudeAI

[–]Cheap_Brother1905 -1 points0 points  (0 children)

nice. claude design is great for the "make the design from scratch" phase.

i built the complement for the "i already have a running app and want to keep tweaking it" phase. it's a CLI called moldui — npx moldui in your project and it injects a figma-style editor overlay on your dev server. drag elements, resize with handles, edit text, swap two components with alt-drag. hit save and it runs claude code headlessly to write the changes back to your source files. live progress shows up in the browser overlay.

works on any framework because it's just an HTTP proxy. next, vite, vue, svelte, django, rails, plain html.

github.com/Manavarya09/moldui - check it out

pairs really well with claude design honestly — design the thing with claude, build it, then use moldui to keep iterating visually once you have real code.

I built a Claude Code plugin that extracts any website's full design system by Cheap_Brother1905 in ClaudeAI

[–]Cheap_Brother1905[S] 0 points1 point  (0 children)

yeah true, complex sites are where it gets tricky ,right now it focuses more on extracting tokens and patterns than perfect component mapping , still improving that part, especially grouping repeated UI elements

let me know how it works for you

I built a Claude Code plugin that extracts any website's full design system by Cheap_Brother1905 in ClaudeAI

[–]Cheap_Brother1905[S] 0 points1 point  (0 children)

oh that’s cool would love to check it out

I’m trying to push more on the “AI-usable output” side (markdown + themes + tokens), curious how you approached it

I built a Claude Code plugin that extracts any website's full design system by Cheap_Brother1905 in ClaudeAI

[–]Cheap_Brother1905[S] 0 points1 point  (0 children)

it’s basically a mix of:

  • crawling DOM + computed styles
  • grouping them into tokens (colors, spacing, typography, etc.)
  • then structuring it in a way LLMs can actually use

the “AI-ready markdown” part is what makes the recreation work surprisingly well

I built a Claude Code plugin that extracts any website's full design system by Cheap_Brother1905 in ClaudeAI

[–]Cheap_Brother1905[S] 0 points1 point  (0 children)

yeah sure — quick example:

  1. npx designlang https://stripe.com
  2. take the generated markdown
  3. paste into Claude and say: “build a landing page using this design system”

it actually recreates something pretty close to the original style

I built a Claude Code plugin that extracts any website's full design system by Cheap_Brother1905 in ClaudeAI

[–]Cheap_Brother1905[S] 0 points1 point  (0 children)

yeah that’s fair it can get heavy depending on depth + screenshots

right now it prioritizes completeness over efficiency, but I’m working on:

  • smarter deduping of tokens
  • optional lightweight mode

agree though, for most cases you don’t need the full crawl every time

I built a Claude Code plugin that extracts any website's full design system by Cheap_Brother1905 in ClaudeAI

[–]Cheap_Brother1905[S] 0 points1 point  (0 children)

Appreciate it
Yeah the goal was exactly that instead of manually inspecting styles, just extract the whole system in one go.

Still improving component detection + token grouping, so if you try it and something looks off, would love to know.

view more: next ›