pencil-renderer
✓Restituez les codes ADN dans les cadres Pencil .pen. Fait bien UNE chose. Entrée : code ADN + type de composant (héros, carte, formulaire, etc.) Sortie : ID de cadre .pen + capture d'écran À utiliser lorsque : l'exploration de conception ou d'autres orchestrateurs doivent effectuer un rendu propositions visuelles utilisant le backend Pencil MCP.
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 |
Restituez les codes ADN dans les cadres Pencil .pen. Fait bien UNE chose. Entrée : code ADN + type de composant (héros, carte, formulaire, etc.) Sortie : ID de cadre .pen + capture d'écran À utiliser lorsque : l'exploration de conception ou d'autres orchestrateurs doivent effectuer un rendu propositions visuelles utilisant le backend Pencil MCP. Source : phrazzld/claude-config.
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/phrazzld/claude-config --skill pencil-renderer- Source
- phrazzld/claude-config
- Catégorie
- </>Développement
- Vérifié
- ✓
- Première apparition
- 2026-02-01
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que pencil-renderer ?
Restituez les codes ADN dans les cadres Pencil .pen. Fait bien UNE chose. Entrée : code ADN + type de composant (héros, carte, formulaire, etc.) Sortie : ID de cadre .pen + capture d'écran À utiliser lorsque : l'exploration de conception ou d'autres orchestrateurs doivent effectuer un rendu propositions visuelles utilisant le backend Pencil MCP. Source : phrazzld/claude-config.
Comment installer pencil-renderer ?
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/phrazzld/claude-config --skill pencil-renderer Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor
Où se trouve le dépôt source ?
https://github.com/phrazzld/claude-config
Détails
- Catégorie
- </>Développement
- Source
- skills.sh
- Première apparition
- 2026-02-01