Fähigkeiten design-spec-extraction

📦

design-spec-extraction

Name: design-spec-extraction
Author: Cygnusfear

Inhaltsrevision r1 Mittleres Risiko 🌐 Netzwerkzugriff⚙️ Externe Befehle

UI-Design-Spezifikationen aus Screenshots extrahieren

Die manuelle Design-Übergabe aus Screenshots ist langsam und uneinheitlich. Dieser Skill extrahiert Tokens, Komponenten, Layout und Barrierefreiheitsnotizen in strukturierte Design-Spezifikationsdateien.

Unterstützt: Claude Codex Code(CC)

📊 66 Angemessen

Mit meinem Agent installieren

Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.

Agent-Anfrage

Review the Skillstore skill "design-spec-extraction" from https://skillstore.io/skills/cygnusfear-design-spec-extraction.md and its manifest at https://skillstore.io/api/skills/cygnusfear-design-spec-extraction/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.

Agent-lesbare Ressourcen

Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.

Markdown-Detailseite GET /skills/cygnusfear-design-spec-extraction.md Signiertes manifest GET /api/skills/cygnusfear-design-spec-extraction/manifest Signiertes lockfile GET /api/skills/cygnusfear-design-spec-extraction/lockfile

Testen

„design-spec-extraction“ wird verwendet. Ein Landingpage-Screenshot mit Hero-Bereich, Karten und einem Call-to-Action.

Erwartetes Ergebnis:

24 Farben mit primitiven und semantischen Gruppierungen extrahiert.
Ein 12-Spalten-Desktop-Raster mit 24px-Gutters identifiziert.
Hero-, Karten-, Navigations- und Button-Komponenten katalogisiert.
Zwei Kontrastprobleme markiert und Barrierefreiheitskorrekturen vorgeschlagen.

„design-spec-extraction“ wird verwendet. Ein Dashboard-Mockup mit Sidebar-Navigation und Datenkarten.

Erwartetes Ergebnis:

Header, Sidebar, Inhaltsbereiche und Kartencontainer zugeordnet.
Typografierollen für Überschriften, Labels, Kennzahlen und Fließtext erkannt.
Abstands- und Radius-Tokens für wiederholte Kartenmuster extrahiert.

„design-spec-extraction“ wird verwendet. Eine Reihe von Button-Zustandsbildern für ein Designsystem.

Erwartetes Ergebnis:

Button-Varianten nach primary, secondary, disabled und focus states gruppiert.
Sichtbare Unterschiede bei Farbe, Rahmen, Schatten und Fokusindikatoren erfasst.
Komponentennotizen erstellt, die für eine Implementierungsprüfung geeignet sind.

Sicherheitsaudit

Mittleres Risiko

v11 • 9.7.2026 Versionsbericht öffnen

Most static findings are false positives caused by markdown code fences, inline design-spec paths, design grid terminology, and schema or documentation URLs. The screenshot references describe user-provided visual inputs, not covert capture or upload. Two mkdir examples are confirmed as limited command-use risks, and one semantic finding covers unsafe project-name substitution.

Gescannte Dateien

3,387

Analysierte Zeilen

Prüfelemente

Falschmeldungen ignoriert

Bestätigte Sicherheitsbedenken (1)

Mittel

SKILL.md:36-40 SKILL.md:1257-1267

Unsanitized Project Name In Paths And Shell Command

The skill tells users to create .design-specs/{project-name} and replace {project} with an actual project name, but it does not require slug validation. A project name containing path traversal or shell metacharacters could write outside the intended directory if copied into the bash command.

The bash mkdir examples and raw project placeholder are explicit. The impact depends on whether an agent substitutes untrusted text into a shell command, so this is a contextual risk.

Elemente der Fähigkeitsprüfung (2)

Dies sind echte lokale Fähigkeiten, die für diese Fähigkeit erwartet werden können; daher müssen sie überprüft werden, werden jedoch nicht als bestätigtes bösartiges Verhalten gezählt.

Mittel

SKILL.md:38-40

Ruby/shell backtick execution

```bash

This fenced bash example tells the agent to run mkdir with a project-name placeholder. The command is limited to directory creation, but unsanitized substitution could be unsafe in a shell context.

Mittel

SKILL.md:1258-1260

Ruby/shell backtick execution

```bash

This fenced bash example tells the agent to run mkdir with a project-name placeholder. The command is limited to directory creation, but unsanitized substitution could be unsafe in a shell context.

Risikofaktoren

🌐 Netzwerkzugriff (4)

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

⚙️ Externe Befehle (50)

SKILL.md:38-40 SKILL.md:40-46 SKILL.md:46-47 SKILL.md:47-48 SKILL.md:48-49 SKILL.md:49-50 SKILL.md:50-51 SKILL.md:51-52 SKILL.md:52-70 SKILL.md:70-93 SKILL.md:93-103 SKILL.md:103-109 SKILL.md:109-191 SKILL.md:191-193 SKILL.md:193-203 SKILL.md:203-209 SKILL.md:209-211 SKILL.md:211-216 SKILL.md:216-332 SKILL.md:332-334 SKILL.md:334-344 SKILL.md:344-350 SKILL.md:350-353 SKILL.md:353-354 SKILL.md:354-360 SKILL.md:360-361 SKILL.md:361-521 SKILL.md:521-523 SKILL.md:523-533 SKILL.md:533-539 SKILL.md:539-542 SKILL.md:542-543 SKILL.md:543-544 SKILL.md:544-550 SKILL.md:550-551 SKILL.md:551-552 SKILL.md:552-718 SKILL.md:718-720 SKILL.md:720-730 SKILL.md:730-736 SKILL.md:736-739 SKILL.md:739-740 SKILL.md:740-746 SKILL.md:746-747 SKILL.md:747-874 SKILL.md:874-876 SKILL.md:876-886 SKILL.md:886-892 SKILL.md:892-895 SKILL.md:895-896

Geprüft von: codex Audit-Verlauf anzeigen →

Diesen Bericht teilen & zitieren

Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.

Versionsbericht öffnen

Berichtslink kopieren

https://skillstore.io/skills/cygnusfear-design-spec-extraction/audits/11?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown-Badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/cygnusfear-design-spec-extraction/security.svg)](https://skillstore.io/skills/cygnusfear-design-spec-extraction?utm_source=security_passport_badge)

HTML-Badge

<a href="https://skillstore.io/skills/cygnusfear-design-spec-extraction?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cygnusfear-design-spec-extraction/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Einbettungskarte

<iframe src="https://skillstore.io/embed/skills/cygnusfear-design-spec-extraction.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Wissenschaftliche Zitate (APA · BibTeX · CFF)

APA-Zitat

Cygnusfear. (2026). design-spec-extraction security audit report (audit version 11) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cygnusfear-design-spec-extraction/audits/11

BibTeX-Zitat

@techreport{cygnusfear-cygnusfear-design-spec-extraction-2026,
  author = {Cygnusfear},
  title = {design-spec-extraction security audit report (audit version 11)},
  institution = {Skillstore},
  year = {2026},
  number = {11},
  url = {https://skillstore.io/skills/cygnusfear-design-spec-extraction/audits/11},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "design-spec-extraction security audit report (audit version 11)"
version: "unspecified"
type: report
authors:
  - name: "Cygnusfear"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/cygnusfear-design-spec-extraction/audits/11"
identifiers:
  - type: other
    value: "skillstore:cygnusfear-design-spec-extraction:audit:11"
    description: "Skillstore immutable audit report identifier"

Skillstore-Score

Warum dieser Score Evidenzvertrauen: Hoch

Architektur

Wartbarkeit

Inhalt

Gemeinschaft

Spezifikationskonformität

Was Sie erstellen können

Implementierungs-Tokens erstellen

Wandle einen bereitgestellten UI-Screenshot in Design-Tokens und Komponentennotizen für die Frontend-Implementierung um.

Bestehende Oberflächen dokumentieren

Extrahiere wiederverwendbare Farben, Textstile, Abstände und Komponentenmuster aus freigegebenen Produktbildschirmen.

Visuelle Barrierefreiheit prüfen

Identifiziere Kontrastprobleme, Bedenken bei Touch-Zielen, Fokuszustände und semantische Struktur aus Designbildern.

Diese Prompts ausprobieren

Einfache Screenshot-Extraktion

Verwende design-spec-extraction für den angehängten Screenshot. Erstelle einen sicheren Projekt-Slug und erzeuge die finale Design-Spezifikation mit Layout, Farben, Typografie und Komponenten.

Figma-Export-Handoff

Analysiere diesen Figma-Export mit design-spec-extraction. Konzentriere dich auf Design-Tokens, Komponentenhierarchie, Abstände und Hinweise für den Entwickler-Handoff.

Barrierefreiheitsorientierte Prüfung

Führe design-spec-extraction für diesen Bildschirm aus und betone die Barrierefreiheit. Berichte über Kontrastprobleme, Fokusindikatoren, Touch-Ziele, Labels und empfohlene Korrekturen.

Multi-State-Komponentenaudit

Verwende design-spec-extraction für diese Bilder der Zustände default, hover, active und disabled. Vergleiche die Zustände und konsolidiere Varianten in einer Komponentenspezifikation.

Bewährte Praktiken

Verwende hochauflösende, vom Benutzer autorisierte Bilder, damit Farb- und Abstandsschätzungen zuverlässiger sind.
Verwende einen sicheren Projekt-Slug mit Buchstaben, Zahlen und Bindestrichen für Ausgabepfade.
Stelle separate Bilder für Hover-, Fokus-, Disabled- und responsive Zustände bereit, wenn diese Details wichtig sind.

Vermeiden

Analysiere keine vertraulichen Bildschirme, die Secrets, Zugangsdaten oder private Kundendaten enthalten.
Verwende keine ungeprüften Projektnamen in Shell-Befehlen oder Ausgabepfaden wieder.
Sende die finale Spezifikation nicht in die Codegenerierung, ohne Schätzungen und Barrierefreiheitsergebnisse zu prüfen.

Häufig gestellte Fragen

Welche Eingaben benötigt dieser Skill?

Er benötigt vom Benutzer bereitgestellte Screenshots, Figma-Exporte, Mockups oder freigegebene Website-Aufnahmen.

Erfasst er meinen Bildschirm automatisch?

Nein. Er analysiert nur visuelle Dateien oder Bilder, die der Benutzer bereitstellt.

Was enthält die Ausgabe?

Die Ausgabe enthält Tokens, Layoutdaten, Komponentenhierarchie, Barrierefreiheitsnotizen, Konfidenzwerte und Empfehlungen.

Kann er exakte Schriftarten und Farben erkennen?

Er schätzt sie aus dem Bild, sofern die Quelldatei keine exakten Designmetadaten bereitstellt.

Wohin werden Dateien geschrieben?

Der Workflow schreibt lokale Pass-Dateien und eine finale Design-Spezifikation in ein .design-specs-Projektverzeichnis.

Ist das Ergebnis produktionsbereit?

Es ist ein starker Ausgangspunkt für den Handoff, aber Teams sollten Schätzungen prüfen und Tokens validieren, bevor sie sie in der Produktion verwenden.