pencil-renderer
✓Renderiza códigos de ADN en marcos Pencil .pen. Hace UNA cosa bien. Entrada: código de ADN + tipo de componente (héroe, carta, formulario, etc.) Salida: ID de marco .pen + captura de pantalla Úselo cuando: la exploración del diseño u otros orquestadores necesiten renderizar Propuestas visuales utilizando el backend Pencil MCP.
Instalación
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 |
Renderiza códigos de ADN en marcos Pencil .pen. Hace UNA cosa bien. Entrada: código de ADN + tipo de componente (héroe, carta, formulario, etc.) Salida: ID de marco .pen + captura de pantalla Úselo cuando: la exploración del diseño u otros orquestadores necesiten renderizar Propuestas visuales utilizando el backend Pencil MCP. Fuente: phrazzld/claude-config.
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/phrazzld/claude-config --skill pencil-renderer- Fuente
- phrazzld/claude-config
- Categoría
- </>Desarrollo
- Verificado
- ✓
- Primera vez visto
- 2026-02-01
- Actualizado
- 2026-02-18
Respuestas rápidas
¿Qué es pencil-renderer?
Renderiza códigos de ADN en marcos Pencil .pen. Hace UNA cosa bien. Entrada: código de ADN + tipo de componente (héroe, carta, formulario, etc.) Salida: ID de marco .pen + captura de pantalla Úselo cuando: la exploración del diseño u otros orquestadores necesiten renderizar Propuestas visuales utilizando el backend Pencil MCP. Fuente: phrazzld/claude-config.
¿Cómo instalo pencil-renderer?
Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/phrazzld/claude-config --skill pencil-renderer Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor
¿Dónde está el repositorio de origen?
https://github.com/phrazzld/claude-config
Detalles
- Categoría
- </>Desarrollo
- Fuente
- skills.sh
- Primera vez visto
- 2026-02-01