Pengembangan web butuh iterasi cepat dan loop umpan balik yang ketat antara Cursor dan tool eksternal seperti Figma atau browser. Di Cursor, kami menemukan alur kerja yang mempersempit loop ini. Perumusan tugas yang jelas, penggunaan ulang komponen, dan pemanfaatan design system membantu menjaga semuanya tetap cepat dan konsisten. Panduan ini membahas cara menyiapkan Cursor untuk mendukung pengembangan web dan memperketat loop umpan balik.

​
Mulai mengorkestrasi di Cursor

Chat cocok buat mem-bootstrapping perubahan. Setelah bagian-bagian utama sudah siap, beralih ke Inline Edit dan Tab bakal bantu kamu tetap dalam flow. Setelah menyiapkan Cursor, kamu bisa mengorkestrasi alur kerja lintas berbagai tool. Di bawah ini contoh yang menunjukkan apa aja yang bisa dilakukan: game ular yang dibuat dengan menggabungkan Linear, Figma, dan tool browser. Meski proyek dunia nyata biasanya lebih kompleks, contoh ini menampilkan potensi alur kerja terintegrasi ini.

​
Sambungkan ke alat manajemen proyek lo

Lo bisa mengintegrasikan Cursor ke software manajemen proyek yang udah lo pakai dengan berbagai tooling. Di panduan ini, kita bakal bahas integrasi Linear dengan server MCP mereka.

​
Instalasi

Atau tambahkan server MCP Linear secara manual ke mcp.json: 
{
  "mcpServers": {
    "Linear": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.linear.app/sse"
      ]
    }
  }
}
Lalu:
  1. PastikanLinear diaktifkan dari pengaturan MCP
  2. Browser bakal kebuka dan lo akan diminta untuk otorisasi dengan Linear
    Karena kondisi MCP saat ini, proses setup bisa butuh beberapa kali percobaan. Kalau integrasinya nggak jalan, coba “Reload” server dari pengaturan Cursor.

​
Pakai Linear di Cursor

Server MCP Linear menyediakan berbagai tools yang bisa dipakai Cursor buat baca dan nge-manage issue. Buka pengaturan MCP dan cari server Linear buat lihat daftar semua tools. Buat verifikasi, coba prompt ini di Chat: 
list all issues related to this project
linear.png
Harusnya bakal ngasih daftar issue kalau integrasinya udah disetup dengan benar.

​
Impor desain Figma kamu

Desain dan mockup adalah bagian inti dari pengembangan web. Dengan server MCP resmi untuk Figma, kamu bisa langsung mengakses dan bekerja dengan file desain di Cursor. Untuk mulai, ikuti panduan penyiapan di Figma Dev Mode MCP Server.

​
Instalasi

Kamu bisa klik tombol di bawah untuk menginstal server MCP. Atau tambahkan secara manual ke mcp.json kamu: 
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

​
Penggunaan

Server ini menyediakan beberapa tool yang bisa kamu pakai di prompt. Misalnya, coba minta desain dari seleksi yang sedang dipilih di Figma. Baca selengkapnya di dokumentasi.
figma.png

​
Jaga scaffolding kode tetap konsisten

Mungkin lo sudah punya kode yang ada, design system, atau konvensi yang udah mapan dan pengin dipakai ulang. Waktu kerja bareng model, bakal membantu banget buat ngerefer pola yang sudah ada di codebase lo, kayak dropdown menu atau komponen umum lainnya. Kami sendiri kerja di codebase web yang besar, dan kami nemuin kalau kode deklaratif bekerja sangat baik, khususnya buat React dan JSX. Kalau lo punya design system, lo bisa bantu agent nemuin itu dengan ngasih rule. Ini contoh file ui-components.mdc di mana kami berusaha nge-enforce reuse komponen kalau memungkinkan:
components.mdc
---
description: Implementing designs and building UI
---
- reuse existing UI components from `/src/components/ui`. these are the primitives we can build with
- create new components by orchestrating ui components if you can't find any existing that solves the problem
- ask the human how they want to proceed when there are missing components and designs
Seiring library komponen lo berkembang, tambahin rule baru sesuai kebutuhan. Kalau rules jadi terlalu banyak, pertimbangin buat mecahnya ke kategori yang lebih spesifik, misalnya “cuma berlaku saat kerja dengan input pengguna.”
ui-components.png

​
Beri Cursor akses ke browser

Untuk memperluas kemampuan Cursor, kamu bisa menyiapkan server MCP browser tools, yang memberikan akses ke log konsol dan permintaan jaringan. Setelah dikonfigurasi, kamu bisa memverifikasi perubahan dengan memantau output konsol dan aktivitas jaringan. Pengaturan ini membantu memastikan implementasimu sesuai dengan intent-mu. Ikuti petunjuk di sini untuk menyiapkan server MCP: https://browsertools.agentdesk.ai/installation
browser.png
Kami sedang mengerjakan cara agar ini bisa diintegrasikan secara native di Cursor dengan lebih mudah.

​
Ringkasan

  • Loop umpan balik yang cepat itu krusial di pengembangan web. Pakai Cursor bareng tool seperti Figma, Linear, dan browser biar bisa gerak cepat dan tetap in-flow.
  • Server MCP bikin lo bisa ngintegrasiin sistem eksternal langsung ke Cursor, ngurangin context switching dan ningkatin eksekusi tugas.
  • Ngebiasain reuse komponen dan design system bantu model ngasilin kode dan output yang lebih bersih dan konsisten.
  • Tugas yang jelas dan terukur ngasih hasil yang lebih bagus. Selalu niat pas bikin prompt dan apa yang lo minta.
  • Kalau output-nya belum oke, coba atur:
    • Instruksi: Pakai rules, prompt, dan kasih akses ke konteks lebih banyak, misalnya lewat server MCP.
    • Sistem: Pola, abstraksi, dan kejelasan bikin model lebih gampang paham, lebih bantu, dan bisa kerja lebih otonom.
  • Lo bisa nge-extend konteks model dengan nyertain info runtime kayak console log, network request, dan data elemen UI.
  • Nggak semua hal harus diotomatisasi. Kalau sistem lo jadi terlalu kompleks, balik ke edit yang lebih presisi pakai Tab dan Inline Edit.
  • Cursor paling powerful kalau jadi co-pilot, bukan autopilot. Pakai buat ningkatin, bukan ngeganti, keputusan lo sendiri.