Getting the most out of Lumi, whether you are a new or experienced user, involves setting up a solid foundation, mastering prompt engineering, and leveraging its various tools and modes effectively. By following these guidelines, you can accelerate your development process and avoid common pitfalls.

​
Prompting Best Practices

​
1. Mastering Prompt Engineering for Better Output:

Treat the AI as your engineering partner; it only knows what you explicitly tell it.
  • Clarity and Verbosity: Clear and verbose prompts lead to superior output. Be specific, mentioning exact pages (e.g., /dashboard) and expected behaviours. Use natural language for your requests, such as
I want users with the role Investor to access this component, but not Admins.
  • Visual Aids: Add screenshots, especially when describing bugs or UX issues. This provides visual context that words alone might miss.
  • Guardrails and Limitations: Tell the AI what not to touch. For instance, you might instruct:
Do not edit /shared/Layout.tsx.
  • Repetition for Retention: AI’s memory can be limited, so repeat important instructions across prompts if necessary.
  • Break Down Complex Tasks: Avoid trying to implement multiple things simultaneously. Break your work into smaller, testable chunks. Use Discuss Mode between each step to validate before proceeding. A useful template for feature breakdown includes:
Create the new page, Add UI layout, Connect the data, Add logic + edge cases, Test per role.
  • Role-Specific Instructions: If your application supports multiple user roles, always define which role the prompt applies to. This helps prevent bugs arising from shared logic or components. For example:
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. Leverage Discuss Mode Frequently

Discuss Mode is your AI co-pilot, designed for debugging, brainstorming, and planning implementations without immediately altering your code.
  • When to use it: Switch to Discuss Mode after 2-3 failed “Try to Fix” attempts, when debugging complex logic or database issues, or when planning new features. You can prompt it to
"Suggest 3 ways to implement X".
  • Workflow Recommendation: Some users find it effective to spend 60-70% of their time in Discuss Mode, only clicking “Implement the plan” once fully satisfied. This approach enhances output consistency and prevents unintended edits.
  • Controlled Interaction: To avoid unwanted code execution, use prompts like “Investigate but don’t write code yet” or “Suggest 3 ways to solve this without changing anything”. This maintains control in your hands.
  • Escaping AI Loops: If the AI enters a “loop” of patching broken code, switch to Discuss Mode, paste a screenshot of the error, and prompt:
"Please investigate this without breaking other features. If needed, revert to the last working version and fix from there".

​
3. Remix as a Last Resort.

Sometimes, starting over takes less time, especially when stuck in a development quagmire.
  • What Remixing Does: Remix creates a clean copy of your project at T=0. You can then rebuild with improved prompts and clearer knowledge, using your old project purely as a reference.
  • When to Remix: This is useful if you are stuck in a buggy loop, want to restart cleanly while preserving history, or need to disconnect a database service like Supabase and try a new approach.

​
4. Cultivate Patience and Calm

AI development can be unpredictable; magical one moment, frustrating the next. The final stages of a build often take the longest.
  • Golden Rule: Take your time with prompts, re-check everything, and break down work into small, testable blocks. Precision in your inputs directly correlates with the quality of your outputs.

​
5. Bonus Tips for Enhanced Workflow

  • “I am frustrated…” Pattern: Employ the “I am frustrated…” prompt pattern to help the AI focus better.
  • Post-Edit Checks: After any major edit, always recheck multiple roles and their behaviours, particularly for conditional logic.
  • Fallback Versions: Store stable versions as fallbacks for quick debugging.
  • Role-Specific Components: To avoid bugs from overly generic logic, prompt the AI to
"Create a component specifically for [role X] and do not reuse shared components unless clearly scoped".

​
Prompt Library – Strategies and Examples

The prompt library provides a collection of reusable prompt patterns and examples for common development scenarios with Lumi’s AI. Think of these as templates to adapt for your projects.
  1. Starting Projects
  • When to use: At the very beginning of a project to help the AI understand high-level requirements and build the foundation. It acts as your initial project brief.
  • How to use: Outline the application type, key technologies (frontend, backend, services), and primary features. Direct the AI on where to begin, typically the main page or a crucial feature.
"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 Design Enhancements
  • When to use: To refine the visual appeal of your application without altering its functionality. This includes polishing the UI, adjusting layouts, or implementing a specific design style.
  • How to use: Clearly define the scope of design changes and emphasise that functionality must remain untouched. Guide the AI on the desired aesthetic (e.g., modern, minimalist). Address multiple changes one at a time and mention any UI parts that should not have their logic altered.
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. Ensuring Responsiveness
  • When to use: When your app needs to adapt its layout across various screen sizes (mobile, tablet, desktop). Ideal as a final pass on UI-heavy tasks.
  • How to use: Emphasise a mobile-first approach and instruct the AI to ensure responsiveness across standard breakpoints. Mention specific CSS framework guidelines (e.g., Tailwind’s sm, md, lg, xl breakpoints) and request the avoidance of fixed widths.
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. Refactoring Code
  • When to use: Periodically, especially when code becomes messy or slow. Refactoring improves code structure, readability, or performance without altering its external behaviour.
  • How to use: Identify the scope (file, feature, or codebase). For specific files, prompt: “Refactor this file for clarity and efficiency, but do not alter its functionality or output”. Specify focus areas like reducing duplication or simplifying logic. For larger refactors, ask the AI to plan in steps or audit the code first.
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. App Types and Features
Lumi can assist with a wide variety of application types and features. Examples include: 
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. Strategic Planning with AI
  • When to use: Before starting a complex, multi-step implementation, or when you have a large feature that needs breaking down. Planning prompts allow you to outline an approach before code is written, saving credits and preventing misdirection.
  • How to use: Ask the AI for a plan or checklist. For example, “Outline a step-by-step plan for X” or “Before coding, list the steps you will take to implement Y”. This is best done in Discuss Mode to avoid code execution.
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.
By diligently applying these best practices and utilising the prompt library, you will be well-equipped to develop sophisticated applications efficiently and effectively within Lumi.