Extrair Tokens de Design de Websites
Recriar manualmente a linguagem visual de um site público é lento e inconsistente. Esta skill extrai cores, tipos de letra, espaçamento, raios, sombras e ficheiros de tokens iniciais para revisão.
Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.
Review the Skillstore skill "extract-design-system" from https://skillstore.io/skills/arvindrk-extract-design-system.md and its manifest at https://skillstore.io/api/skills/arvindrk-extract-design-system/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Seu Agente ainda deve apresentar o plano e solicitar qualquer confirmação exigida pela política de segurança.
Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.
Usando "extract-design-system". Analisar uma página pública de marketing para obter tokens de design iniciais.
Resultado esperado:
Usando "extract-design-system". Executar apenas a extração para um site público de documentação.
Resultado esperado:
Usando "extract-design-system". Regenerar ficheiros de tokens a partir de uma extração normalizada existente.
Resultado esperado:
A skill atualiza os ficheiros de tokens iniciais e explica que os estilos existentes da app não foram alterados.
The skill contains legitimate instructions to run npx commands from SKILL.md, including package execution and Playwright setup. Several static hits are markdown code fences or inline file names and are false positives for Ruby backtick execution. No prompt injection or malicious data exfiltration intent was found in the reviewed files.
Estas são capacidades locais reais que podem ser esperadas para esta habilidade, portanto exigem revisão, mas não são contabilizadas como comportamento malicioso confirmado.
Compartilhe o relatório de avaliação versionado, o badge neutro, o cartão incorporável e as citações. A Skillstore apresenta evidências sem decidir se este Skill é seguro.
https://skillstore.io/skills/arvindrk-extract-design-system/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/arvindrk-extract-design-system?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/arvindrk-extract-design-system?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/arvindrk-extract-design-system/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/arvindrk-extract-design-system.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>arvindrk. (2026). extract-design-system security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/arvindrk-extract-design-system/audits/9@techreport{arvindrk-arvindrk-extract-design-system-2026,
author = {arvindrk},
title = {extract-design-system security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/arvindrk-extract-design-system/audits/9},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "extract-design-system security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
- name: "arvindrk"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/arvindrk-extract-design-system/audits/9"
identifiers:
- type: other
value: "skillstore:arvindrk-extract-design-system:audit:9"
description: "Skillstore immutable audit report identifier"
Criar tokens de design iniciais a partir de um site público de referência antes de desenvolver um novo frontend.
Identificar prováveis cores, tipos de letra, espaçamento, raios e sombras a partir de uma página pública de marca.
Gerar ficheiros de tokens a partir de um site público existente antes de planear uma migração de estilos.
Extrai primitivas de design deste URL público e resume os tokens iniciais antes de gerar ficheiros: <url>
Analisa este URL público apenas com extração. Reporta as cores, tipos de letra, espaçamento, raios e sombras detetados: <url>
Usa a saída de extração normalizada existente para regenerar ficheiros de tokens iniciais. Não alteres código ou estilos da app.
Extrai tokens deste URL público, identifica prováveis lacunas de conteúdo dinâmico e recomenda quais valores precisam de revisão manual: <url>
Autor
arvindrkLicença
MIT
Revisão da Skillstore
r1
Aviso de versão
O autor não declarou uma versão.
Repositório
https://github.com/arvindrk/extract-design-system/tree/main/skills/extract-design-system/Referência
3e4b6c31a74a3bd1a291c98cf585d720cb9fbc88
Atualidade da manutenção
22/07/2026
Uso
4 downloads · 92 visualizações
Estrutura de arquivos
Crie Interfaces Frontend Distintivas
por Atman36
Interfaces genéricas geradas muitas vezes parecem previsíveis e fracas. Esta skill orienta Claude, Codex e Claude Code para um design frontend distintivo e pronto para produção.
Projete Protótipos de UI Diferenciados
por tencentcloudbase
Interfaces genéricas de IA muitas vezes carecem de direção visual e detalhes atentos à plataforma. Esta skill orienta Claude, Codex e Claude Code a definir a intenção de design antes de criar protótipos.
Build and Refine Interfaces with Uizze
por uizze
Interface changes can lose visual consistency or disrupt existing workflows. This skill guides implementation from visual targets and project conventions, with optional Uizze resources and explicit verification.
Extrair Padrões Reutilizáveis de Sistema de Design
por pbakaus
As equipes frequentemente duplicam componentes de UI, tokens e padrões de layout em uma aplicação. Esta skill ajuda Claude, Codex ou Claude Code a encontrar padrões reutilizáveis e consolidá-los em um sistema de design mantido.
Implementar React View Transitions
por vercel-labs
React view transitions são fáceis de posicionar incorretamente, resultando em animações que falham silenciosamente ou geram ruído visual. Esta skill orienta as escolhas de animação para rotas, Suspense, listas e elementos compartilhados.
Crie modelos de email em React com Resend
por resend
Criar modelos de email prontos para produção é difícil porque os clientes de email são diferentes. Esta skill orienta Claude, Codex e Claude Code no uso de componentes React Email, envio, estilização, localização e fluxos de trabalho do editor.