無論您是新使用者還是經驗豐富的使用者，要充分利用 Lumi，都需要建立穩固的基礎、精通提示工程，並有效利用其各種工具和模式。遵循這些指南，您可以加快開發流程並避免常見的陷阱。

​
提示最佳實踐

​
1. 精通提示工程以獲得更好的輸出：

將 AI 視為您的工程夥伴；它只知道您明確告知它的事情。
  • 清晰與詳細： 清晰且詳細的提示能帶來更優質的輸出。請具體說明，提及確切的頁面（例如 /dashboard）和預期行為。使用自然語言提出您的請求，例如
I want users with the role Investor to access this component, but not Admins.
  • 視覺輔助： 加入螢幕截圖，尤其是在描述錯誤或使用者體驗問題時。這能提供單靠文字可能遺漏的視覺情境。
  • 護欄與限制： 告訴 AI 不要碰觸什麼。例如，您可以指示：
Do not edit /shared/Layout.tsx.
  • 重複以加強記憶： AI 的記憶力可能有限，因此如有必要，請在不同提示中重複重要的指令。
  • 分解複雜任務： 避免試圖同時實作多件事情。將您的工作分解成更小、可測試的區塊。在每個步驟之間使用「討論模式」(Discuss Mode) 進行驗證，然後再繼續。一個有用的功能分解範本包括：
Create the new page, Add UI layout, Connect the data, Add logic + edge cases, Test per role.
  • 針對特定角色的指令： 如果您的應用程式支援多個使用者角色，請務必定義提示適用於哪個角色。這有助於防止因共用邏輯或元件而產生的錯誤。例如：
As an Investor, I want to view the company dashboard, but I shouldn’t be able to edit it. Please isolate this feature to the Investor role only.

​
2. 頻繁利用討論模式 (Discuss Mode)

「討論模式」(Discuss Mode) 是您的 AI 副駕駛，專為偵錯、腦力激盪和規劃實作而設計，且不會立即修改您的程式碼。
  • 使用時機： 在 2-3 次「嘗試修復」(Try to Fix) 失敗後、偵錯複雜邏輯或資料庫問題時，或規劃新功能時，切換到「討論模式」。您可以提示它
"Suggest 3 ways to implement X".
  • 工作流程建議： 有些使用者發現，將 60-70% 的時間花在「討論模式」，直到完全滿意後才點擊「實作計畫」(Implement the plan)，這樣做很有效。這種方法可以提高輸出的一致性，並防止意外的編輯。
  • 受控互動： 為避免不必要的程式碼執行，請使用類似「調查但先不要寫程式碼」或「在不改變任何東西的情況下，建議 3 種解決方法」的提示。這能讓您掌握控制權。
  • 跳出 AI 迴圈： 如果 AI 進入修補損壞程式碼的「迴圈」，請切換到「討論模式」，貼上錯誤的螢幕截圖，然後提示：
"Please investigate this without breaking other features. If needed, revert to the last working version and fix from there".

​
3. Remix 作為最後手段。

有時候，重新開始花費的時間更少，尤其是在陷入開發泥淖時。
  • Remix 的作用： Remix 會在 T=0 時建立您專案的乾淨副本。然後您可以使用改進的提示和更清晰的知識進行重建，並將舊專案純粹作為參考。
  • 何時使用 Remix： 如果您陷入充滿錯誤的迴圈、想要在保留歷史記錄的同時乾淨地重新開始，或者需要斷開像 Supabase 這樣的資料庫服務並嘗試新方法，這會很有用。

​
4. 培養耐心與冷靜

AI 開發可能難以預測；前一刻神奇，下一刻令人沮喪。建構的最後階段通常耗時最長。
  • 黃金法則： 花時間撰寫提示、重新檢查所有內容，並將工作分解成小的、可測試的區塊。您輸入的精確度與輸出的品質直接相關。

​
5. 提升工作流程的額外技巧

  • 「我很沮喪…」模式： 使用「我很沮喪…」(I am frustrated…) 的提示模式來幫助 AI 更好地集中注意力。
  • 編輯後檢查： 在任何重大編輯後，務必重新檢查多個角色及其行為，特別是對於條件邏輯。
  • 備用版本： 儲存穩定版本作為備用，以便快速偵錯。
  • 針對特定角色的元件： 為避免因過於通用的邏輯而產生錯誤，請提示 AI
"Create a component specifically for [role X] and do not reuse shared components unless clearly scoped".

​
提示庫 – 策略與範例

提示庫提供了一系列可重複使用的提示模式和範例，適用於使用 Lumi AI 的常見開發情境。您可以將這些視為適用於您專案的範本。
  1. 啟動專案
  • 使用時機： 在專案最開始時，幫助 AI 理解高層次需求並建立基礎。它扮演著您最初的專案簡報角色。
  • 如何使用： 概述應用程式類型、關鍵技術（前端、後端、服務）和主要功能。指示 AI 從何處開始，通常是主頁或一個關鍵功能。
"I need a task management application with: - Tech Stack: Next.js frontend, Tailwind CSS for styling, Supabase for auth and database. - Core Features: Project and task creation, assigning tasks to users, due date reminders, and a dashboard overview. Start by building the main dashboard page, containing: - A header with navigation, - A list of projects with their status, - and a button to create a new project. Provide dummy data for now, and ensure the design is clean and responsive".
  1. UI/UX 設計增強
  • 使用時機： 在不改變其功能的情況下，改善您應用程式的視覺吸引力。這包括修飾 UI、調整佈局或實作特定的設計風格。
  • 如何使用： 明確定義設計變更的範圍，並強調功能必須保持不變。引導 AI 達到期望的美學效果（例如，現代、簡約）。一次處理一個變更，並提及任何不應更改其邏輯的 UI 部分。
The app UI should be improved, without changing any functionality. - Keep all existing logic and state management as is. - Visual Enhancements: Update the styling of the dashboard page: use a modern card design for each project listing, improve the color scheme for better contrast, and increase padding for a cleaner layout. - Ensure these changes do not break any functionality or data flow. Goal: purely cosmetic improvements for a more polished look, with the app behaving exactly as before.
  1. 確保響應式設計
  • 使用時機： 當您的應用程式需要在各種螢幕尺寸（手機、平板、桌機）上調整其佈局時。適合作為 UI 密集型任務的最後檢查步驟。
  • 如何使用： 強調行動優先的方法，並指示 AI 確保在標準斷點之間具有響應性。提及特定的 CSS 框架指南（例如，Tailwind 的 sm, md, lg, xl 斷點），並要求避免使用固定寬度。
Our app needs to be fully responsive across mobile, tablet, and desktop. - Follow a mobile-first strategy: prioritize the layout for small screens, then adjust for larger screens. - Use modern UI/UX best practices for responsive design. (For Tailwind CSS, use the standard breakpoints sm, md, lg, xl – no custom breakpoints unless necessary.) - Ensure every page (especially the dashboard and project detail pages) reflows properly on a small screen: elements should stack or resize as needed, text should remain readable, and no content should overflow off-screen. - Do not change the core design or functionality, just make sure it flexibly adapts to different screen sizes. After making changes, please double-check the layout at iPhone 12 dimensions and a typical desktop width.
  1. 重構程式碼
  • 使用時機： 定期進行，尤其是在程式碼變得混亂或緩慢時。重構可以改善程式碼結構、可讀性或效能，而不會改變其外部行為。
  • 如何使用： 確定範圍（檔案、功能或整個程式碼庫）。對於特定檔案，提示：「重構此檔案以提高清晰度和效率，但不要改變其功能或輸出」。指定重點領域，如減少重複或簡化邏輯。對於較大的重構，請要求 AI 分步驟規劃或先審核程式碼。
Refactor the ProjectList component file, but keep its behaviour and UI exactly the same. Goals: - Improve the code structure and readability (simplify complex functions, break into smaller ones if needed). - Remove any unused variables or imports. - Ensure the file follows best practices and is well-documented. Do not introduce any new features or change how the component works for the user – this is purely a code cleanup for maintainability. If any part of the code is unclear, add a brief comment for clarification.
  1. 應用程式類型與功能
Lumi 可以協助處理各種應用程式類型和功能。範例包括： 
E-commerce Store: Product listing, search, filtering, cart, checkout, user accounts.

CMS: Admin dashboard, content creation/editing/publishing, rich text, image uploads, SEO.

Project Management: Task boards, lists, cards, assignment, due dates, drag-and-drop.

Social Media Feed: Posts, comments, likes, sharing, user profiles, notifications, infinite scrolling.

Analytics Dashboard: Various chart types, data filtering, date range selection, exportable reports.

SaaS Application Starter: User authentication, subscription management, settings, dashboard, role-based access.

AI Chat Interface: Conversation history, typing indicators, message threading, feedback.

AI Content Generation Tool: Generate content based on inputs, refinement options, saving, export.

Recommendation Component: Based on user behaviour/preferences, feedback, explanation of recommendations.

Personalisation System: Customisable UI, content recommendations, user control over personalisation.
  1. 與 AI 進行策略規劃
  • 使用時機： 在開始複雜、多步驟的實作之前，或當您有一個需要分解的大型功能時。規劃提示讓您能夠在編寫程式碼之前概述方法，從而節省積分並防止方向錯誤。
  • 如何使用： 向 AI 索取計畫或檢查清單。例如，「為 X 概述一個逐步計畫」或「在編寫程式碼之前，列出您將為實作 Y 所採取的步驟」。這最好在「討論模式」中進行，以避免程式碼執行。
Before writing any code, plan out the implementation of the new Notifications feature. - List each step required to add email notifications when a task is overdue. - Consider both frontend (UI changes, if any) and backend (creating scheduled checks or triggers) aspects. - Ensure the plan keeps the current functionality stable – we can’t break anything existing. - Provide the plan as an ordered list (1, 2, 3, ...), with a brief explanation of each step. Once you outline the plan, pause for review. Do not make any code changes yet.". The AI might respond with a plan such as: 1. Add a timestamp field to tasks. 2. Create a server-side function to check for overdue tasks. 3. Integrate email sending. 4. Update the UI for notification toggles. 5. Test the flow.
AI 可能會回應一個計畫，例如：1. 為任務新增時間戳欄位。 2. 建立一個伺服器端函式來檢查逾期任務。 3. 整合電子郵件發送功能。 4. 更新 UI 以提供通知切換開關。 5. 測試流程。 透過勤奮地應用這些最佳實踐並利用提示庫，您將能充分準備好在 Lumi 中高效地開發複雜的應用程式。