refira
ID
Mulai sekarang

AI design workspace untuk tim produk

Agent Anda merancang, membuat prototipe, menyempurnakan, dan merilis. Visi Anda tetap utuh.

Dari ide awal hingga halaman yang terasa pas. Berikan canvas, bahasa desain yang konsisten, dan arahan yang jelas kepada coding agent Anda.

Mulai sekarangCoba workspace

Agent Anda. CLI Anda. Arahan kreatif Anda.

REFIRA / STUDI PROSES 001STRUKTUR MENGIKUTI KONTEKS
01 / Beri struktur yang jelas pada ide Anda.
00:00 / 00:10

Sekarang, coba kendalikan langsung

Simulasi workspace. Rasakan alur kerjanya secara nyata.

Ganti palet warna. Jalankan satu siklus iterasi.
Lihat bagaimana sedikit arahan mengubah hasil akhirnya.

SESUAIKAN GAYA
Refira / Proyek Terrarium
Preview interaktif
Terrarium Canvas
Homepage
terrariumKoleksi tanamanCerita kamiPanduan rawatPilih tanaman
SENTUHAN HIJAU DI RUANG ANDA

Beri ruang
untuk suasana
yang lebih hidup.

Tanaman yang dirawat dengan sepenuh hati.
Untuk setiap sudut ruang kerja dan rumah Anda.

Jelajahi koleksi
Dirawat dengan teliti.
Siap menghiasi sudut ruang Anda.
homepage.htmlDibuat oleh agent Anda · Dirender di Refira
Terminal$ refira push homepage Halaman terkirim ke canvas
Contoh proyek nyata, langsung dari terminal agent ke canvas Anda. Silakan coba fitur preview di atas

Selaras dengan alur kerja Anda saat ini.
Gunakan coding agent apa pun yang dapat menjalankan CLI.

Claude Code Codex Cursor+ coding agent berbasis CLI Anda

Ajak rekan tim meninjau halaman.

Preview tautan berbagi · Proyek Terrarium
Di dalam workspace Anda, bagikan halaman yang ingin ditinjau anggota tim. Di sini, Anda dapat menyalin tautan ke simulasi interaktif ini.

Tautan ini mengarah ke simulasi di halaman utama, bukan proyek privat atau sesi kolaborasi langsung.

Siap untuk tahap berikutnya.

Preview hasil export · Proses export halaman sesungguhnya dijalankan dari workspace proyek Anda. Contoh ini menampilkan halaman yang siap diekspor.

homepage.htmlProyek contoh Terrarium

Export halaman Anda sendiri langsung dari Refira Canvas.

Mulai sekarang

01 / Siklus umpan balik yang lebih singkat

Dari “tolong buatkan ini”
ke “nah, ini baru pas.”

Biarkan coding agent tetap bekerja di alurnya sementara catatan revisi Anda menempel tepat di konteks visualnya. Refira menjembatani keduanya.

01 — GENERATE & PREVIEW

Satu perintah CLI. Langsung tampil di canvas.

Agent Anda membuat halaman lalu mengirimnya lewat CLI. Lihat hasil nyatanya langsung di dalam proyek Anda.

# kirim halaman ke ruang kerja visual Anda
$ refira push homepage
✓ Terkirim ke Refira Canvas
02 — ANOTASI & ITERASI

Tunjuk langsung bagian yang ingin diubah.

Sematkan catatan tepat pada elemen halaman yang dimaksud. Agent Anda langsung mendapatkan konteks perbaikan yang siap dieksekusi.

AndaKurangi sedikit jarak padding di bagian ini.
section.hero
03 — BAGIKAN & EXPORT

Siap dibawa keluar dari canvas.

Bagikan tautan preview halaman dari satu proyek untuk ditinjau rekan tim, lalu export menjadi HTML mandiri saat siap diimplementasikan.

Proyek Anda
Bagikan
Export

02 / Bekali agent dengan sistem

Pilih referensi layout proyek.
Pandu setiap halaman berikutnya.

Refira menyimpan referensi layout aktif di tingkat proyek. Agent Anda menggunakannya saat merancang halaman baru, lengkap dengan component yang dapat dipakai ulang dari katalog proyek.

REFERENSI LAYOUT AKTIF01 / Struktur

Landing Shell

Tentukan kerangka dasar halaman. Agent Anda memahami pembagian area serta component mana yang harus ditempatkan di dalamnya.

KATALOG COMPONENT02 / Pakai Ulang

Komponen yang sama.
Selalu konsisten.

Agent cukup memanggil nama component proyek. Refira otomatis merendernya menjadi HTML utuh saat halaman tiba di canvas.

<x-landing-header active="home" /><x-landing-footer />
Satu layout aktif per proyekAcuan struktur untuk setiap halaman baru

Agent Anda tetap menulis kode tiap halaman. Refira menyediakan referensi layout aktif proyek saat halaman baru dibuat, ditambah katalog component agar antarmuka tetap seragam.

03 / Kreativitas yang tetap selaras

Halaman baru.
Bahasa desain yang tetap sama.

Agent Anda tidak perlu menebak-nebak standar visual produk Anda. Berikan fondasi design context bersama sebelum baris kode pertama ditulis.

Token warna dan tipografi tersimpan di satu tempat
Referensi layout untuk menjaga struktur halaman
Design context yang dipakai konsisten di seluruh halaman
Design context proyekSiap untuk agent

PALET WARNA

Primary
Secondary
Accent
Surface
Neutral

TIPOGRAFI

Aa Bb CcInter
Regular · Medium · Semibold

REFERENSI LAYOUT / coba pilih referensi

Referensi Landing page dipilih pada simulasi ini.

Terrarium / Halaman proyek2 halaman
Homepage
Pricing

04 / Ajak tim meninjau langsung

Karya yang matang layak dilihat
lebih dari sekadar tangkapan layar.

Satukan seluruh halaman dalam satu proyek. Berikan tautan preview yang bisa dijelajahi langsung oleh tim, lalu export hasilnya ketika siap dilanjutkan.

Satu proyek, banyak halamanExport halaman kapan saja

Beberapa hal penting

Sebelum Anda mulai membangun.

Apakah Refira menggantikan AI coding agent saya?

Tidak. Agent Anda tetap menulis dan memperbarui kode. Refira menyediakan ruang kerja visual di sekitarnya: canvas untuk memeriksa hasil, anotasi presisi untuk ditindaklanjuti, serta design context proyek untuk memandu iterasi berikutnya.

Bagaimana cara agent mengirim halaman ke Refira?

Hubungkan Refira CLI ke proyek Anda. Agent dapat membaca design context, menghasilkan halaman baru, lalu menjalankan perintah push untuk menampilkannya langsung di canvas.

Bagaimana cara menjaga konsistensi di banyak halaman?

Atur design context proyek dan gunakan referensi layout sebagai titik awal. Agent Anda akan membaca token warna, tipografi, dan panduan struktur yang sama setiap kali membangun atau memperbarui halaman.

Bisakah saya membagikan dan mengekspor halaman saya?

Bisa. Refira mendukung berbagi tautan pratinjau halaman di dalam proyek dan mengekspor halaman mandiri untuk tahap berikutnya. Contoh di atas adalah simulasi interaktif; gunakan proyek Anda sendiri untuk berbagi dan mengekspor hasil kerja nyata.

Ide Anda berikutnya dimulai di sini

Kurangi revisi bolak-balik.
Lebih cepat capai hasil yang pas.

Hubungkan coding agent Anda. Berikan canvas untuk setiap ide.
Buat iterasi berikutnya jauh lebih terarah.

Mulai sekarang