Pengembangan web melibatkan iterasi cepat dan loop umpan balik yang ketat antara Cursor dan alat eksternal seperti Figma atau browser. Di Cursor, kami telah menemukan alur kerja yang memperketat loop ini. Pelingkupan tugas yang jelas, penggunaan kembali komponen, dan memanfaatkan sistem desain membantu menjaga hal-hal tetap cepat dan konsisten. Panduan ini mencakup cara mengatur Cursor untuk mendukung pengembangan web dan memperketat loop umpan balik.

​
Mulai mengorkestrasi di Cursor

Chat sangat bagus untuk memulai perubahan. Setelah bagian-bagian utama sudah ada, beralih ke Inline Edit dan Tab membantu mempertahankan alur kerja Anda. Setelah mengatur Cursor, Anda akan dapat mengorkestrasi alur kerja di berbagai alat. Di bawah ini adalah demonstrasi dari apa yang mungkin: permainan ular yang dibuat dengan menggabungkan alat Linear, Figma, dan browser. Meskipun proyek dunia nyata biasanya lebih kompleks, contoh ini menunjukkan potensi dari alur kerja terintegrasi ini.

​
Hubungkan ke alat manajemen proyek Anda

Anda dapat mengintegrasikan Cursor ke dalam perangkat lunak manajemen proyek yang sudah ada menggunakan berbagai tooling. Dalam panduan ini, kita akan melihat cara mengintegrasikan Linear dengan server MCP mereka.

​
Instalasi

Atau tambahkan server Linear MCP secara manual ke mcp.json: 
{
  "mcpServers": {
    "Linear": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.linear.app/sse"
      ]
    }
  }
}
Kemudian:
  1. Pastikan untuk mengaktifkan Linear dari pengaturan MCP
  2. Web browser akan terbuka dan Anda akan diminta untuk otorisasi dengan Linear
    Karena kondisi MCP saat ini, pengaturan mungkin memerlukan beberapa kali percobaan. Jika integrasi tidak berfungsi, coba “Reload” server dari pengaturan Cursor.

​
Menggunakan Linear di Cursor

Server Linear MCP menyediakan berbagai alat yang dapat digunakan Cursor untuk membaca dan mengelola issues. Buka pengaturan MCP dan temukan server Linear untuk melihat daftar semua alat. Untuk memverifikasi, coba prompt ini di Chat: 
list all issues related to this project
linear.png
Ini seharusnya mengembalikan daftar issues jika integrasi telah diatur dengan benar.

​
Bawa desain Figma Anda

Desain dan mockup adalah inti dari pengembangan web. Menggunakan server MCP resmi untuk Figma, Anda dapat langsung mengakses dan bekerja dengan file desain di Cursor. Untuk memulai, ikuti instruksi pengaturan di Figma Dev Mode MCP Server.

​
Instalasi

Anda dapat mengklik tombol di bawah ini untuk menginstal server MCP. Atau tambahkan secara manual ke mcp.json Anda: 
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

​
Penggunaan

Server ini menyediakan beberapa alat yang dapat Anda gunakan dalam prompt Anda. Misalnya, coba tanyakan desain dari seleksi saat ini di Figma. Baca lebih lanjut di dokumentasi.
figma.png

​
Jaga konsistensi scaffolding kode Anda

Anda mungkin sudah memiliki kode yang ada, sistem desain, atau konvensi yang telah ditetapkan yang ingin digunakan kembali. Saat bekerja dengan model, sangat membantu untuk mereferensikan pola yang sudah ada dalam codebase Anda, seperti dropdown menu atau komponen umum lainnya. Bekerja dalam codebase berbasis web yang besar, kami menemukan bahwa kode deklaratif bekerja dengan sangat baik, terutama untuk React dan JSX. Jika Anda memiliki sistem desain, Anda dapat membantu agent menemukannya dengan menyediakan aturan untuk itu. Berikut adalah file ui-components.mdc di mana kami mencoba untuk menegakkan penggunaan kembali komponen bila memungkinkan:
components.mdc
---
description: Mengimplementasikan desain dan membangun UI
---
- gunakan kembali komponen UI yang ada dari `/src/components/ui`. ini adalah primitif yang dapat kita gunakan untuk membangun
- buat komponen baru dengan mengorkestrasi komponen ui jika Anda tidak dapat menemukan yang sudah ada yang menyelesaikan masalah
- tanyakan kepada manusia bagaimana mereka ingin melanjutkan ketika ada komponen dan desain yang hilang
Seiring berkembangnya library komponen Anda, tambahkan aturan baru sesuai kebutuhan. Ketika aturan menjadi terlalu banyak, pertimbangkan untuk membaginya ke dalam kategori yang lebih spesifik, seperti “hanya berlaku saat bekerja dengan input pengguna.”
ui-components.png

​
Berikan akses browser kepada Cursor

Untuk memperluas kemampuan Cursor, Anda dapat mengatur server MCP browser tools, yang menyediakan akses ke console logs dan network requests. Setelah dikonfigurasi, Anda dapat memverifikasi perubahan dengan memantau output console dan aktivitas network. Pengaturan ini membantu memastikan implementasi Anda sesuai dengan niat Anda. Ikuti instruksi di sini untuk mengatur server MCP: https://browsertools.agentdesk.ai/installation
browser.png
Kami sedang bekerja untuk membuat ini lebih mudah diintegrasikan secara native di Cursor.

​
Kesimpulan

  • Loop umpan balik yang ketat sangat penting dalam pengembangan web. Gunakan Cursor bersama dengan alat seperti Figma, Linear, dan browser untuk bergerak cepat dan tetap dalam alur kerja.
  • Server MCP memungkinkan Anda mengintegrasikan sistem eksternal langsung ke dalam Cursor, mengurangi perpindahan konteks dan meningkatkan eksekusi tugas.
  • Menggunakan kembali komponen dan sistem desain membantu model menghasilkan kode dan output yang lebih bersih dan konsisten.
  • Tugas yang jelas dan terfokus menghasilkan hasil yang lebih baik. Bersikaplah sengaja dengan cara Anda memberikan prompt dan apa yang Anda minta.
  • Jika Anda tidak mendapatkan output yang baik, coba sesuaikan:
    • Instruksi: Gunakan aturan, prompt, dan berikan akses ke lebih banyak konteks dengan misalnya, server MCP.
    • Sistem: Pola, abstraksi, dan kejelasan memudahkan model untuk memahami, membantu, dan bekerja lebih otonom
  • Anda dapat memperluas konteks model dengan menyertakan info runtime seperti log konsol, permintaan jaringan, dan data elemen UI.
  • Tidak semua hal perlu diotomatisasi. Jika sistem Anda menjadi terlalu kompleks, kembalilah ke pengeditan yang lebih bedah dengan Tab dan Inline Edit.
  • Cursor paling kuat ketika menjadi co-pilot, bukan autopilot. Gunakan untuk meningkatkan, bukan menggantikan, pengambilan keputusan Anda sendiri.