この記事はなに？
メンバーからPencilがすごそう！って聞いたので、試してみました。
まだ、初歩的な部分をやっただけですが、可能性を感じます！
今日は、とりあえずこうすると動く！っていう備忘録的メモです！
大まかな流れ！
-
インストール（書きません！）
-
Pencilを使ってみる
-
Claude CodeからMCP経由でPencilを使いNext.jsでモックを作る！
1. インストール（書きません！）
このあたりの記事がすごく参考になりました。ありがとうございます！
新しいデザインツール Pencil を試してみた
公式サイトもチェック！
https://www.pencil.dev/
2. Pencilを使ってみる
まず、どんなデザインにするのか？を選びます！！
↓Start Hereってあるので素直に押す！
Japanese Swiss Web Dashboardっていうのを選んでみた
左下の小窓？ペイン？を立ち上げここで、つらつらと指示を出します。
指示文
以下の要件で、手始めに、ログイン画面と最初のInvestorを登録する画面を作って。画面左側のサイドバーで他の画面への遷移ができるといいな！
https://raw.githubusercontent.com/tis-abe-akira/ddd-ai/refs/heads/main/.clinerules/.clinerules-requirements.md
コンポーネントができた！（Pencil上に）
右上の<> Export Code & MCP を押すと次の手順がガイドされる！（これ便利！）
3. Claude CodeからMCP経由でPencilを使いNext.jsでモックを作る！
ここまでくればいつもの作業です！！
なお、Next.jsがセットアップ済みの状態でやった方がうまくいきます。（ゼロベースでやってもできなくはないですが、環境構築はそんなにLLMが得意ではないので作りおいた方が無難です）
この段階で、MCPがセットアップ済みです。
Pencilがリコメンドしているプロンプトをそのままコピペしました。（もちろん必要なら手直ししてください）
Generate React/Tailwind/NextJS code from the selected frame``Update CSS based on the
variables in the design``Create a React component based on the selected frame
こっからはギャルとのペアプロです！！
かなり精度よく画面（モック）ができました！
雑感
いまは無償で使えますが、しばらく経つと有償になるようです。
かなり簡単に使えますし、Pencilの定義が.pen（実態はJSON）に落ちてくるので、扱いやすい気がします。
プロトタイピングのフロントエンド作成の選択肢が一個増えたと感じます！