Compétences design-spec-extraction

🎨

design-spec-extraction

Name: design-spec-extraction
Author: Cygnusfear

Sûr 🌐 Accès réseau⚙️ Commandes externes

Extraire les spécifications de conception des captures d'écran

L'extraction manuelle des jetons de conception des captures d'écran et des maquettes est fastidieuse et sujette aux erreurs. Cette compétence utilise un processus IA en 7 passes pour extraire systématiquement les couleurs, la typographie, l'espacement, les composants et les détails d'accessibilité au format JSON W3C DTCG standardisé, prêt pour la génération de code.

Prend en charge: Claude Codex Code(CC)

⚠️ 67 Médiocre

Télécharger le ZIP du skill

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

Activez et commencez à utiliser

Tester

Utilisation de "design-spec-extraction". Extract design tokens from this landing page screenshot

Résultat attendu:

✓ Extracted 24 colors (8 primitive, 16 semantic)
✓ 12 typography styles identified (Display to Caption)
✓ 47 components cataloged (18 atoms, 15 molecules, 14 organisms)
✓ Layout: 12-column grid with 24px gutters
✓ Primary font: Inter (sans-serif)
✓ 2 contrast issues flagged (WCAG AA)
✓ Confidence score: 0.89 overall

Audit de sécurité

Sûr

v5 • 1/16/2026

Pure prompt-based skill with no executable code. All file I/O is explicitly scoped to user-specified directories. No network calls, external commands, or environment access. Static findings are false positives: hex color codes misidentified as cryptographic algorithms, Markdown backticks misidentified as shell execution, and design analysis terminology misidentified as reconnaissance.

Fichiers analysés

3,586

Lignes analysées

résultats

Total des audits

Facteurs de risque

🌐 Accès réseau (5)

references/design-tokens-schema.json:2 references/design-tokens-schema.json:3 skill-report.json:6 SKILL.md:1159 SKILL.md:1391

⚙️ Commandes externes (167)

Audité par: claude Voir l’historique des audits →

Score de qualité

Architecture

100

Maintenabilité

Contenu

Communauté

100

Sécurité

Conformité aux spécifications

Ce que vous pouvez construire

Extraire les jetons du système de conception

Convertir les conceptions visuelles en jetons de conception prêts pour le code pour une implémentation cohérente dans votre base de code.

Retro-concevoir les maquettes UI

Analyser les captures d'écran des interfaces concurrentielles ou sources d'inspiration pour extraire les spécifications pour un prototypage rapide.

Générer la documentation de conception

Créer une documentation de conception complète à partir des maquettes pour la transmission aux développeurs et la maintenance du système de conception.

Essayez ces prompts

Extraction de base

Use the Design Specification Extraction skill to analyze the attached screenshot. Create .design-specs/my-project directory and run all 7 passes to produce design-spec.json following the W3C DTCG format.

Export Figma

Analyze this Figma export image using the design-spec-extraction skill. Focus on extracting the complete color palette, typography scale, and component hierarchy. Output to .design-specs/{project-name}/.

Audit d'accessibilité

Run the Design Specification Extraction skill with focus on Pass 6 (States & Accessibility). Analyze the screenshot for contrast issues, touch target sizes, and missing ARIA labels. Report findings in the accessibility section.

Composants à états multiples

Extract component specifications including all visible states (default, hover, active, disabled). Use the 7-pass extraction but emphasize Pass 4 (Component Detection) and Pass 6 (States) for complete interactive element documentation.

Bonnes pratiques

Utilisez des images sources haute résolution pour une extraction précise des couleurs et des mesures
Fournissez plusieurs captures d'écran si vous analysez les états au survol ou interactifs
Incluez le nom de l'outil de conception (Figma, Sketch, XD) pour un scoring de confiance plus élevé
Nommez le répertoire de sortie de manière descriptive (par exemple, .design-specs/page-marketing)

Éviter

L'utilisation de captures d'écran basse résolution conduit à des valeurs de couleur inexactes et des composants manqués
S'attendre à l'analyse de sites Web en direct - cette compétence analyse uniquement des images statiques
Sauter les passes intermédiaires réduit la validation croisée et peut manquer des détails
Ne pas valider le JSON final contre le schéma avant de l'utiliser en production

Foire aux questions

Quels formats d'image sont pris en charge ?

Les formats PNG, JPG et WebP fonctionnent le mieux. Assurez-vous une haute résolution (au moins une densité d'affichage 1x) pour une extraction précise.

Peut-on extraire de sites Web en direct ?

Non. La compétence analyse des images statiques. Faites une capture d'écran du site Web ou utilisez un export Figma/Sketch pour de meilleurs résultats.

Quelle est la précision des valeurs de couleur ?

Les couleurs sont estimées visuellement à partir de l'image. Les images haute résolution donnent des résultats à 1-2% des jetons de conception originaux.

Mes données de conception sont-elles partagées quelque part ?

Non. Toutes les entrées/sorties de fichiers sont locales à votre répertoire de projet. Aucune donnée n'est envoyée à des serveurs externes au-delà du contexte du modèle IA.

Comment utiliser la sortie pour la génération de code ?

La sortie JSON suit le format W3C DTCG et peut être importée dans Style Dictionary, Tailwind Config ou les outils de système de conception.

Comment cela se compare-t-il à la transmission manuelle de conception ?

Cette compétence automatise le processus fastidieux de noter manuellement les couleurs, les mesures et les spécifications de composants. Elle produit une sortie structurée et lisible par machine au lieu d'une documentation statique.

Détails du développeur

Auteur

Cygnusfear

Licence

MIT

Dépôt

https://github.com/Cygnusfear/claude-stuff/tree/main/skills/design-spec-extraction

Réf

main

Structure de fichiers

📁 references/

📄 design-tokens-schema.json

📄 extraction-patterns.md

📄 audit_output.json

📄 SKILL.md