Extraire les tokens de design d’un site web
Recréer manuellement le langage visuel d’un site public est lent et source d’incohérences. Cette compétence extrait des couleurs, polices, espacements, rayons, ombres et fichiers de tokens de départ à examiner.
Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.
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.Votre Agent doit toujours présenter son plan et demander toute confirmation exigée par la politique de sécurité.
Utilisez ces liens lorsqu’un Agent IA, un crawler ou un script a besoin d’un contexte propre au lieu de lire toute la page.
Utilisation de « extract-design-system ». Analyser une page marketing publique pour obtenir des tokens de design de départ.
Résultat attendu:
Utilisation de « extract-design-system ». Exécuter uniquement l’extraction pour un site de documentation public.
Résultat attendu:
Utilisation de « extract-design-system ». Régénérer les fichiers de tokens à partir d’une extraction normalisée existante.
Résultat attendu:
La compétence actualise les fichiers de tokens de départ et explique que les styles existants de l’application n’ont pas été modifiés.
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.
Il s’agit de capacités locales réelles qui peuvent être attendues pour cette compétence ; elles nécessitent donc un examen, mais ne sont pas comptabilisées comme comportement malveillant confirmé.
Partagez le rapport d’évaluation versionné, le badge neutre, la carte intégrable et les citations. Skillstore présente les preuves sans décider si ce Skill est sûr.
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"
Créer des tokens de design de départ à partir d’un site de référence public avant de construire un nouveau frontend.
Identifier les couleurs, polices, espacements, rayons et ombres probables à partir d’une page de marque publique.
Générer des fichiers de tokens à partir d’un site public existant avant de planifier une migration de styles.
Extrais les primitives de design de cette URL publique et résume les tokens de départ avant de générer les fichiers : <url>
Analyse cette URL publique avec extraction seule. Signale les couleurs, polices, espacements, rayons et ombres détectés : <url>
Utilise la sortie d’extraction normalisée existante pour régénérer les fichiers de tokens de départ. Ne modifie pas le code ni les styles de l’application.
Extrais les tokens de cette URL publique, identifie les lacunes probables dues au contenu dynamique et recommande les valeurs nécessitant une revue manuelle : <url>
Auteur
arvindrkLicence
MIT
Révision Skillstore
r1
Avis de version
L’auteur n’a déclaré aucune version.
Réf
3e4b6c31a74a3bd1a291c98cf585d720cb9fbc88
Récence de maintenance
22/07/2026
Utilisation
4 téléchargements · 92 vues
Structure de fichiers
Concevoir des interfaces frontend distinctives
par Atman36
Les interfaces générées génériques semblent souvent prévisibles et faibles. Cette compétence guide Claude, Codex et Claude Code vers une conception frontend distinctive et prête pour la production.
Concevoir des prototypes d’interface utilisateur distinctifs
par tencentcloudbase
Les interfaces d’IA génériques manquent souvent de direction visuelle et de détails adaptés à la plateforme. Cette compétence guide Claude, Codex et Claude Code pour définir l’intention de conception avant de créer des prototypes.
Build and Refine Interfaces with Uizze
par 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.
Implémenter les transitions de vue React
par vercel-labs
Les transitions de vue React sont faciles à mal placer, ce qui entraîne des animations silencieuses ou gênantes. Cette skill guide les choix d’animations de routes, de Suspense, de listes et d’éléments partagés.
Créer des modèles d’e-mails React Email avec Resend
par resend
Créer des modèles d’e-mails prêts pour la production est difficile, car les clients de messagerie diffèrent. Cette skill guide Claude, Codex et Claude Code dans l’utilisation des composants React Email, l’envoi, le style, la localisation et les workflows d’éditeur.
Améliorer les pratiques TypeScript avec Vue 3
par hyf0
Les projets Vue TypeScript rencontrent souvent des erreurs déroutantes liées aux templates, au routeur et à Volar. Cette skill fournit à Codex, Claude et Claude Code des corrections ciblées pour Vue 3.