Pencil.dev ✕ Claude Codeで実用レベルの開発効率とコード品質は両立できるか｜第1弾：Pencil.devで作ったデザインは実務で通用するか？【株式会社ライトコード】

Pencil.dev ✕ Claude Codeで実用レベルの開発効率とコード品質は両立できるか｜第1弾：Pencil.devで作ったデザインは実務で通用するか？

みなさんは、Pencil.devというAIデザインツールをご存知ですか？
エンジニア界隈では話題になっているものの、デザイナーやPMの視点から検証した記事はまだほとんどありません。
今回は、デザイナーとPMの3名でPencil.dev ✕ Claude Codeを検証していきます。

この記事は、第1弾をお届けします。
早く本題を知りたいという方は「第1弾：Pencil.devで作ったデザインは実務で通用するか？」からお読みください。

はじめに

Pencil.dev ✕ Claude Codeで確かめたいこと

もし、デザインカンプの作成からコードの生成までをAIがやってくれるとしたら
— それは本当に開発で使えるクオリティなのでしょうか？

この連載では、Pencil.devとClaude Codeを掛け合わせ、その実用性を検証していきます。

• AIデザインツール「Pencil.dev」で作ったデザインは、実務で通用するか？
• そのデザインから「Claude Code」で生成したコードは、開発にそのままのせられるか？
• デザインと実装の間にある溝を、AIによってどれだけ埋められるか？

Pencil.dev とは？

• AIでデザインカンプを丸ごと生成できるデザインツール
• Claude Code等のAIツールと直接連携できる（MCP対応）
• UIはFigmaに近く、手動での調整も可能
• デザインデータはJSONベース（.pen形式）で、Gitで差分管理できる

→ 公式サイト: https://pencil.dev

Claude Code とは？

• Anthropicが提供する、ターミナルで動くAIコーディングエージェント
• コードの生成からファイル操作、Git操作までを会話形式で実行できる
• MCP対応により、Pencil.devなどの外部ツールと直接連携できる

→ 公式サイト: https://claude.ai/code

なぜ今、検証するのか — AI時代の開発と向き合う

AIツールが日進月歩で進化し、開発の在り方そのものが変わりつつあります。
弊社は、デザイン専業でも開発専業でもなく、プロダクトをトータルで作り上げる会社です。
デザインから実装までのスピードを上げることは、そのまま競争力に直結します。

加えて、AIツールの普及により、デザイナーの役割も大きく変わりつつあります。
「デザインして終わり」ではなく、動くプロダクトまでを視野に入れた
— いわゆる"バイブデザイン"的なスキルが求められる過渡期にあります。

PMとしても、デザイナーやエンジニアがどこに注力し、どこをAIに任せるかを見極めることが、これからのチーム設計に欠かせないと感じています。

そこで、Pencil.dev ✕ Claude Codeがその武器になるのかを、実務に近い形で検証することに意義があると考えました。

検証の進め方

開発効率とコード品質を検証するために、実務に沿って「デザインカンプ生成 → コード生成」のフローを実際に行い、事前に選定した評価軸に基づいて評価していきます。

評価軸

デザインと開発面から重要な項目を策定し、以下の軸で5段階評価を行います。

…

記事の続きは下のURLをクリック！

https://rightcode.co.jp/blogs/54728

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「モバイルエンジニア」「データエンジニア」「ゲームエンジニア」「デザイナー」「WEBディレクター」「営業」などを積極採用中です！

ライトコードは技術力に定評のある受託開発をメインにしているIT企業です。

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】をのぞいてみてください。

Wantedly：https://www.wantedly.com/companies/rightcode