はじめに
「デザイン直したら、勝手にアプリができてたら最高じゃん…」って思ったこと、ありませんか？
Pencil.dev（ローカルデザインツール） + Claude Code でそれがほぼ現実になりました。
Pencil.dev でデザインやメモを記載 → 保存した瞬間、AIがアプリ本体を実装し、コンポーネント仕様書・画面遷移図・DB設計まで自動生成。
これ、ただのプロトタイピング加速じゃなくて、デザイナーとエンジニアの新時代の協業が本気で始まる予感がすごいんです。
「Pencil縛り」でどこまでいけるか？ 挑戦中なんですが、私が個人開発しているアプリ「推しスコープ」をデザイン駆動で作ってみました。
なぜ今これを試したのか？
- デザイナーが「ここ直したい」と思った瞬間から実装までが遠すぎる問題
- AIに丸投げすると品質バラバラになる問題
- でもデザインを起点にAIが全部やってくれる仕組みができたら、生産性が爆上がりするはず
「アイデアを素早く形にしたい」ケースで、Pencil.dev はローカルファイルベースで変更検知が速く。Claude Codeのリアルタイム連携が噛み合って、夢のような体験になりました。
実験の全体像
- Pencilでデザインの修正・保存
- ファイルの変更が発生したら Claude Code に対してプロンプトを実行
- AIが.penの変更内容から自動生成：アプリコード + 各種ドキュメント
複数画面のプロトタイプなら、1時間でかなり形になるレベル。
実際に生成されたもの一部抜粋
- デザイン連動で動作するアプリ構築
-
各画面の仕様書(抜粋)（インタラクション・タップの動きまで記載）
-
画面遷移図
-
API一覧
-
-
DB設計
-
-
共通コンポーネント一覧
デザインファイル(.pen)しか変更しておらず、全て自動です！
- ※ツイートでは動画付きで紹介しているのでよかったらもこちらも確認してみてください
デザイナーとエンジニアの新時代協業の予感
品質はまだ完璧じゃない（エッジケースのバグあり）けど、「デザインがプロダクトの中心になる」 実感はすごかった。
- デザイナーは「見た目＋ビジョン定義」のボスになれる
- エンジニアはAIが骨組み作ってくれるからアーキテクチャ・セキュリティ・パフォーマンスに集中
- AIが橋渡し役になって、お互いの強みを活かした密なチームワークが可能に
- 結果：アイデア検証スピード10倍以上、楽しく作れる
まとめ：
このデザイン駆動の流れでは、爆速で80%レベルの完成度を目指せますが、連動をOFFにするタイミングが大事です。最後は細部の微調整がメインになるので、そこからは人間の手で丁寧に仕上げていく形になります。でも、そこまでは本当に爆速でいける。そんな動きが今、現実的に実現できそうです。
| 項目 | 内容 |
|---|---|
| 最大の魅力 | デザイン修正 → 即アプリ＋ドキュメント生成 |
| 向いている人 | デザイナー、プロトタイピングを爆速で回したい人、AI駆動開発に興味ある人 |
| 注意点 | 生成コードの品質レビューは必須（本番前は人間チェック） |
| 今後の検証予定 | Pencilだけでリリースレベルアプリ作れるか / 複雑インタラクション耐久テスト / Figma連携など |
| おすすめ度 | ★★★★★（2026年現在、かなりワクワクする） |
アプリリリースまで、Pencil縛り実験続けます！