AIがUIデザインを自動生成！マリオとルイージの冒険記
むかしむかし、あるところに、マリオとルイージという、ウェブ開発の腕に覚えがある兄弟がいました。ある日、二人は困った状況に直面しました。
「マリオ兄さん！まただ、またUIの修正だ！デザイナーさんからの要望が細かすぎて、CSSをいじるのに1日かかっちゃうよ…」とルイージが泣き言を言いました。
「よしよし、ルイージ。そんな君に、ピーチ姫…いや、未来のAIの力が詰まった、魔法のアイテム『onlook』を紹介しよう！」とマリオが言いました。
onlook は、デザイナーとエンジニアの間のコミュニケーションを円滑にするための秘密道具です。
AIでUIを編集
通常、UIを修正するにはコードを直接書き換える必要がありますが、onlook を使えば、AIの力で見た目を直接編集できます。まるでPhotoshopを使うように、テキストやスタイルを簡単に変更できるんです。
コード自動生成
AIがUIの変更を読み取り、Reactのコードを自動的に生成してくれます。手動で複雑なCSSを書いたり、コンポーネントのpropsを変更したりする手間が省けます。
リアルタイムプレビュー
変更内容が即座に画面に反映されます。これで、いちいちブラウザをリロードするという、クッパ城の牢屋のような面倒な作業から解放されます。
「これで、もうデザイナーさんからのUI修正依頼で悩む必要はないね！クッパを倒すより簡単さ！」とマリオは胸を張りました。
ルイージは「それ、どうやって使うの？」と尋ねました。マリオはニヤリと笑って答えました。
魔法のアイテムを手に入れる (インストール)
まずは、onlook をプロジェクトに導入します。まるでキノコを取るように、コマンドを打ち込みます。
# npmを使っている場合
npm install @onlook/react
# yarnを使っている場合
yarn add @onlook/react
魔法のアイテムをセットする (セットアップ)
次に、Reactアプリのトップレベル（通常は App.js や index.js）で、onlook を設定します。これは、マリオがスターを取って無敵になるようなものです。
// App.js の例
import { OnlookProvider } from '@onlook/react';
import { BrowserRouter } from 'react-router-dom';
function App() {
return (
// <BrowserRouter>は例です。あなたのプロジェクトに合わせてください
<BrowserRouter>
{/* 魔法の力を使えるように、OnlookProviderで全体を囲みます */}
<OnlookProvider>
<div>
{/* ここにあなたのコンポーネントを置きます */}
<h1>ようこそ！マリオの世界へ！</h1>
<p>onlookで見た目を自由にカスタマイズしよう！</p>
</div>
</OnlookProvider>
</BrowserRouter>
);
}
export default App;
クッパ城を攻略する (起動)
最後に、開発サーバーを起動します。
npm run dev
# もしくは
yarn dev
これで準備完了です！ブラウザであなたのアプリを開き、onlook のUIで見た目を直接編集してみてください。変更内容はリアルタイムで反映され、AIがコードを生成してくれます。
「なるほど！これでUI修正は怖くないね！でも、AIが作ったコードって、どうやって見るの？」とルイージ。
「もちろん、ちゃんと確認できるさ！」とマリオ。onlook は、編集した内容をJSON形式でエクスポートする機能も持っています。このJSONを使って、AIが生成したコードをアプリケーションに取り込むことができます。
// AIが生成したJSONデータ（一例）
const data = {
"component": "h1",
"props": {
"style": {
"color": "red",
"fontSize": "32px"
}
},
"children": "AIが編集したタイトルです！"
};
// このデータをコンポーネントに適用する
function MyTitleComponent({ data }) {
const { component: Component, props, children } = data;
return <Component {...props}>{children}</Component>;
}
この例では、AIが生成したJSONデータを基に、動的にコンポーネントをレンダリングしています。この仕組みを使えば、AIと人間が協力して、最高のUIを作り上げられるのです。
onlook-dev/onlook は、デザイナーの意図を直接UIに反映させ、それをReactコードとして自動生成する、まさにデザイナーとエンジニアの架け橋となるツールです。
生産性アップ
手動でのCSSやスタイリング作業が激減し、開発スピードが大幅に向上します。
コミュニケーション改善
「このボタンの色をもう少し明るくしてほしい」といった要望が、直接画面上で解決できます。
学習ツール
AIが生成したコードを参考にすることで、新しいReactやCSSの書き方を学べます。
「これで、もうUIの修正で疲れることはないね！新しい冒険の準備をしよう！」とマリオが笑顔で言いました。ルイージも嬉しそうに頷きました。
