pencil-design
✓Pencil (.pen ファイル) で UI をデザインし、そこから製品コードを生成します。 .pen ファイルを操作する場合、Pencil で画面やコンポーネントをデザインする場合、または Pencil デザインからコードを生成する場合に使用します。 Pencil、.pen ファイル、デザインからコードまでのワークフロー、または Pencil MCP ツールを使用した UI デザインに関連するタスクをトリガーします。
SKILL.md
Design production-quality UIs in Pencil and generate clean, maintainable code from them. This skill enforces best practices for design system reuse, variable usage, layout correctness, visual verification, and design-to-code workflows.
These rules address the most common agent mistakes. Violating them produces designs that are inconsistent, hard to maintain, and generate poor code.
NEVER recreate a component from scratch when one already exists in the design file.
Pencil (.pen ファイル) で UI をデザインし、そこから製品コードを生成します。 .pen ファイルを操作する場合、Pencil で画面やコンポーネントをデザインする場合、または Pencil デザインからコードを生成する場合に使用します。 Pencil、.pen ファイル、デザインからコードまでのワークフロー、または Pencil MCP ツールを使用した UI デザインに関連するタスクをトリガーします。 ソース: chiroro-jr/pencil-design-skill。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/chiroro-jr/pencil-design-skill --skill pencil-design- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-11
- 更新日
- 2026-02-18
クイックアンサー
pencil-design とは？
Pencil (.pen ファイル) で UI をデザインし、そこから製品コードを生成します。 .pen ファイルを操作する場合、Pencil で画面やコンポーネントをデザインする場合、または Pencil デザインからコードを生成する場合に使用します。 Pencil、.pen ファイル、デザインからコードまでのワークフロー、または Pencil MCP ツールを使用した UI デザインに関連するタスクをトリガーします。 ソース: chiroro-jr/pencil-design-skill。
pencil-design のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/chiroro-jr/pencil-design-skill --skill pencil-design インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/chiroro-jr/pencil-design-skill
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-02-11