Pencilで「AI臭くならないデザイン」を作るために、skillsに how / how to think を書いてみた
はじめに
現在 Pencil の話題を見ることが増えました。
ただ、Pencil を触っていて、
「それっぽいけど、どこかAIっぽい」
「見た目は整っているけど、判断の一貫性がない」
と感じることはありませんか？
そこで今回は、
Pencil でデザインを作るときの skills を試しに作って公開してみました。
これは、「これを使えば良いデザインができます」という話ではありません。
自分より上手く作れる人はたくさんいる前提で、自分なりにやってみた考え方と分解の仕方を書いた、という位置づけです。
design-skills でやっていること
公開したリポジトリはこちらです。
READMEにも書いてありますが
npx skills add mae616/design-skills
でインストールし(全skillsを選択)、CLAUDE.mdやagent.mdに自動適用の文を追記するだけです。
## デザインスキル（自動適用）
デザインやUI実装のタスクでは、以下の判断軸を適用すること：
| コンテキスト | スキル | 観点 |
|-------------|--------|------|
| 画面・コンポーネント設計 | ui-designer | 情報設計→視覚階層→コンポーネント化 |
| デザインから実装 | frontend-implementation | ピクセルより意図、マジックナンバーより構造、状態も仕様 |
| アニメーション・インタラクション | creative-coder | 目的ある動き、a11y安全、パフォーマンス意識 |
| UI実装全般 | accessibility-engineer | ネイティブ要素優先、ARIA最小、キーボード基本 |
| UXレビュー・離脱分析 | usability-psychologist | 認知負荷、エラー防止、一貫性 |
共通原則：
- 状態（loading/error/empty/disabled）は後付けではなく仕様として定義
- 場当たりではなくトークン・コンポーネント・パターンで統一
- アクセシビリティは最初から組み込む
Pencil というか汎用的なデザイン用の skills / カスタム指示を置いています。
特徴としては、
- デザインを直接「こう作れ」と指示するより
- 判断軸や考え方の順序を言語化している
という点があります。
具体的には、
- how（どう操作するか）
- how to think（どう判断するか）
を 同じ skills の中に混ぜて書く、という試し方をしています。
なぜ how to think を skills に入れたか
Pencil に限らずですが、
AI にデザインを作らせるとき、
- 見た目の指定だけだと、場面ごとの判断がブレやすい
- 制約を増やしすぎると、逆に固くなりやすい
という感覚がありました。
そこで今回は、
- 何を優先するか
- 何を捨てるか
- 迷ったときにどちらを選ぶか
といった 判断の基準そのものを skills 側に置いてみています。
デザインを生成させているというより、判断をどこまで言語で共有できるかの実験、という感覚に近いです。
skillsの内容を日本語翻訳して貰えばわかりますが、AIと壁打ちして言語化した自分の知識を、Claude Codeを使ってskillsとして書き出したものになります
skills / カスタム指示の使い方について
この skills は、そのまま使うこともできますが、基本的には 自分用に書き換える / もしくは拡張して新しいものを公開する前提で読むのがよさそうだと思っています。
- Claude Code で編集する
- 既存 skills を分解して一部だけ使う
- 自分の判断軸を足して新しく作る
といったこともできます。
skills は自分は完成品というより、その時点でのメモや知識の集合体くらいの位置づけのイメージを持っています。
skills なし / ありの比較
いくつかのケースで、skills なし / ありの比較も載せます。
ダッシュボードの生成
プロンプト
Pencil mcpで以下のダッシュボードをデザインしてください:
要件:
- サイドバーナビゲーション
- ヘッダー（検索、通知、プロフィール）
- 統計カード 4枚（売上、ユーザー数、注文数、成長率）
- グラフエリア（折れ線グラフ用プレースホルダー）
- 最近のアクティビティリスト
スタイル: モダン、クリーン、ダークモード対応
skills なし
skills あり
カードコンポーネントの生成
プロンプト
Pencil で以下のカードコンポーネントをデザインしてください:
バリエーション:
1. 基本カード（タイトル、説明、ボタン）
2. 画像カード（サムネイル付き）
3. 統計カード（数値、増減率、アイコン）
4. プロフィールカード（アバター、名前、役職）
5. 価格カード（プラン名、価格、機能リスト）
各カードは hover 状態も含めてデザインしてください。
skills なし
skills あり
RDD からアプリを作るケース
プロンプト
要件定義書 @rdd.md からPencilでデザインを作成してください。
rdd.md はこれを使いました。
skills なし
skills あり
それぞれについて、
良し悪しを断定するというより、
- 情報のまとまり方
- 余白や密度の扱い
- 判断の一貫性
あたりに差が出やすかった、という観察を書いています。
まとめ
この skills 自体は、現時点での私のAI skillsの模索や実験 を置いたものです。
もっと良いやり方はたぶんあります。
ただ、
- 考え方を言語化する
- それを skills として AI に渡す
という流れは、再利用できる部分が多い気がしています。
もしよければ、
- 自分用に書き換える
- 新しく skills を作る
- 公開してみる
など、好きなところだけ拾ってもらえたら嬉しいです。
読んでいただきありがとうございます。
Discussion