📦

pencil-to-code

Name: pencil-to-code
Author: JohnWayneeee

Inhaltsrevision r1 Sicher ⚙️ Externe Befehle🌐 Netzwerkzugriff

Pencil-Designs in Frontend-Code umwandeln

Pencil-Designs verlieren oft Details, wenn Entwickler sie nach Augenmaß umsetzen. Dieser Skill führt Claude, Codex und Claude Code durch präzise Extraktion, Implementierung und visuelle Prüfungen.

Unterstützt: Claude Codex Code(CC)

📊 74 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 "pencil-to-code" from https://skillstore.io/skills/johnwayneeee-pencil-to-code.md and its manifest at https://skillstore.io/api/skills/johnwayneeee-pencil-to-code/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/johnwayneeee-pencil-to-code.md Signiertes manifest GET /api/skills/johnwayneeee-pencil-to-code/manifest Signiertes lockfile GET /api/skills/johnwayneeee-pencil-to-code/lockfile

Testen

„pencil-to-code“ wird verwendet. Ein Nutzer stellt ein Pencil-Artboard für eine Produkt-Hero-Seite bereit und bittet um die Implementierung.

Erwartetes Ergebnis:

Der Assistent extrahiert Abmessungen, Typografie, Assets und responsive Regeln und liefert dann Frontend-Komponenten mit passender visueller Struktur.

„pencil-to-code“ wird verwendet. Ein Nutzer sagt, dass die Desktop-Version im Vergleich zum Pencil-Design zu breit ist.

Erwartetes Ergebnis:

Der Assistent prüft Artboard-Breiten, feste Vordergrundregeln und gerenderte Screenshots und empfiehlt dann gezielte Änderungen an Layout und CSS-Tokens.

„pencil-to-code“ wird verwendet. Ein Nutzer muss wiederholte Pencil-Cards in eine wartbare Komponente umwandeln.

Erwartetes Ergebnis:

Der Assistent identifiziert gemeinsame Card-Eigenschaften, erstellt eine wiederverwendbare Struktur und bewahrt Text-, Icon-, Abstands- und Bilddetails pro Card.

Sicherheitsaudit

Sicher

v5 • 6.7.2026 Versionsbericht öffnen

All seven static findings are false positives caused by Markdown text, browser API names, CSS terms, and one optional product link. I found no prompt injection, command execution intent, data exfiltration, or unsafe network behavior in the reviewed files.

Gescannte Dateien

137

Analysierte Zeilen

Prüfelemente

Falschmeldungen ignoriert

Risikofaktoren

⚙️ Externe Befehle (4)

SKILL.md:3 SKILL.md:14 SKILL.md:39 SKILL.md:46

🌐 Netzwerkzugriff (1)

SKILL.md:54

Das letzte abgeschlossene statische und semantische Audit erkannte keine bestätigten Sicherheitsbefunde. Dies beweist nicht, dass der Skill keine Nebenwirkungen hat.

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/johnwayneeee-pencil-to-code/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown-Badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/johnwayneeee-pencil-to-code/security.svg)](https://skillstore.io/skills/johnwayneeee-pencil-to-code?utm_source=security_passport_badge)

HTML-Badge

<a href="https://skillstore.io/skills/johnwayneeee-pencil-to-code?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/johnwayneeee-pencil-to-code/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Einbettungskarte

<iframe src="https://skillstore.io/embed/skills/johnwayneeee-pencil-to-code.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

JohnWayneeee. (2026). pencil-to-code security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5

BibTeX-Zitat

@techreport{johnwayneeee-johnwayneeee-pencil-to-code-2026,
  author = {JohnWayneeee},
  title = {pencil-to-code security audit report (audit version 5)},
  institution = {Skillstore},
  year = {2026},
  number = {5},
  url = {https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5},
  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: "pencil-to-code security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
  - name: "JohnWayneeee"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5"
identifiers:
  - type: other
    value: "skillstore:johnwayneeee-pencil-to-code:audit:5"
    description: "Skillstore immutable audit report identifier"

Skillstore-Score

Warum dieser Score Evidenzvertrauen: Mittel

Architektur

Wartbarkeit

Inhalt

Gemeinschaft

Spezifikationskonformität

Was Sie erstellen können

Eine Marketing-Seite implementieren

Eine Pencil-Landingpage in responsives HTML, CSS oder Framework-Komponenten umwandeln, während das Artboard-Layout erhalten bleibt.

Ein Design-Handoff abgleichen

Node-IDs, Variablen und Screenshots verwenden, um Unterschiede bei Abständen, Typografie und Bildzuschnitten während der Prüfung zu klären.

Legacy-Screens migrieren

Bestehende in Pencil entworfene Screens in einem modernen Frontend-Stack mit wiederverwendbaren Komponenten und dokumentierten visuellen Abweichungen neu aufbauen.

Diese Prompts ausprobieren

Ein einzelnes Artboard umwandeln

Use pencil-to-code to convert this Pencil artboard into responsive frontend code. Preserve layout, typography, images, and spacing.

Mit Node-IDs implementieren

Use pencil-to-code with these Pencil node IDs. Inspect the artboard, variables, repeated components, and assets before coding.

Visuelle Wiedergabetreue debuggen

Use pencil-to-code to compare the current implementation with the Pencil screenshot and identify CSS changes for closer visual matching.

Ein responsives Komponentensystem erstellen

Use pencil-to-code to extract shared tokens and repeated units from these Pencil artboards, then implement reusable responsive components.

Bewährte Praktiken

Stelle Pencil-Node-IDs, Zielgrößen für Artboards und exportierte Assets bereit, bevor du Code anforderst.
Führe visuelle Prüfungen an jedem Design-Breakpoint durch, nicht nur bei gängigen Browserbreiten.
Halte wiederverwendbare Design-Tokens im Projekt-Theme oder in CSS-Variablen.

Vermeiden

Logos, Fotos oder Illustrationen nicht approximieren, wenn exportierte Assets verfügbar sind.
Feste Vordergrundlayouts nicht strecken, nur weil der Viewport breiter ist.
Nicht nur auf Screenshots verlassen, wenn Pencil-Variablen und Node-Details verfügbar sind.

Häufig gestellte Fragen

Wofür ist Pencil to Code gedacht?

Es hilft dabei, Pencil-Designdateien und Node-IDs mit hoher visueller Wiedergabetreue in Frontend-Code umzuwandeln.

Erfordert es Pencil MCP-Zugriff?

Es funktioniert am besten mit Pencil MCP-Zugriff, aber Screenshots, Node-IDs und exportierte Assets können die Implementierung ebenfalls unterstützen.

Kann es responsive Layouts verarbeiten?

Ja. Der Workflow betont artboardspezifische responsive Regeln, feste Spalten, Vordergrund-Stacks und Breakpoint-Screenshots.

Kann es Anwendungslogik erstellen?

Es konzentriert sich auf die visuelle Implementierung. Geschäftslogik, Datenflüsse und Backend-Verhalten benötigen separate Anforderungen.

Wie prüft es die visuelle Genauigkeit?

Es vergleicht Browser-Screenshots mit Pencil-Screenshots und nutzt berechnete Styles für Probleme bei Typografie und Abständen.

Welche Tools können diesen Skill verwenden?

Der Bericht listet die Kompatibilität mit Claude, Codex und Claude Code auf.