mirror of https://github.com/Manavarya09/design-extract.git synced 2026-09-19 02:41:14 +08:00

Files

T

Manav Arya Singh cd58dcaece feat(v12): chat REPL + permalinks + gallery + spec + distribution prep

The "best in the game" release: takes designlang from one-shot extractor
to iterative + shareable + standardized + distributed.

ITERATIVE — designlang chat
- src/chat.js: REPL over a live extraction. Heuristic-only router
  parses natural-ish English ("make it brutalist", "primary #ff4800",
  "sharpen radii", "dark mode") into structured operations on the
  design object. Re-derives DTCG / Tailwind / CSS vars / DESIGN.md
  on `save`. Loads from URL or existing *-design-tokens.json.
- bin: new `chat <target>` subcommand. ~360 lines, zero new deps.

SHAREABLE — permalinks
- website/lib/cache.js: getCachedByHash + listRecent helpers over
  the existing Blob cache (24h TTL), no new infra.
- website/lib/build-files.js: shared file-builder used by both
  /api/extract (streaming) and /x/[hash] (permalink page).
- website/app/x/[hash]/page.js + PermalinkViewer.js: every cached
  extraction is now a stable URL. Stat strip + Copy permalink CTA +
  the same 12-tab ResultViewer.
- /api/extract emits a `permalink` event up front; HeroExtractor
  rewrites the URL bar via history.replaceState so refresh-and-share
  works mid-stream.
- website/app/gallery/page.js: public directory of recent extractions,
  palette-strip cards, relative timestamps, intent + material + library
  signals. ISR-cached every 10 min.

STANDARDIZED — DESIGN.md spec
- website/app/spec/page.js: formal spec doc. Eight canonical sections,
  YAML front-matter schema, reference implementation pointer, CC BY 4.0
  license, credit to design-extractor.com for pioneering the format.
- website/public/badge.svg: embeddable Verified badge (paper + ink + accent).
- Sitemap + robots updated with /spec, /gallery.

DISTRIBUTED — submission playbook
- marketplace/SUBMISSION-PLAYBOOK.md: ordered list of 6 marketplaces
  with click-time estimates and review-queue waits.
- marketplace/{figma,cursor,vscode,claude-code-skill,raycast,chrome}-listing.md:
  pre-written listing copy, manifests, screenshot briefs, tweet drafts
  for each. Click "submit" tomorrow morning; nothing left to write.

Home nav: Gallery + Spec links added; v11 → v12 label.
Tests: 317/317 pass.

2026-04-26 21:55:00 +04:00

1.5 KiB

Raw Blame History

Chrome Web Store — designlang extension

Name

designlang — Extract design system from this tab

Summary (max 132 chars)

One click to extract any website's design system: tokens, typography, spacing, components, voice. $0, no account, MIT.

Description (long)

designlang lives in your Chrome toolbar. Click the icon on any tab; the active URL is sent to designlang.app, which runs a Playwright extraction and opens the result inline as tabs (DESIGN.md, DTCG tokens, Tailwind, CSS variables, Figma variables, and 7 more).

Permissions: • activeTab — read the URL of the current tab. Nothing else.

Use cases: • Read a competitor's design tokens in 5 seconds • Pull a Tailwind config off any production site • Generate a DESIGN.md for AI coding agents (Claude Code, Cursor, Windsurf) • One-click copy hex / radius / shadow values • Import a Figma Variable collection from any URL

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

Languages

English

Screenshots (4 — 1280x800)

Browser tab on a real site (e.g. Stripe), with the designlang toolbar icon highlighted.
The same tab after clicking — designlang.app opens with extraction in progress (token paint streaming).
The result viewer with the DESIGN.md tab active, source code visible, copy/download buttons.
The result viewer on the Tailwind config tab, showing extracted palette + scale.

Submission

ZIP the chrome-extension/ directory, upload at https://chrome.google.com/webstore/devconsole. $5 one-time developer fee.

1.5 KiB Raw Blame History