extract-design-system: extrair tokens de design de um sítio público

Para quem

Instale esta Skill quando precisar de reconstruir tokens de design a partir de um sítio público e gerar JSON de arranque mais propriedades CSS personalizadas para um projeto local. Cobertura oficial: colors, typography, spacing, border radius, shadows. Pode usar-se como AI agent skill (Claude, Cursor, Codex) ou standalone CLI.

Serve quem quer starter tokens depressa, não uma biblioteca de componentes completa. O corpo nomeia esses três agentes e também um CLI autónomo; não leia isso como suporte de só um. Se o sítio-alvo não for acessível em público, ou se espera alteração da config do framework ou reescrita automática da app, esta competência não serve.

Página: https://github.com/arvindrk/extract-design-system

Primeira tentativa em 3 minutos

Só este comando de instalação:

npx skills add arvindrk/extract-design-system

Pré-condições: tem um projeto local e vai extrair de «uma página acessível em público»; aceita que vai gravar os ficheiros nomeados. Não nomeie um diretório que não aparece.

Na primeira tentativa, confira primeiro o âmbito; não grave ficheiros de imediato. Peça ao agente: que tokens tira, que ficheiros gera e o que não faz. Sinal de sucesso: colors / typography / spacing / border radius / shadows, e .extract-design-system/raw.json, .extract-design-system/normalized.json, design-system/tokens.json, design-system/tokens.css; e reformular Public websites only, Single-page extraction workflow, Starter tokens, not a full component library, No framework config patching or automatic app rewrites.

Depois, extraia com o exemplo oficial: https://stripe.com and generate starter token files for this project. Sinal de sucesso: esses quatro ficheiros aparecem e a config do framework não mudou. A página menciona um standalone CLI sem comando de arranque; não o invente.

Casos de uso

Caso 1: extrair o Stripe com o exemplo oficial. O texto original é Extract the design system from https://stripe.com and generate starter token files for this project. Grava ficheiros e acede à rede pública; confirme o diretório do projeto antes de executar. Dá para confirmar ficheiros de tokens de arranque, não um conjunto de componentes.

Caso 2: outra página pública única, ainda só tokens de arranque. Entregue qualquer página que abra em público e peça só tokens, sem mudar a app. Sinal de sucesso: continuam esses quatro ficheiros oficiais, e o agente recusa remendos de framework. Não assuma que um sítio de várias páginas será percorrido por completo; o corpo diz single-page.

Limites de uso

Só sítios públicos. Páginas privadas ou com início de sessão ficam de fora.

Uma página de cada vez. O produto é starter tokens, não uma biblioteca de componentes completa.

Não faz framework config patching nem automatic app rewrites.

Os caminhos de saída seguem o corpo; não os renomeie nem os grave noutro sítio.

Claude, Cursor, Codex e standalone CLI estão no texto original; não escreva suporte exclusivo. O arranque do CLI não é dado; não o invente. Não complete seletores, sessões autenticadas ou domínios em lote não escritos.