pencil-renderer
✓Rendern Sie DNA-Codes in Bleistiftrahmen. Macht EINE Sache gut. Eingabe: DNA-Code + Komponententyp (Held, Karte, Form usw.) Ausgabe: .pen-Frame-ID + Screenshot Wird verwendet, wenn: Design-Exploration oder andere Orchestratoren rendern müssen Visuelle Vorschläge mit dem Pencil MCP-Backend.
Installation
SKILL.md
Translate aesthetic DNA codes into Pencil .pen frames via MCP.
DNA axis → Pencil property mapping is deterministic. Example: centered layout → alignItems: "center", symmetric padding
| hero | Container + headline + subhead + CTA buttons | | card | Container + image area + content + actions | | form | Container + labels + inputs + submit | | nav | Container + logo + links + actions | | footer | Container + columns + links + legal | | section | Container + heading + content grid | | button | Frame + text + icon slot |
Rendern Sie DNA-Codes in Bleistiftrahmen. Macht EINE Sache gut. Eingabe: DNA-Code + Komponententyp (Held, Karte, Form usw.) Ausgabe: .pen-Frame-ID + Screenshot Wird verwendet, wenn: Design-Exploration oder andere Orchestratoren rendern müssen Visuelle Vorschläge mit dem Pencil MCP-Backend. Quelle: phrazzld/claude-config.
Fakten (zitierbereit)
Stabile Felder und Befehle für KI/Such-Zitate.
- Installationsbefehl
npx skills add https://github.com/phrazzld/claude-config --skill pencil-renderer- Quelle
- phrazzld/claude-config
- Kategorie
- </>Entwicklung
- Verifiziert
- ✓
- Erstes Auftreten
- 2026-02-01
- Aktualisiert
- 2026-02-18
Schnelle Antworten
Was ist pencil-renderer?
Rendern Sie DNA-Codes in Bleistiftrahmen. Macht EINE Sache gut. Eingabe: DNA-Code + Komponententyp (Held, Karte, Form usw.) Ausgabe: .pen-Frame-ID + Screenshot Wird verwendet, wenn: Design-Exploration oder andere Orchestratoren rendern müssen Visuelle Vorschläge mit dem Pencil MCP-Backend. Quelle: phrazzld/claude-config.
Wie installiere ich pencil-renderer?
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/phrazzld/claude-config --skill pencil-renderer Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code oder Cursor
Wo ist das Quell-Repository?
https://github.com/phrazzld/claude-config
Details
- Kategorie
- </>Entwicklung
- Quelle
- skills.sh
- Erstes Auftreten
- 2026-02-01