> ## Documentation Index > Fetch the complete documentation index at: https://docs.rocket.new/llms.txt > Use this file to discover all available pages before exploring further. # Prompting for Build > Describe apps, features, and redesigns effectively in Rocket.new. export const LlmsDirective = () =>
For the complete documentation index, see llms.txt. For a lightweight markdown version of this page, append .md to the URL.
; The better you describe what you want, the closer Rocket gets on the first try. This guide covers how to write Build prompts for new apps, features, iterations, and redesigns - with concrete examples of what works and what doesn't. ## Principles of effective Build prompts ### Be specific about what, not how Tell Rocket **what** you want the app to do and look like. Don't tell it which CSS properties to use or how to structure the component tree - that's Rocket's job. ```plaintext wrap theme={null} Build a task manager with a Kanban board. Three columns: To Do, In Progress, Done. Users can drag tasks between columns. Each task card shows the title, assignee avatar, and due date. Use a dark theme with purple accents. ``` **Why it works:** Describes the user experience clearly - layout, interaction, and visual style - without dictating implementation details. ```plaintext wrap theme={null} Build a task manager. Use React DnD for drag-and-drop. Create a KanbanColumn component that maps over tasks and renders TaskCard components. Use flex-wrap with gap-4. ``` **Why it's weak:** Over-specifies implementation. Rocket already knows the best way to build a Kanban board. Describing the desired UX is more effective than prescribing code. ### Include the full picture in your first prompt The more context you give upfront, the better the initial generation. Include: * **App type** - web app, mobile app, landing page, dashboard * **Key features** - the 3-5 most important things the app does * **User flow** - what happens when someone uses the app (first, second, third) * **Design direction** - color scheme, mood, reference sites, specific aesthetic * **Data model** - what data exists and how it relates (users, projects, tasks) ```plaintext wrap theme={null} Build a freelancer invoicing app. Features: create invoices with line items (description, quantity, rate), add client details (name, email, address), calculate totals with tax, send invoices by email, and track payment status (draft, sent, paid, overdue). Dashboard shows: total outstanding, total paid this month, and overdue count. Design: clean and professional, white background with blue accents, similar to FreshBooks. Include authentication - each freelancer only sees their own invoices. ``` ```plaintext wrap theme={null} Build an invoicing app. ``` The comprehensive prompt generates a near-complete app in one shot. The sparse prompt generates something generic that needs many iterations to become useful. ### Describe the experience from the user's perspective Frame your prompt as if you're describing the app to a new user - what they see, what they do, what happens. ```plaintext wrap theme={null} When a user opens the app, they see a dashboard with their active projects. Clicking a project opens a detail page with a timeline of milestones and a list of tasks. They can add a new task with a title, description, and due date. Tasks can be marked complete with a checkbox. Completed tasks show with a strikethrough and move to the bottom. ``` ## Prompts for new apps ### Simple app ```plaintext wrap theme={null} Build a habit tracker app. Users can add habits (e.g., "Drink 8 glasses of water," "Read for 30 minutes"). Each day shows a checklist of habits to complete. Track streaks - show the current streak count next to each habit. Include a weekly view that shows completion rates as a heatmap calendar. Use a warm, motivational color scheme (orange and cream). Mobile-responsive. ``` ### Complex app ```plaintext wrap theme={null} Build a project management tool for small teams. Include: - Authentication with team workspaces (invite by email) - A project list on the left sidebar - Inside each project: a Kanban board with customizable columns - Task cards with: title, description, assignee, due date, priority (low/medium/high), and labels - A calendar view showing tasks by due date - Team member profiles with role badges (admin, member) - Activity feed showing recent actions across the workspace - Settings page for workspace name, member management, and billing Use Supabase for auth and database. Design: clean, professional, Notion-inspired aesthetic with a white and gray palette. ``` ### Mobile app ```plaintext wrap theme={null} Build a mobile fitness tracking app with Flutter. Screens: home dashboard (today's workout, calories, steps), workout library (categorized by muscle group), workout player (exercise name, timer, rep counter, rest intervals), progress tracker (charts showing weight/reps over time), and profile/settings. Use a dark theme with neon green accents. Include smooth transitions between screens and animated progress rings on the dashboard. ``` ## Prompts for features and iterations When iterating on an existing app, be specific about what to change and what to keep. ### Adding a feature ```plaintext wrap theme={null} Add a notification system. Users should see a bell icon in the header with an unread count badge. Clicking it opens a dropdown showing recent notifications (task assigned, comment added, due date approaching). Each notification has a timestamp and a link to the relevant item. Add a "Mark all as read" button. Store notifications in Supabase and mark them as read when viewed. ``` ### Changing design ```plaintext wrap theme={null} Switch the entire app to a dark theme. Background: #0F0F0F. Card backgrounds: #1A1A1A. Text: #E5E5E5. Accent color: keep the existing blue (#3B82F6) but brighten it slightly for dark backgrounds. Update all borders to a subtle #2A2A2A. Make sure charts and graphs remain readable on the dark background. ``` ### Fixing a specific issue ```plaintext wrap theme={null} The mobile navigation menu overlaps the page content when open. Fix it so the menu slides in from the left as an overlay with a semi-transparent backdrop. Tapping the backdrop should close the menu. Also, the menu items are too small to tap on mobile - increase the tap target height to at least 48px. ``` ## Prompts for Redesign Redesign prompts work differently from new builds. You're transforming something that exists, so describe what to keep and what to change. ### Full visual refresh ```plaintext wrap theme={null} Redesign my website at [url]. Keep all existing content, page structure, and navigation. Transform the visual design: update from the current serif typography to a modern sans-serif (DM Sans for headings, Inter for body), replace the muted color palette with a vibrant one (primary: #6366F1, accents: #EC4899), add more whitespace between sections, modernize the card components with subtle shadows and rounded corners, and improve the mobile layout so the hamburger menu has smooth animation. ``` ### Conversion-focused redesign ```plaintext wrap theme={null} Redesign the landing page at [url] to improve signups. Changes needed: move the email capture form above the fold, make the headline larger and benefit-focused, add a demo video below the hero, replace the generic stock photos with illustrations, add social proof (logos of companies, user count, testimonials) immediately after the hero, simplify the pricing section to reduce decision fatigue, and add a sticky CTA bar that appears on scroll. ``` ### Brand-aligned redesign ```plaintext wrap theme={null} Redesign the website at [url] to match our new brand identity. New brand guidelines: primary color #1E40AF, secondary #F59E0B, font family "Plus Jakarta Sans" for all text. The tone should feel modern and confident, not playful. Replace rounded corners with sharper edges. Use more structured grid layouts instead of the current free-flowing design. Keep all existing content. ``` ## Iteration strategies ### Small, focused prompts work best Instead of one massive prompt with 10 changes, make 2-3 changes at a time. This lets you see the impact of each change and catch issues early. ### Use visual edit for fine-tuning For pixel-level adjustments - spacing, font sizes, specific colors - [visual edit](/build/editor/visual-edit) is faster than writing a prompt. Click the element, make the change, done. ### Reference what Rocket already built When iterating, reference existing elements: "Make the sidebar navigation look like the header - same font weight and hover style" or "Apply the same card style from the dashboard to the settings page." ## Common mistakes "Use a useState hook with useEffect to fetch data on mount" - Rocket handles the implementation. Describe what you want the user to experience instead. "Make it look good" gives Rocket no direction. Instead: "Clean and minimal, similar to Linear's aesthetic - monochrome with one accent color, lots of whitespace, sharp typography." Apps have loading states, empty states, error states, and success states. Mention them: "Show a skeleton loader while data loads, a friendly empty state with an illustration when there are no items, and a toast notification on successful save." "Redesign the whole app, add 5 new features, and change the color scheme" in one prompt makes it hard to evaluate the result. Break it into focused iterations. For iteration patterns, complexity management, and testing strategies for Build tasks, see [Build best practices](/build/best-practices). ## Quick reference: prompt template Use this template as a starting point for any Build prompt: ```plaintext wrap theme={null} Build a [app type] for [target user]. Features: - [Feature 1 - describe what the user can do] - [Feature 2] - [Feature 3] User flow: [describe the main path a user takes through the app] Design: [color scheme, aesthetic reference, mood - e.g., "dark theme, Stripe-inspired, professional"] Data: [what data exists - users, projects, tasks, orders - and how it connects] Integrations: [Supabase, Stripe, external APIs, if any] ``` ## What's next? Frame strategic research questions effectively. Describe monitoring needs for Intelligence. Explore everything Build can create. Copy-paste prompts organized by role.