Pencil MCP：デザイン稿があっという間にコードに、フロントエンド開発効率が8倍に向上

皆さん、こんにちは。海外向け製品を作っている良逍です。もうすぐ春節なので、年末にもう一つ記事を投稿して、最近の新しい発見を皆さんと共有したいと思います。

ウェブページやアプリを作るとき、こんな風に感じたことはありませんか？

• 素敵なページを作りたいけど、自分のデザインセンスがない
• デザイナーを雇うのは高すぎるし、無料のテンプレートは合わない
• やっとデザイン稿が完成したと思ったら、コードに落とし込むのがまた一苦労

正直に言うと、以前フロントエンドのプロジェクトをやっていたとき、デザイン稿を見ながらスタイルを調整するだけで半日が終わってしまうこともありました。間隔が2px違う、色が少し違う、角丸を忘れている…など、何度も何度も繰り返して、本当にうんざりしていました。

朗報です。PencilというMCPが登場し、これらの問題はほぼ解決できます。

最近、これを使っていくつかのページを作ってみたのですが、本当に便利です。デザイン稿からコードへの変換効率が何倍にも向上しました。そして最も重要なのは、AIが生成してくれるデザイン稿のクオリティがなかなか高く、コードの再現度も非常に高いことです。

この記事では、Pencilとは何か、なぜ使う価値があるのか、そしてどのように素早く使い始めることができるのかについてお話します。

01. Pencilとは？わかりやすく説明します

簡単に言うと、Pencilはデザインとコードをつなぐことができるツールです。

以前のフローはこんな感じでした。

• Figmaでデザイン稿を作成
• デザイナーがサイズ、色、間隔を注釈
• 開発者がデザイン稿を見ながら一行ずつコードを書く
• 書き終わってデザイン稿と見比べると、再現度は70〜80%程度
• 何度も調整、コミュニケーション…

Pencilの解決策はこうです。

自然言語で要件を記述するだけで（例えば「Appleスタイルの音楽プレーヤーをデザインして」）、AIがキャンバス上に直接デザイン稿を生成し、ワンクリックで対応するコードを生成します（Next.js、Flutter、Vueなどをサポート）。

さらに驚くべきことに、デザインしながら調整することができます。例えば：

• 「紫が多すぎるので、緑を少し加えて」
• 「間隔をもう少し大きくして」
• 「このウェブサイトのスタイルを参考に」

AIがリアルタイムでデザインとコードを調整してくれるので、自分で手を動かす必要は全くありません。

02. なぜPencilを使う価値があると思うのか？

1）効率が本当に高い

従来の方法でページの設計図を作成するには、4〜6時間かかる場合があります。Pencilを使用すると、20〜40分で完了します。

そして、コードの再現度は98％以上に達し、基本的にスタイルを調整する必要はありません。

自分で試してみたところ、簡単なランディングページを作成するのに、設計からコーディングまで、すべて完了するのに約30分しかかかりませんでした。

2）デザインの品質が安定している

以前、AIにデザイン稿を生成させると、次のような問題によく遭遇しました。

• 配色が調和していない
• 間隔がバラバラ
• フォントサイズが統一されていない

Pencilの背景には、デザインシステムと美的基準があり、生成されるデザイン稿の品質は比較的安定しています。完璧ではないかもしれませんが、少なくともひどく醜くなることはありません。

3）複数の技術スタックをサポート

Next.js、Flutter、Vue、SwiftUIのいずれを使用している場合でも、Pencilは対応するコードを自動的に生成できます。

これは、私のようなマルチプラットフォーム開発者にとって本当に便利です。1つのデザイン稿で、複数のプラットフォームのコードがすべて手に入ります。

03. Pencilのインストールと使用方法

以下に、私自身のインストールと使用方法を共有します。これは現在最も簡単な方法であるはずです。

第一歩：Pencil MCPをインストールする

IDE（VS Code、Cursorなど）で「pencil」を直接検索します。

クリックしてインストールするだけです（他の場所からダウンロードしないでください。海賊版をダウンロードするのを避けるため）。

注意：IDEで直接検索するのが最も安全な方法です。

第二歩：AIに設定してもらう

インストール後、どのように設定すればよいでしょうか？

正直に言うと、最初はよくわかりませんでした。後で、最も簡単な方法は、AIに設定してもらうことだとわかりました。

AIプログラミングアシスタント（Claude CodeまたはCodex）を開き、次のように伝えます。

「このIDEに「pencil」というMCPをインストールしました。Claude Code、Codex、VS CodeがこのMCPを使用できるように設定してください。」

あとはAIが設定してくれるのを待つだけです。

第三歩：Pencilを使ってデザインを開始する

設定が完了すると、IDEの左側に鉛筆アイコンが表示されます。クリックして開くと、Pencilのキャンバスが表示されます。

そして、右側の AI ダイアログボックスで、どのようなデザインが欲しいかを伝えます。

例えば：

"Apple スタイルの音楽プレーヤーをデザインして"

"シンプルで青色を基調としたランディングページを作成して"

"このウェブサイトのスタイルを参考にして、似たものを作って"

AI がキャンバス上にデザイン案を生成します。もし満足できなければ、調整を続けるように指示できます：

"フォントが小さすぎるので、大きくして"

"間隔をもう少し広くして"

"もっと柔らかな色に変えて"

満足するまで調整を続けます。

第四段階：コード生成

デザイン案が完成したら、AI にコードを生成してもらいましょう。

直接こう言えます：

"Next.js コードを生成して"

"Flutter コードを生成して"

"Vue 3 コードを生成して"

AI はあなたのデザイン案に基づいて、対応するコードを自動的に生成します。

実際の効果：

04. いくつかの実際の使用体験

何度か使用した後、いくつかの感想を共有します：

1）ニーズを具体的に記述する

最初は "ウェブサイトを作って" と言ったところ、AI が生成したものは全く私が望むものではありませんでした。

後で、記述が具体的であるほど、効果が良いことがわかりました。

例えば：

良くない記述："ログインページを作って"

良い記述："上部にロゴがあり、中央にメールアドレスとパスワードの入力欄があり、下部にログインボタンがあり、スタイルは Apple 公式サイトを参考にした、シンプルなログインページを作って"

2）参考画像をアップロードできる

もし、あるウェブサイトのデザインが良いと思ったら、スクリーンショットを AI にアップロードして、参考にさせることができます。

このようにして生成されたデザイン案は、あなたの期待により近づきます。

3）一度で完璧に仕上げるよりも、反復が重要

一度で完璧なデザインを生成しようと思わないでください。それは現実的ではありません。

正しい方法は、まず大まかなものを生成し、それを少しずつ調整していくことです。

毎回、"間隔をもう少し広くして" "色をもう少し柔和にして" など、1 つか 2 つの箇所だけを調整すると、効率が最も高くなります。

4）コードの品質は悪くない

何度か試したところ、生成されたコードの品質はかなり高いです：

コード構造が明確

スタイルの再現度が高い（98％以上）

レスポンシブレイアウトも良くできている

基本的にそのまま少し修正すれば使用できます。

05. 注意すべきいくつかの点

Pencil は非常に便利ですが、注意すべき点もいくつかあります：

1）美的感覚は自分自身で磨く必要がある

AI はデザイン案を生成できますが、それが良いかどうかは自分で判断する必要があります。

そのため、普段から良いデザインをたくさん見て、美的感覚を高めることで、Pencil を使用する際に、より良い指示を与えることができます。

デザインの参考になる場所をいくつか紹介します：

Dribbble

Mobbin（モバイル UI を専門に収集）

様々な優れたウェブサイトのスクリーンショット

2）複雑なインタラクションは自分で記述する必要がある

Pencil は静的なページや通常のインタラクションを作成するのに適していますが、複雑なアニメーションやジェスチャーなどが含まれる場合は、自分でコードを記述する必要があります。

ただし、ほとんどのシナリオでは、Pencil で十分です。

3）適切な AI モデルを選択することが重要

いくつかのモデルを試したところ、Claude Opus 4.5 の視覚的な表現が最も優れていることがわかりました。

他のモデルを使用すると、生成されるデザイン案の品質が低下する可能性があります。

06. 効率比較データ

最後に、私が実際にテストしたデータセットを共有します：

私にとって、最大の価値は、"どのように実現するか" から "どのような機能を作るか" に集中できることです。

07. まとめ

Pencil は本質的にデザインと開発をつなぎ、自然言語でプロセス全体を駆動できるようにします。

もしあなたがフロントエンド開発を行っていたり、自分のプロダクトを作っていたりするなら、Pencil を試してみることを強くお勧めします：コード品質が安定: 再現度98%+、基本的にスタイルの調整は不要

多岐にわたる技術スタックをサポート: Next.js、Flutter、Vueなどが利用可能

自然言語駆動: 人間の言葉で要件を記述すると、AIが自動生成

最後に、もしあなたが独立開発やAIプログラミングに取り組んでいるなら、ぜひコメントで教えてください:

• 普段どのように設計を行っていますか？
• Pencilを使ったことはありますか？効果はどうでしたか？

すべてのコメントを丁寧に読ませていただきます。それでは、次回お会いしましょう。