デザイナーのためのCursor

Onlookを使用すると、Reactのウェブサイトやウェブアプリを視覚的に編集し、その変更をリアルタイムでコードに反映できます

Download the Desktop App

For Apple Silicon & Windows

ダウンロードリンクをメールで送ってください

For Apple Silicon & Windows

Now in Alpha Release

デザイン感覚でコードを書く

Onlookは、信頼性の高いコードを必要な場所に的確に配置します。

Opacity

85%

Fill

#00DEBA

Opacity

85%

Fill

#00DEBA

Chat

Styles

map_card.tsx

button.tsx

これをクリックすると、マップカードが表示され、アクティブな背景が現れるようにしてください。

ボタンをクリックすると表示されるようにマップカードを更新し、アクティブなときに適切なスタイルになるように背景プロパティを更新しました。

Ask follow up questions or provide more context...

「AIを活用して、あなたのウェブサイトを構築しよう」

OnlookのAIを使ってアイデアを練り、デザインし、実験しましょう。美しさだけにとどまらず、フロントエンドをさらにインタラクティブにしましょう。

「細部までこだわろう」

レイアウトの調整や色の変更、テキスト修正などが自由に行えます。面倒な設定は必要ありません。

Auto Layout

Auto Layout

Auto Layout

Typography

Typography

Typography

Borders

Borders

Borders

Padding

Padding

Padding

Margins

Margins

Margins

More...

More...

More...

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風のインターフェースで最大限に活用しよう

Custom Variables

Custom Variables

Custom Variables

Insert Components

Insert Components

Insert Components

Create new Components

Create new Components

Create new Components

「TailwindでスタイルされたReactサイトなら、どんなものでも取り込み可能」

自分のプロジェクトをOnlookに連携するか、そこから新しいReactサイトをスタートさせましょう。

Import existing project

Work on your React UI

Import existing project

Work on your React UI

Import existing project

Work on your React UI

New Onlook Project

Start a React App

コードは常にあなたのものです

妥協のない、優れたインターフェースを構築

バージョン管理は自由に行う

いつでもロールバック可能 — コードが本番環境に送られることはありません。

あなたの環境は
あなたのセキュリティ

要件に合わせて環境を構成 — Onlookはあなたのセットアップに対応します。

ローカルで自信をもってコーディング

コードは常にあなたのデバイスにのみ保存され、外部に送信されることはありません。

既存のビルドプロセスに対応

新しいコンポーネントの追加は不要。マイグレーションも不要。

いつでもOnlookを監査可能

GitHub リポジトリを訪れて、Onlookの構築プロセスをぜひご確認ください。

オープンソース & アクティブにサポート

Join our community of
Designers and Engineers

Supported by contributors, advocates, and enthusiasts

Onlook
コミュニティに参加しよう

デザイナー、エンジニア、コントリビューターに支えられています

Onlookに対する声は大絶賛!

世界中の数千人のデベロッパーやデザイナーとともに、デザインの未来にワクワクしよう!

よくある質問

Onlookとは何ですか?
習得は簡単ですか?
Onlookを使ってデザインできるのはどんなものですか?
なぜ他のソフトウェアでデザインできるのに、Onlookを使うのか?
OnlookはReactアプリとどのように連携しますか?
Onlookの使い方をどう始めればいいですか?
Onlookを実行するために必要なものは何ですか?
Onlookはどのくらいの価格ですか?
Onlookで生成したコードの所有権は誰にあるのか?
Onlookとは何ですか?
習得は簡単ですか?
Onlookを使ってデザインできるのはどんなものですか?
なぜ他のソフトウェアでデザインできるのに、Onlookを使うのか?
OnlookはReactアプリとどのように連携しますか?
Onlookの使い方をどう始めればいいですか?
Onlookを実行するために必要なものは何ですか?
Onlookはどのくらいの価格ですか?
Onlookで生成したコードの所有権は誰にあるのか?
Onlookとは何ですか?
習得は簡単ですか?
Onlookを使ってデザインできるのはどんなものですか?
なぜ他のソフトウェアでデザインできるのに、Onlookを使うのか?
OnlookはReactアプリとどのように連携しますか?
Onlookの使い方をどう始めればいいですか?
Onlookを実行するために必要なものは何ですか?
Onlookはどのくらいの価格ですか?
Onlookで生成したコードの所有権は誰にあるのか?

さあ、変化の時間です。いや、2つでも3つでもいけるはず!

新しいアイデアやスタイル、コピー、レイアウトなどをどんどん試しましょう。

Download the Desktop App

For Apple Silicon & Windows

ダウンロードリンクをメールで送ってください

For Apple Silicon & Windows

http://localhost:3000/

Desktop

Layers

Pages

Header

Navigation

Main

Container

Your Dashboard

Last updated

Tuesday

Settings menu

Body

Recordings

Call 1

Call 2

Call 3

...

Notes

Footer

Assets

Variables

Color Styles

purple-400

purple-500

purple-600

purple-700

purple-800

blue-100

blue-200

blue-300

blue-400

blue-500

Open in VS Code

4 changes

Design

Interact

Share

Publish Code

Styles

Properties