デザイナーのためのCursor
Onlookを使用すると、Reactのウェブサイトやウェブアプリを視覚的に編集し、その変更をリアルタイムでコードに反映できます
Now in Alpha Release
デザイン感覚でコードを書く
Onlookは、信頼性の高いコードを必要な場所に的確に配置します。
Chat
Styles
map_card.tsx
button.tsx
これをクリックすると、マップカードが表示され、アクティブな背景が現れるようにしてください。
ボタンをクリックすると表示されるようにマップカードを更新し、アクティブなときに適切なスタイルになるように背景プロパティを更新しました。
Ask follow up questions or provide more context...
「AIを活用して、あなたのウェブサイトを構築しよう」
OnlookのAIを使ってアイデアを練り、デザインし、実験しましょう。美しさだけにとどまらず、フロントエンドをさらにインタラクティブにしましょう。
「細部までこだわろう」
レイアウトの調整や色の変更、テキスト修正などが自由に行えます。面倒な設定は必要ありません。
Layers
Side menu
Primary navigation
Opener
H2
Welcome to your Dashboard
Overview
Client Logo
Actions
Share
New project
Projects section
Controls
Filter
Sort
Project • 12 instances
Variables
Assets
Color Styles
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
teal-100
teal-200
teal-300
teal-400
Teal / 500
Teal / 600
Teal / 700
Teal / 800
Variables
Assets
Text Styles
title1
36/Auto
title2
24/Auto
title3
20/Auto
largePlus
18/140
large
18/140
regularPlus
15/140
regular
15/140
smallPlus
13/140
small
33/140
microPlus
11/Auto
micro
11/Auto
Coming Soon
「拡張し続けるデザイン」
コードで作成済みのデザインシステムを、Figma風のインターフェースで最大限に活用しよう
「TailwindでスタイルされたReactサイトなら、どんなものでも取り込み可能」
自分のプロジェクトをOnlookに連携するか、そこから新しいReactサイトをスタートさせましょう。
New Onlook Project
Start a React App
コードは常にあなたのものです
妥協のない、優れたインターフェースを構築
バージョン管理は自由に行う
いつでもロールバック可能 — コードが本番環境に送られることはありません。
あなたの環境は
あなたのセキュリティ
要件に合わせて環境を構成 — Onlookはあなたのセットアップに対応します。
ローカルで自信をもってコーディング
コードは常にあなたのデバイスにのみ保存され、外部に送信されることはありません。
既存のビルドプロセスに対応
新しいコンポーネントの追加は不要。マイグレーションも不要。
いつでもOnlookを監査可能
GitHub リポジトリを訪れて、Onlookの構築プロセスをぜひご確認ください。
オープンソース & アクティブにサポート









Onlookに対する声は大絶賛!
世界中の数千人のデベロッパーやデザイナーとともに、デザインの未来にワクワクしよう!
よくある質問
さあ、変化の時間です。いや、2つでも3つでもいけるはず!
新しいアイデアやスタイル、コピー、レイアウトなどをどんどん試しましょう。
