Skip to main content

​
Prompting in Rocket

Prompting is how you direct Rocket’s AI using clear, natural language.
You describe what you want - screens, logic, fixes, flows - and Rocket figures out the how. This guide focuses on the core concepts that make prompts work consistently in Rocket. It is designed to be practical and easy to follow, whether you’re new to AI tools or have experience with other platforms.
What you’ll learn:
  • The S.I.M.P.L.E. framework for writing effective prompts
  • Core prompting strategies (zero-shot, instructional, one-shot)
  • How to build features incrementally
  • Common mistakes and how to fix them

​
Start with clear intent

Strong prompting always starts with a simple question: What should this app, screen, or feature do - in one sentence?Write that sentence down first.
Then layer in:

What

What they can do (core actions)

Where

Where it lives (which screen, component, or flow)
Avoid vague prompts like: “Make this better”, “Fix the layout”, “Clean up the logic”These feel fast to write but are slow to fix. A slightly longer, more specific prompt is almost always faster overall.

​
The S.I.M.P.L.E. framework

Use the S.I.M.P.L.E. framework as a quick checklist before you send any substantial prompt.
LetterPrincipleWhat it means
SSpecificSay exactly what you want, not just how it should “feel”.
IIncrementalAsk for one focused change at a time.
MMeaningful contextInclude only the context Rocket actually needs.
PPattern‑awarePoint to existing screens, styles, or flows when helpful.
LLimited scopeState what not to touch to avoid drift.
EExplicit structureDescribe layout and order the way users experience it.
You don’t need to label each part in your prompt - just make sure these ideas are present.

​
S - Specific

Avoid vague goals like “clean this up” or “make it better.”
Vague: 
Make a screen that shows some user data.
Specific: 
Create a dashboard that shows name, email, and last login date from the `users` table.
Specific prompts are faster overall because you skip back‑and‑forth corrections.

​
I - Incremental

Break big ideas into small, safe steps.
Step 1: Build just the layout for the checkout page (no payment logic yet).
Step 2: Add basic form validation.
Step 3: Connect to the payment provider.
Each prompt should move the app forward in a way you can quickly review.

​
M - Meaningful context

Include only the details that change the outcome - enough to be clear, not a full spec.
This is the main analytics dashboard for marketing.
Users scan it quickly, often on laptops.
Focus on making key metrics readable at a glance.
If a teammate wouldn’t need a detail to build it, the AI probably doesn’t either.

​
P - Pattern-aware

When you already have good examples in your app, reuse them.
Create a settings page using the same card layout, spacing,
and button styles as the existing profile page.
Include sections for notifications, privacy, and account settings.
This keeps your app consistent without rewriting every requirement.

​
L - Limited scope

Tell Rocket what not to change so it doesn’t “help” too much.
Only update the header layout on this page.
Do not change navigation links, routes, or any data fetching logic.
Narrow prompts are safer, easier to review, and easier to undo.
Scoped edits: Use @ commands to automatically limit changes to specific files or folders, ensuring edits stay focused and predictable.Examples:
  • @pages/dashboard.jsx only update the header layout. Do not change navigation links or data fetching.
  • @components/card.jsx fix spacing between title and content. Keep all other styling unchanged.

​
E - Explicit structure

Describe the layout in the same top‑to‑bottom order a user experiences it.
Create a dashboard layout:
- Top: header with the user's name and a "New report" button.
- Middle: three metric cards in a row (revenue, active users, churn rate).
- Bottom: a table showing the last 20 events.
Logical order helps Rocket structure the screen cleanly on the first try.
Quick reference: S.I.M.P.L.E. framework
  • Specific - Say exactly what you want
  • Incremental - One focused change at a time
  • Meaningful context - Include only what Rocket needs
  • Pattern-aware - Reuse existing screens/styles when helpful
  • Limited scope - State what NOT to change
  • Explicit structure - Describe layout top-to-bottom
Before sending a prompt:
  1. Do you know exactly what “done” looks like?
  2. Is it Specific, Incremental, contextual, Pattern-aware, Limited, and Explicitly structured?
  3. Could you review the result in under 5 minutes?

​
Basic prompting strategies

Once you’re comfortable with S.I.M.P.L.E., these core strategies cover most day‑to‑day work.

Zero-shot

Direct instructionsUse when the task is small and clear, and you don’t need to match an existing pattern.
Create a screen that lists all orders placed in the last 7 days.
Combine with S, L, and E from S.I.M.P.L.E. to keep it specific, scoped, and structured.

Instructional

Step-by-step “how”Use when layout and structure really matter.
Build a form layout:
- Title centered at the top,
- Three input fields stacked vertically with 16px spacing,
- Submit button centered below the last field.
You’re telling Rocket how to build it, not just what to build.

One-shot

”Like this, but for X”Use when you already have a good example in your app and want to mirror it.
Create a billing settings page using the same card layout and spacing
as the existing profile page. Include sections for payment methods,
invoices, and subscription details.
This leans on the Pattern‑aware part of S.I.M.P.L.E.

​
Plan → Build → Refine

Think of your prompting workflow in three lightweight phases.
1

Plan just enough

Spend a minute writing down:
  • What you’re building
  • Who it’s for
  • The top 3 jobs it must do well
I'm building an internal CRM for our support team.
Top 3 jobs: 1) track conversations, 2) see customer history, 3) schedule follow-ups.
Start by creating a main dashboard layout that surfaces today's tasks and recently updated tickets.
2

Build in controlled steps

Use Incremental and Limited scope:
First, create the layout for the dashboard only.
Don't connect to real data yet - just use mock data.
Then:
Now connect this dashboard to the existing `tickets` table.
Keep the current layout exactly the same.
3

Refine safely

Once something basically works, avoid “start over” prompts. Instead:
The current version of this screen works correctly.
Now only improve the visual hierarchy:
- Keep all existing behavior and data loading,
- Focus on spacing, typography, and grouping related content.
Quick refinements: Use `/` commands like /Change Element to swap components or /Restructure Screen Layout to reorganize sections without rebuilding from scratch.Examples:
  • /Fix Layout Issues in pricing grid
  • /Update Content change "Subscribe" to "Get Started" in CTA buttons
  • @components/form.jsx improve spacing between form fields without changing validation logic

​
Prompt quality self‑check

Use the checklist from the S.I.M.P.L.E. framework Tip above before you send any prompt:
  1. Do you know exactly what “done” looks like?
  2. Is it Specific, Incremental, contextual, Pattern‑aware, Limited, and Explicitly structured?
  3. Could you review the result in under 5 minutes?
Quick check: If any answer is “no”, shrink the prompt or clarify the outcome. A slightly longer, more specific prompt is almost always faster overall than multiple back-and-forth corrections.

​
Common mistakes and how to fix them

These common prompting mistakes map directly to the S.I.M.P.L.E. principles. Use this as a reference when your prompts aren’t working as expected.
MistakeExampleWhy It FailsS.I.M.P.L.E. Fix
The Vague Vanisher”Make it look nice”Subjective, no clear anchorSpecific, Explicit structure
The Everything Bagel”Create a full e-commerce site with products, cart, checkout, user accounts, and admin dashboard”Too many responsibilities at onceIncremental, Limited scope
The Missing Data”Show all user data in a table""All” is undefined, no source specifiedSpecific, Meaningful context
The Silent Change”Clean this up”No definition of what stays the sameLimited scope, Explicit structure
The Assumption Trap”Make it user-friendly and fast”Assumes Rocket knows your preferencesSpecific, Meaningful context
The Reverse Order”Add a submit button, then create a form with name and email fields above it”Describes elements in wrong orderExplicit structure
The Constraint Gap”Update the header”No boundaries on what to changeSpecific, Limited scope

​
Detailed examples

​
1. The Vague Vanisher

Mistake: 
Make it look nice.
Why it fails:
  • “Nice” is subjective and open to interpretation
  • No anchor for what to keep vs. change
  • Rocket doesn’t know what “nice” means to you
Fix: 
Improve the visual design of this screen while keeping all logic the same.
Increase white space between sections, use a clean sans-serif font,
set body text to 14-16px, and add subtle 8px rounded corners and soft shadows
to cards so they stand out from the background.
S.I.M.P.L.E. principles: Specific, Explicit structure

​
2. The Everything Bagel

Mistake: 
Create a complete e-commerce site with product pages, shopping cart, checkout, user accounts, payment processing, order tracking, and admin dashboard.
Why it fails:
  • Too many responsibilities in one prompt
  • Hard to review, debug, or roll back
  • Rocket might miss details or create something incomplete
Fix: Break it into smaller prompts: 
Step 1: Create a product listing page with product cards showing image, name, price, and "Add to Cart" button.
Then build incrementally using iterative refinement. S.I.M.P.L.E. principles: Incremental, Limited scope

​
3. The Missing Data

Mistake: 
Show all the user data in a table.
Why it fails:
  • “All” is undefined
  • No source table, fields, ordering, or filters specified
  • Rocket doesn’t know which data, from where, or what fields to display
Fix: 
Display user data from the `users` table in a table format. Show columns for: user ID, name, email, registration date, and account status. Sort by registration date (newest first). Add a filter to show only active users.
S.I.M.P.L.E. principles: Specific, Meaningful context

​
4. The Assumption Trap

Mistake: 
Make it user-friendly and fast.
Why it fails:
  • Assumes Rocket knows your definition of “user-friendly” and “fast”
  • Leaves details up to interpretation
  • Different people have different standards
Fix: 
Use large input fields (minimum 44px height), minimal text, and a single-step submission flow. Optimize by lazy-loading images and implementing pagination for lists over 50 items.
S.I.M.P.L.E. principles: Specific, Meaningful context

​
5. The Silent Change

Mistake: 
Clean this up.
Why it fails:
  • No definition of what “clean” means
  • No boundaries on what should stay the same
  • Rocket might change things you want to keep
  • Unclear scope leads to unexpected modifications
Fix: 
Improve the code organization in the `utils` folder only:
- Refactor helper functions into separate files by category
- Add JSDoc comments to exported functions
- Do not change any function logic, parameters, or return values
- Do not modify files outside the `utils` folder
Better with commands: 
@utils/helpers.jsx refactor helper functions into separate files. Do not change function logic or parameters.
S.I.M.P.L.E. principles: Limited scope, Explicit structure

​
6. The Reverse Order

Mistake: 
Add a submit button, then create a form with name and email fields above it.
Why it fails:
  • Describes elements in the wrong order (bottom-to-top instead of top-to-bottom)
  • Confusing for Rocket to understand the layout
  • May result in incorrect structure
Fix: 
Create a form layout:
- Top: form title "Contact Us"
- Middle: name input field (required)
- Below name: email input field (required)
- Bottom: submit button labeled "Send Message"
S.I.M.P.L.E. principles: Explicit structure

​
7. The Constraint Gap

Mistake: 
Update the header.
Why it fails:
  • Too vague - what part of the header?
  • No boundaries on what can be changed
  • Might accidentally modify navigation, logo, or other header elements
  • No specific outcome defined
Fix: 
Update only the header text color and font size:
- Change header text color to #1a1a1a
- Increase font size to 24px
- Do not change header layout, navigation links, logo, or any other styling
- Keep all existing functionality unchanged
Better with commands: 
@components/header.jsx update only the text color and font size. Do not change layout or navigation.
S.I.M.P.L.E. principles: Specific, Limited scope
Quick reference: When a prompt isn’t working, check which S.I.M.P.L.E. principle it’s violating. Most mistakes fall into one of these categories: being too vague (S), asking for too much (I, L), missing context (M), or unclear structure (E).