pencil-to-code
Pencilデザインをフロントエンドコードに変換
Pencilデザインは、開発者が目視で変換すると細部が失われがちです。このスキルは、Claude、Codex、Claude Codeが正確な抽出、実装、視覚チェックを行えるように導きます。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
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.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「pencil-to-code」を使用しています。 ユーザーがプロダクトのヒーローページ用のPencilアートボードを提供し、実装を依頼します。
期待される結果:
アシスタントは寸法、タイポグラフィ、アセット、レスポンシブルールを抽出し、一致する視覚構造を持つフロントエンドコンポーネントを提供します。
「pencil-to-code」を使用しています。 ユーザーが、デスクトップ版がPencilデザインと比べて広すぎると言います。
期待される結果:
アシスタントはアートボード幅、固定フォアグラウンドルール、レンダリングされたスクリーンショットを確認し、対象を絞ったレイアウトとCSSトークンの変更を推奨します。
「pencil-to-code」を使用しています。 ユーザーは、反復されるPencilカードを保守しやすいコンポーネントに変換する必要があります。
期待される結果:
アシスタントは共有カードプロパティを特定し、再利用可能な構造を作成し、各カード固有のテキスト、アイコン、余白、画像の詳細を保持します。
セキュリティ監査
安全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.
リスク要因
⚙️ 外部コマンド (4)
🌐 ネットワークアクセス (1)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/johnwayneeee-pencil-to-code?utm_source=security_passport_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>埋め込みカード
<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>学術引用 (APA · BibTeX · CFF)
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/5BibTeX形式の引用
@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"
Skillstore スコア
このスコアの理由 証拠の信頼度: 中作成できるもの
マーケティングページを実装する
Pencilのランディングページを、アートボードのレイアウトを保ったまま、レスポンシブなHTML、CSS、またはフレームワークコンポーネントに変換します。
デザインハンドオフに一致させる
レビュー中に、ノードID、変数、スクリーンショットを使用して、余白、タイポグラフィ、画像トリミングの差異を解決します。
レガシー画面を移行する
Pencilで設計された既存画面を、再利用可能なコンポーネントと文書化された視覚的差分を備えた最新のフロントエンドスタックで再構築します。
これらのプロンプトを試す
pencil-to-codeを使用して、このPencilアートボードをレスポンシブなフロントエンドコードに変換してください。レイアウト、タイポグラフィ、画像、余白を保持してください。
これらのPencilノードIDとともにpencil-to-codeを使用してください。コーディング前に、アートボード、変数、反復コンポーネント、アセットを検査してください。
pencil-to-codeを使用して、現在の実装をPencilのスクリーンショットと比較し、より近い視覚的一致のためのCSS変更を特定してください。
pencil-to-codeを使用して、これらのPencilアートボードから共有トークンと反復単位を抽出し、その後、再利用可能なレスポンシブコンポーネントを実装してください。
ベストプラクティス
- コードを依頼する前に、PencilノードID、対象アートボードサイズ、エクスポート済みアセットを提供してください。
- 一般的なブラウザ幅だけでなく、すべてのデザインブレークポイントで視覚チェックを実行してください。
- 再利用可能なデザイントークンは、プロジェクトテーマまたはCSS変数に保持してください。
回避
- エクスポート済みアセットが利用可能な場合、ロゴ、写真、イラストを近似で済ませないでください。
- ビューポートが広いという理由だけで、固定フォアグラウンドレイアウトを引き伸ばさないでください。
- Pencilの変数やノード詳細が利用可能な場合、スクリーンショットだけに依存しないでください。
よくある質問
Pencil to Codeは何のためのものですか？
Pencil MCPアクセスは必要ですか？
レスポンシブレイアウトに対応できますか？
アプリケーションロジックを作成できますか？
視覚的な正確性はどのようにチェックしますか？
このスキルを使用できるツールはどれですか？
開発者情報
作成者
JohnWayneeeeライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
b8ca75d2c0a7e7102978993058777d82b8ab2610
メンテナンスの新しさ
2026/7/18
利用状況
5 ダウンロード · 8 閲覧
ファイル構成