Reactフロントエンド開発のためのAI
オープンソースでローカルファースト、AI搭載のフロントエンドエディター「Onlook」は、素晴らしいインターフェースを瞬時に作成するお手伝いをします。
Beta
AIを使ってあなたのウェブサイトを構築しよう
OnlookのAIを活用して、アイデアを構築し、デザインし、実験しましょう。美しいピクセルを超えて、フロントエンドをインタラクティブにしましょう。
Styles
Chat (beta)
map_card.tsx
button.tsx
When this is clicked, make the map card appear and have an active background
I updated the Map Card to appear when the button is clicked, and I updated the background property to be the right style when it is active.
Ask follow up questions or provide more context...
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
コードベースに既存のスタイルを活用しましょう。
オンルックのフロントエンドAIは、あなたのウェブサイト全体で使用するスタイルを活かしながら、新しい機能を構築します。リビジョンの手間が減り、結果が早く得られます。
数秒でセットアップしてプロンプトを開始
Onlookに自分のプロジェクトを持ち込むか、Onlookから新しいReactウェブサイトを始めましょう。AIを活用してゼロから新しいプロジェクトを生成したり、新しいスタイルや機能を追加したりできます。
Import existing project
Work on your React UI
New Onlook Project
Start a React App
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
AI生成物の最終的な外観を磨き上げよう
AIの出力を編集して、毎回リプロンプトすることなく、あなたの望むフロントエンドを実現しましょう。
Onlookで真実の源にデザインとコーディング
Onlookは、あなたが指示してデザインするたびにコードを書き、常に最新バージョンを使用します。
よくある質問
さあ、変化の時間です。いや、2つでも3つでもいけるはず！
新しいアイデアやスタイル、コピー、レイアウトなどをどんどん試しましょう。
