📦

pencil-to-code

Name: pencil-to-code
Author: JohnWayneeee

Revisión del contenido r1 Seguro ⚙️ Comandos externos🌐 Acceso a red

Convertir diseños de Pencil a código frontend

Los diseños de Pencil suelen perder detalle cuando los desarrolladores los traducen a ojo. Esta skill guía a Claude, Codex y Claude Code mediante extracción precisa, implementación y comprobaciones visuales.

Compatible con: Claude Codex Code(CC)

📊 74 Adecuado

Instalar con mi Agente

Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.

Solicitud de agente

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.

Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.

Recursos legibles por agentes

Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.

Detalle Markdown GET /skills/johnwayneeee-pencil-to-code.md Manifest firmado GET /api/skills/johnwayneeee-pencil-to-code/manifest Lockfile firmado GET /api/skills/johnwayneeee-pencil-to-code/lockfile

Pruébalo

Usando "pencil-to-code". Un usuario proporciona un artboard de Pencil para una página hero de producto y pide la implementación.

Resultado esperado:

El asistente extrae dimensiones, tipografía, assets y reglas responsivas, y luego entrega componentes frontend con una estructura visual coincidente.

Usando "pencil-to-code". Un usuario dice que la versión de escritorio es demasiado ancha en comparación con el diseño de Pencil.

Resultado esperado:

El asistente comprueba anchos de artboard, reglas de primer plano fijo y capturas de pantalla renderizadas, y luego recomienda cambios específicos de layout y tokens CSS.

Usando "pencil-to-code". Un usuario necesita convertir tarjetas repetidas de Pencil en un componente mantenible.

Resultado esperado:

El asistente identifica propiedades compartidas de las tarjetas, crea una estructura reutilizable y preserva texto, icono, espaciado e imagen específicos de cada tarjeta.

Auditoría de seguridad

Seguro

v5 • 6/7/2026 Abrir el informe versionado

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.

Archivos escaneados

137

Líneas analizadas

Elementos de revisión

Falsos positivos ignorados

Factores de riesgo

⚙️ Comandos externos (4)

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

🌐 Acceso a red (1)

SKILL.md:54

La auditoría estática y semántica completada más reciente no detectó hallazgos de seguridad confirmados. Esto no demuestra que el skill no tenga efectos secundarios.

Auditado por: codex Ver historial de auditorías →

Compartir y citar este informe

Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.

Abrir el informe versionado

Copiar enlace del informe

https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Insignia Markdown

[![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)

Insignia HTML

<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>

Tarjeta para insertar

<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>

Citas académicas (APA · BibTeX · CFF)

Cita APA

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

Cita BibTeX

@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"

Puntuación de Skillstore

Por qué esta puntuación Confianza de la evidencia: Medio

Arquitectura

Mantenibilidad

Contenido

Comunidad

Cumplimiento de la especificación

Lo que puedes crear

Implementar una página de marketing

Convierte una landing page de Pencil en HTML, CSS o componentes de framework responsivos, manteniendo intacto el layout del artboard.

Igualar un handoff de diseño

Usa node IDs, variables y capturas de pantalla para resolver diferencias de espaciado, tipografía y recorte de imagen durante la revisión.

Migrar pantallas legacy

Reconstruye pantallas existentes diseñadas en Pencil en un stack frontend moderno con componentes reutilizables y desviaciones visuales documentadas.

Prueba estos prompts

Convertir un artboard

Usa pencil-to-code para convertir este artboard de Pencil en código frontend responsivo. Preserva layout, tipografía, imágenes y espaciado.

Implementar con node IDs

Usa pencil-to-code con estos node IDs de Pencil. Inspecciona el artboard, las variables, los componentes repetidos y los assets antes de programar.

Depurar fidelidad visual

Usa pencil-to-code para comparar la implementación actual con la captura de pantalla de Pencil e identificar cambios CSS para una coincidencia visual más cercana.

Crear un sistema de componentes responsivos

Usa pencil-to-code para extraer tokens compartidos y unidades repetidas de estos artboards de Pencil, luego implementa componentes responsivos reutilizables.

Mejores prácticas

Proporciona node IDs de Pencil, tamaños de artboard objetivo y assets exportados antes de pedir código.
Ejecuta comprobaciones visuales en cada breakpoint de diseño, no solo en anchos de navegador comunes.
Mantén los tokens de diseño reutilizables en el tema del proyecto o en variables CSS.

Evitar

No aproximes logos, fotos ni ilustraciones cuando haya assets exportados disponibles.
No estires layouts de primer plano fijo solo porque el viewport sea más ancho.
No te bases únicamente en capturas de pantalla cuando haya variables de Pencil y detalles de nodos disponibles.

Preguntas frecuentes

¿Para qué sirve Pencil to Code?

Ayuda a convertir archivos de diseño de Pencil y node IDs en código frontend con alta fidelidad visual.

¿Requiere acceso a Pencil MCP?

Funciona mejor con acceso a Pencil MCP, pero las capturas de pantalla, node IDs y assets exportados también pueden guiar la implementación.

¿Puede gestionar layouts responsivos?

Sí. El flujo de trabajo enfatiza reglas responsivas específicas del artboard, columnas fijas, pilas de primer plano y capturas de pantalla por breakpoint.

¿Puede crear lógica de aplicación?

Se centra en la implementación visual. La lógica de negocio, los flujos de datos y el comportamiento backend necesitan requisitos separados.

¿Cómo comprueba la precisión visual?

Compara capturas de pantalla del navegador con capturas de Pencil y usa estilos computados para problemas de tipografía y espaciado.

¿Qué herramientas pueden usar esta skill?

El informe indica compatibilidad con Claude, Codex y Claude Code.