​
Key Concepts

  • AI (Artificial Intelligence): Technology that enables machines to simulate human intelligence, allowing them to learn, reason, and problem-solve.
  • Prompt: A text-based command used to instruct an AI model. Within Lumi, prompts are the fundamental tool you will use to create and modify every component of your application.

​
Lumi-Specific Terms

  • Discuss Mode: More than a code generator, Lumi acts as an interactive development partner. It guides you through planning, debugging, and shipping, helping you build with confidence.
  • Edit Mode: The environment for making direct changes to your application’s code and content.
  • Edit: An AI-powered tool with Tailwind-native visual controls for precise and intuitive refinement.
  • Remix: Duplicate any project to use as a new starting point. Remixing allows you to experiment with changes and explore ideas while preserving the original version.
  • Preview: A live, interactive view for testing features and content before publishing your changes.

​
Product & Development

​
Product Management & Strategy

  • MVP (Minimum Viable Product): The simplest version of a product with just enough features to attract early users and validate the core idea.
  • Roadmap: A high-level plan that outlines a product’s vision, direction, and upcoming features over time.
  • Feature Request: A suggestion from users or stakeholders for a new capability or improvement.
  • User Story: A brief, simple feature description from the end user’s perspective.
  • User Journey: The path a user takes to accomplish a goal within your product.
  • Persona: A detailed, fictional profile of a target user, created from research to guide design and development decisions.

​
Engineering Concepts

  • PRD (Product Requirements Document): A document that details a product’s purpose, features, and technical specifications to guide the development team.
  • API (Application Programming Interface): A set of rules that allows different software applications to communicate and exchange data. Common types include REST and GraphQL APIs.
  • Refactor: The process of restructuring code to improve its quality and maintainability without changing its functionality.
  • GitHub: A popular platform for version control and collaborative software development.

​
Data & Analytics

  • A/B Testing: Comparing two versions of a webpage or feature to see which one performs better.
  • Conversion Rate: The percentage of users who complete a specific goal, like signing up or making a purchase.
  • Churn Rate: The percentage of users who stop using your product over a specific period.
  • Retention Rate: The percentage of users who continue to use your product over time.
  • Event Tracking: Monitoring specific user actions (like clicks or form submissions) to understand engagement.

​
UI/UX & Frontend Development

​
Frontend Development

  • Frontend: The part of an application that users see and interact with, including the user interface and overall experience.
  • React: A popular JavaScript library for building dynamic user interfaces, especially for single-page applications.
  • Gradient: A smooth transition between two or more colors.
  • Tailwind CSS: A utility-first CSS framework for rapidly building custom designs directly in your HTML.
  • Design System: A standardized collection of reusable components and guidelines that ensures design consistency across a product.

​
UI/UX Design Concepts

  • Accent Color: A contrasting color used to highlight key elements like buttons or links.
  • Theme: The overall look and feel of an application, defined by its color scheme, typography, and layout.
  • Responsive Design: An approach that ensures your application looks and works great on any device, from desktops to mobile phones.
  • Above the Fold: The content visible on a webpage without scrolling. It’s prime real estate for important information.
  • CTA (Call to Action): A prompt, like a button or link, that encourages users to take a specific action (e.g., “Sign Up,” “Buy Now”).

​
Page Structure & Navigation

  • Headings: Titles (H1, H2, etc.) that structure content and establish a clear visual hierarchy.
  • Footer: The section at the bottom of a webpage, typically containing links, contact information, and legal notices.
  • Breadcrumb: A navigation trail that shows a user’s current location on a site (e.g., Home > Products > Laptops).
  • Favicon: The small icon representing your website in a browser tab or bookmarks.
  • Meta Title: The page title displayed in search engine results and browser tabs, crucial for SEO.
  • Meta Description: The short summary of a webpage shown in search results to attract clicks.
  • Canonical URL: A tag that tells search engines the preferred version of a page to avoid duplicate content issues.
  • URL Slug: The user-friendly part of a URL that identifies a specific page (e.g., /about-us).
  • Sitemap: A file that lists all pages on your website to help search engines index them effectively.
  • Navigation Bar (Nav Bar): The main menu that provides links to key sections of your website.
  • Skip Links: Accessibility links that allow users to bypass navigation and jump directly to the main content.
  • Pagination: A system for dividing long lists of content into separate pages.
  • Anchor Link: A link that scrolls the user to a specific section on the same page.
  • 404 Page: A custom error page shown when a user tries to access a URL that doesn’t exist.

​
Notifications & Feedback

  • Toast: A small, temporary notification that provides brief feedback on an action.
  • Snackbar: Similar to a toast, but often appears at the bottom of the screen and may include an action button (e.g., “Undo”).
  • Tooltip: A pop-up box with extra information that appears when hovering over an element.
  • Badge: A small visual marker on an icon or button to indicate a count, status, or notification.
  • Loading Spinner: An animated icon indicating that a process is running in the background.
  • Progress Bar: A visual bar that shows the completion progress of a task.
  • Skeleton Loader: A placeholder UI that mimics the final content’s layout, improving the perception of loading speed.

​
Overlays & Pop-Ups

  • Popover: An overlay that provides additional context or options related to a specific element.
  • Dialog (Modal): A window that appears over the main content, requiring user interaction to be dismissed.
  • Drawer (Sidebar Panel): A panel that slides in from the side, typically containing navigation or settings.
  • Lightbox: A modal window that displays media like images in a focused, enlarged view.
  • Alert Box: A system message that informs users about critical information, errors, or warnings.
  • Button: A clickable element that triggers an action.
  • Switch (Toggle): A control that lets users switch between two states, like on and off.
  • Tabs: A component that organizes content into different views that a user can switch between.
  • Stepper (Wizard): A guided, multi-step process that shows users their progress.
  • Accordion: A series of collapsible panels used to organize and reveal content.
  • Dropdown Menu: A list of options that appears when a user interacts with a button or field.

​
Forms & Input

  • Form: A set of fields for collecting user data, such as a signup or contact form.
  • Radio Group: A set of options where the user can select only one.
  • Checkbox: A control that allows users to select one or more options from a list.
  • Text Field: A standard input box for single-line text entry.
  • Text Area: A larger input box for multi-line text, like comments or messages.
  • Select (Dropdown Select Box): A dropdown list for choosing one option from a predefined set.
  • Date Picker: A calendar interface that allows users to select a date easily.
  • Slider: A control for selecting a value from a continuous range.
  • File Upload: A component that allows users to upload files from their device.
  • Autocomplete: An input field that suggests results as the user types.
Use these terms in your prompts to define the aesthetic you want to achieve.
  • Neobrutalism: A raw, high-contrast design style with bold typography and unrefined elements.
  • Retro: A design that evokes nostalgia by using styles from past decades.
  • Hacker: An aesthetic inspired by terminal interfaces, featuring dark backgrounds and monospaced fonts.
  • Glassmorphism: A style that uses translucent, frosted glass-like layers to create depth.
  • Nudy: A minimalist approach using soft, neutral color palettes for an understated look.

​
Backend Development & Databases

​
Backend Fundamentals

  • Backend: The server-side of an application that handles data, logic, and core operations.
  • Webhooks: Automated messages sent from apps when something happens, allowing for real-time data exchange.

​
Database Management

  • CRUD (Create, Read, Update, Delete): The four fundamental operations for managing data.
  • SQL (Structured Query Language): The standard language for managing and querying data in relational databases.
  • PostgreSQL: A powerful, open-source relational database known for its reliability and advanced features.

​
Security & Authentication

  • OAuth: An authentication standard that allows users to sign in with third-party accounts like Google or GitHub.
  • Two-Factor Authentication (2FA): A security layer that requires users to provide two forms of identification to log in.
  • CORS (Cross-Origin Resource Sharing): A security mechanism that controls how resources on your server can be accessed from other domains.