Pen.devとClaude Codeを使ってデザイン作成、開発に流し込む

アプリやWebサービスを作る際にFigmaというデザインツールがよく使われていると思います。しかし、FigmaでAIを使おうとするとサブスクで利用しているAIエージェントのアカウントを使ってデザインを作成することが難しいという課題がありました。

自身のAIエージェントのみで実装ができれば、Figmaを契約しなくてもデザインを作成することができるので費用もおさえることができるのはと想定しました。

自身の契約しているAIエージェントを利用してデザインを作成できないか検証していたところ、Pen.devというツールを使ってデザインから開発まで、AIエージェントアカウントを利用して作成することができることがわかりました。

今回は、実際に利用しているAIエージェントを活用してデザインを作成する方法を実践してみたので、その方法を紹介します。

今回使うツール

今回は、以下のツールをつかってデザインを作成していきます。

• Pen.dev
• Claude Code Max

Pen.devというデザインツール

Pen.devは、PCにアプリケーションをインストールして利用することができるデザインツールです。AI連携にも対応するためMCPを提供しており、AIエージェントからデザインツールにアクセスして開発を進めることができます。また、Visual Studio Codeにも対応しておりVisual Studio CodeからもPen.devのファイルを開いて閲覧・編集することが可能です。

これらが終わると下記のように自動でClaude CodeがPen.devに連携されます。これらは、設定から確認することができます。

Claude CodeとPen.devを使ってデザインをAI生成する

Pen.devをインストールしアプリケーションを開くと、AIへの指示を出すためのフォームが出てきます。ここに作りたいアプリのデザインについて、指示を出すとそれに併せたデザインをAIエージェントを通して作成してくれます。

下記は実際に作成した指示文をフォームに入力して作成を依頼している画像です。これを実行することでデザインファイルが作成されて、実際にAIエージェントがデザインを作成してくれています。

指示文を入力すると実際にエージェントがデザインをリアルタイムで作成してくれます。下記の画像のように実際に動いてUIを作ってくれます。

何度か調整し、完成したら保存して実際にアプリの作成に進みましょう。

実際に実装をする

デザインが出来上がったら、今度はClaude Codeを使ってアプリを実装していきます。ターミナルから先ほど作った.penファイルをClaude Codeに読み込ませて実装させます。今回はウェブアプリで実装を進めてもらいます。

すると、実際にAIエージェントを通して次のようなウェブアプリを作ることができます。動作も問題ないので、検証レベルのアプリとしては優秀のように感じました。指示文など、ある程度丁寧に作ってあげるとより期待通りのものが作れるかと思います。

さいごに

今回、Pen.devのMCPをうまく活用することで、デザインから開発までスムーズに進めることができます。検証などの目的であれば、このフローでサクッと開発してみるのも良いと感じました。