AIが書くコードは動く。でもデザインがダサい — Lokuma Design Agentは「見た目」をAPIで解決する

AIが書くコードは動く。でもデザインが残念。

Claude Codeに「LP作って」と頼むと、数分でHTML・CSS・JSが揃う。レスポンシブ対応も完璧。アクセシビリティのマークアップまで入っている。けれど、出来上がった画面をブラウザで開いた瞬間、言葉にしづらい落胆がやってくる。余白がどこか間延びしている。フォントサイズの比率に統一感がない。CTAボタンの位置が妙に中途半端。技術的には満点なのに、デザインとしては「とりあえず動く試作品」の域を出ない。

これはClaude Codeに限った話ではない。CursorでもCodexでも、AIが吐き出すUIには共通の弱点がある。AI生成コードはヒューマンコードの1.7倍のイシューを含むという報告もあるが、デザイン面の「残念さ」は数値化すらされていない。壊れてはいないから、バグとして検出されないのだ。

Design Agent by Lokumaは、この数値化されない問題に正面からぶつかりに行ったプロダクトだ。

「デザイナーAPI」という新しいカテゴリ

Design Agentの位置づけを理解するには、まず「何でないか」から説明したほうが早い。

Figmaのような人間が操作するデザインツールではない。v0やBolt.newのようにプロンプトからアプリを丸ごと生成するフルスタックビルダーでもない。LPや広告バナーのテンプレートを提供するサービスでもない。

Design Agentは、AIコーディングエージェントが「呼び出す」ためのデザイン推論APIだ。人間がデザインするのではなく、AIがAIにデザインを依頼する。Claude Code、OpenClaw、Codex、Cursor Composerといったコーディングエージェントの生成プロセスに割り込み、コードが吐き出される前にデザインの「設計意図」を注入する。

生のHTMLをあとからCSSで装飾するのではなく、ページの構造が決まる段階でレイアウト・タイポグラフィ・ビジュアルバランスのルールを先に確定させる。このアプローチの違いは大きい。人間のデザイナーが「まずワイヤーフレームを描いてからコーディングに入る」のと同じ順序を、API経由でAIの生成パイプラインに組み込んでいるわけだ。

5つのデザインレイヤー

Design Agentが処理するのは以下の5層だ。

デザインプランニングでは、ページの目的を解析し、コンテンツをセマンティックに構造化する。「ここはヒーローセクション、ここはソーシャルプルーフ、ここがCTA」という情報設計がコードに反映される。

レイアウトコンポジションは、セクション間の視覚的な重みと余白に意図を持たせる処理だ。AIが生成するページにありがちな「全要素が同じ優先度で並んでいる」問題を解消する。

タイポグラフィシステムで、フォントスケール・行間・書体の組み合わせをプロジェクト全体に統一。見出しと本文のサイズ比がページごとにバラバラになる、あの現象が消える。

ビジュアルリファインメントは視覚ノイズの除去。装飾過多になりがちなAI生成物を、一貫したシステムに整列させる。

そしてスタイル一貫性。複数ページにわたるプロジェクトで、ページAとページBが別サイトに見えてしまう問題に対処する。

ひとつひとつは人間のデザイナーが当たり前にやっていることだが、それをAIエージェントのパイプラインの中で自動化したところにLokumaの独自性がある。

セットアップと使い方

導入はCLIワンライナーで完結する。

curl -fsSL https://skills.lokuma.ai/install.sh | bash

agent.lokuma.aiでAPIキーを取得し、使っているコーディングエージェントに設定するだけ。Claude Codeならスキルとして組み込まれるので、ページ生成時に自動で呼び出される。Webインターフェースを開く必要はない。開発者のワークフローを壊さない設計思想は、この手のツールとして正しい判断だと思う。

v0やBolt.newとは何が違うのか

ここが一番混同されやすいポイントなので、整理しておく。

v0はVercel製のUIコンポーネントジェネレーターだ。React + Tailwind + shadcn/uiのコードをプロンプトから生成し、Next.jsプロジェクトにエクスポートする。フロントエンド特化で、バックエンド機能はない。コンポーネント単位の出力品質は高いが、ページ全体のデザイン一貫性は使う側に委ねられる。

Bolt.newはブラウザ上で動く完全な開発環境で、プロンプトからプロジェクト構造・バックエンド・DB設定・デプロイまで一気通貫で生成する。守備範囲が広い分、デザイン面に特化した推論は薄い。

Lokuma Design Agentはこれらとレイヤーが異なる。v0やBoltと競合するのではなく、Claude CodeやCursorの「中で」動くデザイン推論エンジンだ。極端に言えば、v0で生成したコンポーネントをClaude Codeで組み上げるときに、Lokumaがデザインの一貫性を担保する——そんな使い方も理論的には可能になる。

競合というより補完関係にある、というのが正確な理解だろう。

Product Hunt #1の反応

2026年3月21日のローンチで448アップボート、70コメントを獲得し、Product of the Day 1位を達成した。AIツールが乱立する2026年のProduct Huntでこの数字を叩き出すのは、一定の注目度を示している。

コメント欄にはClaude Codeと組み合わせた開発者のフィードバックが並んでおり、デザイン品質の改善に概ね好意的な反応だった。

チームの背景も安心材料だ。共同創業者のMu氏はReaddyとCreatieという2つのデザインツールで合計50万人以上のユーザーを獲得した実績を持つ。デザインツールの専門家がAIエージェント時代に合わせて設計し直したプロダクトであり、この出自は重要だ。

料金体系

Design AgentはLokumaのWebsite Builder（Free / Starter / Pro / Enterprise）とは別課金で、APIクレジットの従量制を採用している。チャージ単位は$10・$20・$50・$100、またはカスタム金額。

$10から始められるので、試すハードルは低い。ただし、タスクあたりの消費クレジット数が公式サイトに明記されていない点は気になる。LP1ページでいくらかかるのかが事前に読めないのだ。「まず$10入れて、どこまで使えるか試す」しかないのが現状で、ここは改善を期待したい。

筆者の正直な評価

期待している点。

問題設定が的確だ。AI生成コードのデザイン品質は、2026年のAI開発における最大の未解決課題のひとつだと個人的に思っている。MCPやAgent SDKが普及し「AIがAIを呼ぶ」アーキテクチャが当たり前になりつつある今、デザイン推論をAPI化するアプローチは時流に合っている。

開発者のフローを中断しない点も評価できる。Figmaを開いてデザインを作り、それをコードに変換して……というワークフローを挟まなくていい。コーディングエージェントの中で完結するから、「デザインは後回し」にならず、最初から品質が担保される。

懸念している点。

まだローンチから数週間しか経っていない。長期的なアップデート頻度や品質の安定性は未知数だ。本番プロダクトのパイプラインに組み込むなら、もう少し実績を見てからでもいい。

コスト透明性の課題は前述のとおり。開発中に「気づいたらクレジットが溶けていた」パターンは避けたい。料金シミュレーターや、プロジェクト単位のコスト見積もり機能があれば安心感が増す。

そして根本的な問いとして、「デザイン」をAPI推論でどこまで再現できるのか。レイアウトとタイポグラフィの最適化は得意でも、「このブランドらしさ」の表現には、まだ人間の判断が必要な場面が多いだろう。

誰に向いていて、誰に向いていないか

Claude CodeやCursorでガンガン開発しているが、出来上がるUIの見た目にいつもがっかりしている開発者。LPやキャンペーンページを素早く量産したいが、デザイナーをアサインする余裕がないスタートアップ。AIエージェントのパイプラインにデザイン品質を組み込みたいチーム。こうした人たちにとって、$10で試せるDesign Agentは触ってみる価値がある。

一方で、すでにデザインシステムが整備されたチームや、Figma→コードの変換フローが確立されている組織には、APIを挟む動機が薄い。

結論

「AIが書いたコードは動くけどダサい」。この問題にAPIレベルで解を出そうとしたLokuma Design Agentは、2026年のAI開発ツール市場で明確にユニークなポジションにいる。完璧とは言えないが、アプローチは正しい。デザインという「最後の人間のボトルネック」が、本当にAPIで解消できるのか。その答えは、$10のクレジットを買って自分のClaude Codeで試してみるのが一番早い。