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, reuse 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 mantap buat nge-bootstrap perubahan. Begitu komponen utama sudah siap, pindah ke Inline Edit dan Tab bakal bantu kamu tetap dalam flow. Setelah nyiapin Cursor, kamu bisa mengorkestrasi alur kerja lintas berbagai tool. Di bawah ini contoh demo tentang apa yang bisa dilakukan: game snake yang dibuat dengan nggabungin Linear, Figma, dan tool browser. Walaupun proyek dunia nyata biasanya lebih kompleks, contoh ini nunjukin potensi dari alur kerja terintegrasi ini.

​
Sambungkan ke tools manajemen proyek lo

Lo bisa ngintegrasiin Cursor ke software manajemen proyek yang udah lo pake lewat berbagai tooling. Di panduan ini, kita bakal lihat cara ngintegrasiin Linear dengan MCP server mereka.

​
Instalasi

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

​
Pakai Linear di Cursor

Server MCP Linear nyediain berbagai tools yang bisa dipakai Cursor buat baca dan ngelola issue. Buka pengaturan MCP dan cari server Linear buat lihat daftar semua tools. Buat verifikasi, coba prompt ini di Chat: 
tampilkan semua issue yang terkait dengan proyek ini
linear.png
Kalau integrasinya sudah dikonfigurasi dengan benar, ini bakal menampilkan daftar issue.

​
Bawa desain Figma lo

Desain dan mockup itu inti dari pengembangan web. Dengan server MCP resmi buat Figma, lo bisa langsung akses dan kerjain file desain di Cursor. Buat mulai, ikutin instruksi setup di Figma Dev Mode MCP Server.

​
Instalasi

Lo bisa klik tombol di bawah buat install server MCP. Atau tambahin manual ke mcp.json lo: 
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

​
Penggunaan

Server mengekspose 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 kamu sudah punya kode yang ada, design system, atau konvensi yang sudah mapan dan ingin dipakai ulang. Saat bekerja dengan model, bakal membantu kalau merujuk pola yang sudah ada di codebase kamu, seperti menu dropdown atau komponen umum lainnya. Di codebase web besar yang kami kerjakan, kami menemukan bahwa kode deklaratif bekerja sangat baik, terutama untuk React dan JSX. Kalau kamu punya design system, kamu bisa bantu agent menemukannya dengan menyediakan aturan untuk itu. Berikut file ui-components.mdc di mana kami mencoba menegakkan reuse komponen sebisa mungkin:
components.mdc
---
description: Mengimplementasikan desain dan membangun UI
---
- pakai ulang komponen UI yang sudah ada dari `/src/components/ui`. ini adalah primitive yang jadi dasar untuk kita bangun
- buat komponen baru dengan mengorkestrasikan komponen UI kalau kamu nggak menemukan yang sudah ada yang bisa menyelesaikan masalah
- tanya pengguna bagaimana mereka mau lanjut kalau ada komponen atau desain yang belum ada
Seiring pustaka komponenmu berkembang, tambahkan aturan baru sesuai kebutuhan. Kalau aturan sudah terlalu banyak, pertimbangkan untuk membaginya ke kategori yang lebih spesifik, misalnya “hanya diterapkan saat bekerja dengan input pengguna.”
ui-components.png

​
Beri Cursor akses ke browser

Untuk memperluas kapabilitas Cursor, kamu bisa menyiapkan server MCP browser tools, yang memberi akses ke console log dan network request. Setelah dikonfigurasi, kamu bisa memverifikasi perubahan dengan memantau output console dan aktivitas jaringan. Setup ini membantu memastikan implementasimu sesuai dengan intent kamu. Ikuti instruksi di sini untuk menyiapkan server MCP: https://browsertools.agentdesk.ai/installation
browser.png
Kita lagi ngerjain supaya ini lebih gampang diintegrasikan secara native di Cursor.

​
Ringkasan

  • Loop umpan balik yang cepat itu krusial di pengembangan web. Pakai Cursor bareng alat seperti Figma, Linear, dan browser biar gerak cepat dan tetap in-flow.
  • Server MCP bikin lo bisa mengintegrasikan sistem eksternal langsung ke Cursor, ngurangin context switching dan ningkatin eksekusi tugas.
  • Ngegunain ulang komponen dan design system bantu model ngeluarin kode dan output yang lebih bersih dan konsisten.
  • Tugas yang jelas dengan ruang lingkup yang terdefinisi ngasih hasil yang lebih bagus. Lebih sadar dalam cara lo nge-prompt dan apa yang lo minta.
  • Kalau output-nya belum oke, coba sesuaikan:
    • Instruksi: Pakai rules, prompt, dan kasih akses ke lebih banyak konteks, misalnya lewat server MCP.
    • Sistem: Pola, abstraksi, dan kejelasan bikin model lebih gampang paham, bantu, dan kerja lebih otonom.
  • Lo bisa ngeluasin konteks model dengan nyertain info runtime kayak console logs, network requests, dan data elemen UI.
  • Nggak semua hal perlu diotomasi. Kalau sistem lo jadi terlalu kompleks, balik ke edit yang lebih presisi pakai Tab dan Inline Edit.
  • Cursor paling kuat saat jadi co-pilot, bukan autopilot. Pakai buat ningkatin, bukan gantiin, pengambilan keputusan lo sendiri.