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

2.2 KiB

Raw Blame History

Claude Code Skills registry — designlang

Skill name

designlang

SKILL.md (the file the registry expects)

---
name: designlang
description: Reverse-engineer any website into a complete design system. Outputs DTCG W3C tokens, motion, anatomy, voice, page intent, material language, plus a single agent-native DESIGN.md and a one-command Next.js clone. Use when the user wants to extract, mirror, or compare design tokens against a live URL.
when_to_use: |
  Use this skill when the user wants to:
  - Extract design tokens, palette, typography, or shadows from a public website
  - Generate a DESIGN.md for an existing site (agent-native single-file artifact)
  - Clone a website's design as a runnable Next.js starter
  - Compare local tokens against a deployed site (drift detection)
  - Import a website's tokens into Figma, Tailwind, iOS, Android, Flutter, or WordPress
arguments:
  - name: url
    description: Public URL of the site to extract from.
    required: true
---

# designlang skill

`npx designlang <url>` runs a Playwright extraction and writes ~25 files
(DTCG tokens, Tailwind, CSS vars, Figma vars, motion, anatomy, voice,
intent, material, library detection, prompt pack for v0/Lovable/Cursor,
plus the single-file `DESIGN.md`).

Sub-commands:
- `designlang clone <url>` — generates a working Next.js repo from the extraction
- `designlang ci <url> --tokens ./tokens.json` — drift bot, writes a PR-comment markdown
- `designlang studio` — local web studio over the latest extraction
- `designlang chat <url>` — REPL with mutations (sharpen / soften / dark / brutalist / glass / swap-color / swap-font)
- `designlang mcp` — stdio MCP server

For agent rules and ready-to-paste prompts, run with `--emit-agent-rules` or read
the `*-prompts/` directory.

The full spec for `DESIGN.md` is at <https://designlang.app/spec>.

Submission flow

Fork https://github.com/anthropics/claude-code (or the then-current registry repo).
Add skills/designlang/SKILL.md with the content above.
PR title: Add: designlang skill.
PR body: link to https://designlang.app, describe the surface, mention 1.6k stars + 5K npm downloads.
Tag the PR with skill and community.

2.2 KiB Raw Blame History

Claude Code Skills registry — designlang

Skill name

SKILL.md (the file the registry expects)

Submission flow

2.2 KiB

Raw Blame History