📦

pencil-to-code

Name: pencil-to-code
Author: JohnWayneeee

Revisão do conteúdo r1 Seguro ⚙️ Comandos externos🌐 Acesso à rede

Converter Designs do Pencil em Código Frontend

Designs do Pencil frequentemente perdem detalhes quando desenvolvedores os traduzem visualmente. Esta skill guia Claude, Codex e Claude Code por extração, implementação e verificações visuais precisas.

Suporta: Claude Codex Code(CC)

📊 74 Adequado

Instalar com meu Agente

Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.

Solicitação do 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.

Seu Agente ainda deve apresentar o plano e solicitar qualquer confirmação exigida pela política de segurança.

Recursos legíveis por agentes

Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.

Detalhe em Markdown GET /skills/johnwayneeee-pencil-to-code.md manifest assinado GET /api/skills/johnwayneeee-pencil-to-code/manifest lockfile assinado GET /api/skills/johnwayneeee-pencil-to-code/lockfile

Testar

Usando "pencil-to-code". Um usuário fornece uma prancheta do Pencil para uma página hero de produto e pede a implementação.

Resultado esperado:

O assistente extrai dimensões, tipografia, ativos e regras responsivas, depois entrega componentes frontend com estrutura visual correspondente.

Usando "pencil-to-code". Um usuário diz que a versão desktop está larga demais em comparação com o design do Pencil.

Resultado esperado:

O assistente verifica larguras de prancheta, regras fixas de primeiro plano e capturas de tela renderizadas, depois recomenda mudanças direcionadas de layout e tokens CSS.

Usando "pencil-to-code". Um usuário precisa converter cards repetidos do Pencil em um componente manutenível.

Resultado esperado:

O assistente identifica propriedades compartilhadas dos cards, cria uma estrutura reutilizável e preserva texto, ícone, espaçamento e detalhes de imagem de cada card.

Auditoria de segurança

Seguro

v5 • 06/07/2026 Abrir o relatório 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.

Arquivos analisados

137

Linhas analisadas

Itens de revisão

Falsos positivos ignorados

Fatores de risco

⚙️ Comandos externos (4)

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

🌐 Acesso à rede (1)

SKILL.md:54

A auditoria estática e semântica concluída mais recente não detectou achados de segurança confirmados. Isso não comprova que a skill não tenha efeitos colaterais.

Auditado por: codex Ver histórico de auditoria →

Compartilhar e citar este relatório

Compartilhe o relatório de avaliação versionado, o badge neutro, o cartão incorporável e as citações. A Skillstore apresenta evidências sem decidir se este Skill é seguro.

Abrir o relatório versionado

Copiar link do relatório

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

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

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

Cartão incorporável

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

Citações acadêmicas (APA · BibTeX · CFF)

Citação 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ção 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"

Pontuação do Skillstore

Por que esta pontuação Confiança das evidências: Médio

Arquitetura

Manutenibilidade

Conteúdo

Comunidade

Conformidade com a especificação

O que você pode criar

Implementar uma Página de Marketing

Converta uma landing page do Pencil em HTML, CSS ou componentes de framework responsivos, mantendo intacto o layout da prancheta.

Corresponder a um Handoff de Design

Use IDs de nós, variáveis e capturas de tela para resolver diferenças de espaçamento, tipografia e recorte de imagem durante a revisão.

Migrar Telas Legadas

Reconstrua telas existentes criadas no Pencil em uma stack frontend moderna com componentes reutilizáveis e desvios visuais documentados.

Teste estes prompts

Converter uma Prancheta

Use pencil-to-code para converter esta prancheta do Pencil em código frontend responsivo. Preserve layout, tipografia, imagens e espaçamento.

Implementar com IDs de Nós

Use pencil-to-code com estes IDs de nós do Pencil. Inspecione a prancheta, variáveis, componentes repetidos e ativos antes de codificar.

Depurar Fidelidade Visual

Use pencil-to-code para comparar a implementação atual com a captura de tela do Pencil e identificar mudanças de CSS para uma correspondência visual mais próxima.

Criar um Sistema de Componentes Responsivo

Use pencil-to-code para extrair tokens compartilhados e unidades repetidas destas pranchetas do Pencil, depois implemente componentes responsivos reutilizáveis.

Boas práticas

Forneça IDs de nós do Pencil, tamanhos de prancheta de destino e ativos exportados antes de pedir código.
Execute verificações visuais em cada breakpoint de design, não apenas em larguras comuns de navegador.
Mantenha tokens de design reutilizáveis no tema do projeto ou em variáveis CSS.

Evitar

Não aproxime logos, fotos ou ilustrações quando ativos exportados estiverem disponíveis.
Não estique layouts fixos de primeiro plano apenas porque a viewport é mais larga.
Não dependa apenas de capturas de tela quando variáveis e detalhes de nós do Pencil estiverem disponíveis.

Perguntas frequentes

Para que serve Pencil to Code?

Ela ajuda a converter arquivos de design do Pencil e IDs de nós em código frontend com alta fidelidade visual.

Ela requer acesso ao Pencil MCP?

Funciona melhor com acesso ao Pencil MCP, mas capturas de tela, IDs de nós e ativos exportados ainda podem orientar a implementação.

Ela consegue lidar com layouts responsivos?

Sim. O fluxo de trabalho enfatiza regras responsivas específicas da prancheta, colunas fixas, pilhas de primeiro plano e capturas de tela de breakpoints.

Ela consegue criar lógica de aplicação?

Ela se concentra na implementação visual. Lógica de negócio, fluxos de dados e comportamento de backend precisam de requisitos separados.

Como ela verifica a precisão visual?

Ela compara capturas de tela do navegador com capturas de tela do Pencil e usa estilos computados para problemas de tipografia e espaçamento.

Quais ferramentas podem usar esta skill?

O relatório lista compatibilidade com Claude, Codex e Claude Code.