MarkupGenのAI:コード生成から品質スコアリングまで

MarkupGenにおけるAIは単一の機能ではありません。デザインからコードを構築する、その出力の品質を判定する、結果がデザインと一致しない場合に改善方法を提案する——ワークフローの3つの段階すべてにAIが関わっています。この記事では、各レイヤーを順に見ていきながら、それらがなぜ開発者の判断を置き換えるのではなく、支えるように作られているのかを説明します。

デザインの構造からコードを構築する

最初の段階では、AIはスクリーンショットからデザインを「描き直す」わけではありません。Figmaプラグインが送信した実際の構造——Auto Layout、間隔、レイヤー階層、リサイズ制約——を読み取ります。そこから、ピクセル単位で当て推量するのではなく、その構造に直接沿ったHTML/CSSを生成します。

• Auto Layoutプロパティ(方向、gap、padding、配置)は、対応するCSS Flexboxルールへとマッピングされます。
• レイアウトのリサイズ制約は、単一の固定幅ページではなく、レスポンシブなブレイクポイントへと変換されます。
• 出力は、深く入れ子になったラベルのない<div>よりも、意味のあるHTML要素を優先します。

画像から推測するのではなく構造から構築することで、見た目だけは「それらしい」のにCSSの中身がまったく別物になるのではなく、元のデザインの階層と間隔がそのまま保たれた結果が得られます。

用途に合わせて最適なAIモデルを選ぶ

MarkupGenでは、選択が意味を持つ場面——たとえば評価後にコードを再生成する場合など——であれば、AIモデルを選ぶことができます。モデルは2段階に分かれています。小〜中規模のデザインに適した、高速でコスト効率の良いモデルと、より複雑なコンポーネントを含む大規模なデザインに適した高品質モデルです。モデルを手動で選択しないアカウントについては、現在のプランに基づいてシステムが自動的に適切なモデルを選択するため、設定なしで速度とコストのバランスが取れます。

出力品質の自動スコアリング

コードが生成されると、AIはライブプレビューのスクリーンショットを元のデザインと比較し、一致度を1〜10のスケールでスコアリングします。これは単なる抽象的な数値ではありません。何が一致していて何がずれているかの詳細な評価が添えられるため、そのエクスポートが本番投入できる状態か、まだ手を入れる必要があるかをすぐに判断できます。スコアがほぼ完璧な水準に達すると、システムはAIが修正すべき意味のある点はもう残っていないと判断し、不要な再生成の提案を表示しなくなります。

フィードバックループ:分析と再生成

エクスポートの出来が基準に届かない場合でも、MarkupGenは数値だけを渡して終わりにはしません。評価画面では、元のデザインとライブプレビューを並べて表示し、細部を確認できるズーム機能も備えています。そこから具体的な改善提案が生成され、その提案を編集したうえで「この変更で再生成」を実行できます。こうして、AIはランダムに一から作り直すのではなく、あなたが実際に望むフィードバックに沿ってコードを再構築します。

なぜこれが重要なのか

この3つのレイヤーはすべて、同じゴールを目指しています。デザインからコードへの機械的な変換作業を取り除き、開発者の労力を本当に人間の判断が必要な部分——インタラクションの細部、エッジケース、そしてより大きなコードベースへの統合——に向けられるようにすることです。この3つのレイヤーすべてが自分のデザインでどう動くか試してみたい場合は、無料で試すことができます。