對話串

  • Cj Z 🎯
    @cj_zZZz
    • I've built 19 projects with Cursor AI without line a single line of code myself. But, the Truth is Cursor is dumb you don't add detailed docs around your project. You need to build a strong <Context Boundary> around Cursor Here what you can do to improve your Cursor workflow🧵
    我利用 Cursor AI 完成了 19 個專案，自己卻沒有寫過一行程式碼。 不過，事實是游標很笨，你並不會在你的專案中添加詳細的文件。 你需要在游標周圍建立一個堅固的上下文邊界 這裡有一些方法可以幫助您改善游標的工作流程 🧵
    圖片
    1. Brain dump with Claude You need to to share everything about your idea. The best way you open your mic and speak out everything about your project. - What it is? - Features? - Layout? - Inspirations? Anything that comes to your mind. Context is the Key for AI.
    1. 與克勞德的思維碰撞 你需要分享有關你想法的所有細節。最好的方式是打開麥克風，將你對這個項目的所有想法都說出來。 這是什麼東西？ 特色是什麼？ 這是什麼佈局？ 有什麼啟發嗎？ 任何浮現在你腦海中的想法。上下文是人工智慧的關鍵。
    2. Claude or ChatGPT o1 Claude is great to turn your thoughts into structured output. You take this output to ChatGPT o1 model. Ask it to create: - Project requirements Doc. - Tech Stack and Packages Doc. - Schema Design Doc. - Detailed App Flow Doc.
    2. 克勞德或聊天生成預訓練變換器 o1 Claude 是一個能將你的想法轉化為有條理輸出的優秀工具。 你將這個輸出帶到 ChatGPT o1 模型中。 請讓它創建： 專案需求說明書 技術棧與套件文檔。 架構設計文件 詳細的應用流程文件。
    I do compare Claude and o1. Sometimes Claude outshines o1. (If you don't have access to o1, you can get this done with Claude too)
    我確實會比較克勞德和 o1。有時候克勞德的表現會超過 o1。 如果你無法使用 o1，也可以透過 Claude 來完成這項工作
    3. Once you got your Docs done. Its time for Frontend Code. You have 2 options: 1. For High Quality UI: use v0 2. For Standard UI: use Claude If you pick v0, attach the created docs and ask it to start coding page by page.
    一旦你完成了文件。 現在是進行前端程式碼的時候了。 你有兩個選項： 若要獲得高品質的使用者介面，請使用 v0 2. 對於標準用戶介面：請使用 Claude 如果你選擇 v0，請附上所創建的文件，並要求它逐頁開始編寫程式碼。
    If you work with claude, ask it to start coding frontend screens.
    如果你和 Claude 一起工作，請讓它開始編寫前端畫面。
    4. Now have Docs done, frontend code done. Let's move to the code assambly part. Now you have 2 options: 1. For fast project setup: use bolt .new 2. For manual setup: use Cursor With bolt you can install Nextjs + all dependencies in just 2 prompts.
    現在文件和前端代碼都已完成。 讓我們開始進入程式碼組合的部分。 現在你有兩個選項： 1. 快速設置專案的方法：使用 bolt .new 2. 若要手動設置，請使用游標 使用 bolt，您只需兩個指令即可安裝 Nextjs 及其所有依賴項。
    With cursor, you follow the claude instructions to set up your project. (I use bolt for this step to save time but if you don't have access to bolt claude will help you setup with cursor)
    使用游標，您可以根據 Claude 的指示來設置您的專案。 (我使用 bolt 來節省時間，但如果你無法使用 bolt，claude 會幫助你設置 cursor。)
    5. Ask Claude to create "File Structure" I am pasting the file structure that works the best with AI code. copy this file and ask Claude to use this as a reference and create a file straucture for your project.
    5. 請克勞德建立「檔案結構」 我正在分享最適合 AI 程式碼的檔案結構。 複製這個文件，並請 Claude 以此作為參考，為你的專案建立一個檔案結構。
    圖片
    圖片
    6. Run code now. Now upload that file stucture to: 1. bolt (bolt can create you folder & files in 2 prompts 2. to cursor. with bolt its easy and fast. For cursor. you need to now attach all docs in .md foramt in root folder. Then Open composer.
    現在執行程式碼。 現在將這個文件結構上傳到： 1. bolt（bolt 可以在兩次提示中為您創建資料夾和檔案） 移動到游標位置。 使用螺栓非常簡單且快速。 對於游標，您需要將所有文件以 .md 格式附加到根目錄中。 然後啟動作曲軟體。
    Install Nextjs and all dependencies and then paste the file structure.
    安裝 Nextjs 及其所有依賴後，請將文件結構粘貼上來。
    7. Assemble frontend Now lets add frontend code to right files. Claude is great to guide you on that. Ask Claude. "Let's implement frontend code page-by-page.
    7. 前端組裝 現在讓我們把前端程式碼添加到正確的檔案中。 克勞德非常適合在這方面指導你。請向克勞德詢問。 讓我們一頁一頁地實現前端程式碼。
    From the code I attcahed and my requirements, provide me the production ready code that I can paste" Now follow Claude's instructions to copy code and paste it in right file path.
    根據我提供的代碼和需求，請給我一段可以直接使用的生產就緒代碼 現在請按照 Claude 的指示，複製代碼並將其粘貼到正確的檔案路徑中。
    8. Create Backend Now once your frontend pages are running smoothly with demo data and all features are working. It's time to create auth (sign-in, sign-up) , database and storage. I use supabase because AI you code (SQL queries) to setup the backend.
    8. 建立後端 現在，當您的前端頁面運行順利，並且所有功能都正常運作時。 現在是時候建立身份驗證（登入、註冊）、資料庫和儲存空間了。 我使用 supabase，因為 AI 可以幫我編寫 SQL 查詢來設置後端。
    Just follow Claude's instructions and tag relevant schema design files in cursor to get it done. Start with: 1. auth 2. database tables 3. storage
    只需按照 Claude 的指示，將相關的架構設計文件標記在游標中即可完成。 從這裡開始吧： 1. 身份驗證 2. 數據庫表格 3. 存儲
    9. Debugging. Now your frontend is storing data in the backend. Test all features. There might be few bugs, Use Claude to debug those and you'll be good to go. for debugging: Open new composer for each update, attach files that are having issues and paste errors.
    9. 調試。 現在你的前端已經將數據存儲到後端了。請測試所有功能。 可能會有一些錯誤，使用 Claude 來進行調試，你就可以順利進行了。 為了進行調試：每次更新時請打開新的作曲工具，附上有問題的檔案並貼上錯誤信息。
    New Claude on cursor is great at this (with context boundary)
    新的 Claude 在游標上的表現非常出色（具有上下文邊界）
    Now you have a working app that you coded with AI. 80% of my time goes into creating Docs and then in 20% of time I can code that app with minimal errors. If you don't build a concrete boundary around cursor, it will hallucinate and mess up your project easily.
    現在你擁有了一個用 AI 編寫的可運行應用程式。 我 80%的時間都花在撰寫文檔上，剩下的 20%時間我才能以最少的錯誤編寫那個應用程式。 如果你不在游標周圍建立明確的邊界，它可能會出現錯誤，並輕易地破壞你的專案。
    To save my 80% time and to automate the Documentation, I've built an app. I added all my templates (27 in total) to run in an agentic workflow and create me all required documentation. This way I can just download docs, attach it to cursor and start coding.
    為了節省 80%的時間並自動化文檔，我開發了一個應用程式。 我將所有的模板（總共 27 個）整合到一個代理工作流程中，以便生成我所需的所有文件。 這樣我就可以直接下載文件，將它附加到游標上，然後開始編寫程式碼。
    If this post get 400+ reposts. I'll build it for you guys. The best way to validate the idea is to share it with right audience. Check out the app flow below. It can create: ✅ System prompts ✅ PRDs ✅ App flow Docs ✅ Schema Design ✅ v0 System Prompts and so on/
    如果這篇帖子轉發超過 400 次，我就會為大家製作它。 驗證這個想法的最佳方式是將其與合適的受眾分享。 請參考以下的應用流程。 它能夠創造： 系統提示語 ✅ 產品需求文檔 ✅ 應用流程說明文件 ✅ 模式設計 ✅ v0 系統提示語 如此類推/
    0:03 / 0:43