I once shared a Rork app I'd built with a designer friend through TestFlight. The app worked well — features complete, logic solid, everything functioned as intended. I was genuinely proud of it.
Her first comment? "The concept is interesting, but it kind of looks like an internal business tool."
That landed. "Looks like a business tool" is designer-speak for "the UI has no personality." The functionality was there, but the first impression was costing me users before they'd even tapped a button.
What followed was a month of experimenting with how I wrote prompts. The core realization I arrived at: feature prompts and design prompts are completely different things, and you need both.
Why Rork Apps Default to a "Generic" Look
When you tell Rork's AI to build a task manager, it focuses on making the task management work. That's the right behavior. But the default styling it applies tends to lean toward standard React Native components — white backgrounds, gray borders, system font sizes. Functional, but uninspired.
This isn't a flaw in Rork. It's a gap in the instructions. If you only describe what the app should do, the AI fills in the how-it-should-look part on its own, defaulting to safe and neutral.
The fix is simple once you see it: tell it exactly how you want things to look, with the same specificity you use for features.
Separate Your Design Instructions from Feature Instructions
Here's what my prompts used to look like:
Build a task manager. Users can add tasks, delete them, and check them off.
And after the change:
Build a task manager. Users can add tasks, delete them, and check them off.
[Design]
- Dark mode base, background #0F0F0F, accent color indigo (#6366f1)
- Bold weights for headings, inspired by SF Pro Display
- Cards with large border radius (16px), card background #1C1C1E
- Generous spacing — padding 20px+, airy layout
- Filled buttons, not flat/text-only style
Same feature requirement. Dramatically different output. The second version produced something I'd actually show in an App Store screenshot.
Reference a Design System by Name
One of the most effective techniques I've found is naming a reference point — an app, a design system, or a visual style — and asking Rork to follow its principles.
For example:
Follow Apple Human Interface Guidelines for a native iOS look.
Use grouped list layouts, standard cell separators,
and a navigation bar styled like a standard iOS app.
Or:
Match the minimal, sharp visual tone of Notion or Linear.
Generous whitespace, near-monochromatic palette,
accent color only for interactive elements.
The AI understands what these styles look and feel like, and it incorporates those characteristics without you having to specify every detail. The key is using reference names as shorthand for a constellation of design decisions, not as templates to copy.
The Three-Point Formula: Color, Typography, Spacing
If I had to reduce good UI prompting to its essentials, it would be these three things:
Color (use hex codes):
Primary: #3B82F6
Background: #F9FAFB
Body text: #111827
Secondary text: #6B7280
Error: #EF4444
Success: #10B981
Hex codes are more reliable than descriptions like "a warm blue." Concrete values leave less room for interpretation.
Typography (use size and weight):
Page title: 24px, weight 700
Section heading: 18px, weight 600
Body: 15px, weight 400, line-height 1.6
Caption/secondary: 13px, weight 400, secondary color
Establishing type hierarchy in the prompt means the AI creates screens where text has visual priority — some things stand out, others recede.
Spacing (use pixel values):
Horizontal padding: 20px
Vertical section gap: 32px
Card inner padding: 16px
Button height: 50px minimum
"Generous spacing" is vague. "20px horizontal padding" is not.
A Real Before / After: Task App Home Screen
Here's a simplified comparison of what changes when you add design instructions.
Prompt without design guidance:
Show a list of tasks. Users can toggle between completed and incomplete.
→ Result: White background, gray-bordered list, default checkbox, standard font size. Functional but unmistakably basic.
Prompt with design guidance:
Show a list of tasks. Users can toggle between completed and incomplete.
[Design]
- Dark mode. Background #111111, card background #1E1E1E
- Task name: 16px / weight 500. Due date: 12px / 400 / gray
- Completion indicator: circle, unfilled for incomplete,
filled with #6366f1 for complete
- No separator lines — use 8px gap between cards instead
- FAB-style (Floating Action Button) add button, bottom right
→ Result: A clean dark UI with card-based layout and colored completion circles. The kind of screen that looks like a real app.
Same functionality. The only difference is five lines of design direction.
Build Your Own Design Template
Writing detailed design instructions every time isn't sustainable. The practical solution is to build a personal design template — a block of text you paste at the top of every new project.
[Design System — Apply to All Screens]
- Color: primary #4F46E5, background #FAFAFA, body text #1F2937
- Type: SF Pro / system font, title 20px/700, body 15px/400
- Radius: cards 12px, buttons 8px
- Spacing: horizontal padding 20px, section gap 24px
- Shadows: light (shadow-sm equivalent)
- Interactions: subtle scale on tap (0.97)
Keep this in a notes app. Paste and adjust for each project. The consistency it creates also makes your apps feel like they belong to the same family — useful if you're building a portfolio.
For a deeper look at prompt patterns that produce better UI, check out Rork UI generation prompt patterns and prompt engineering for app design.
The One Thing to Do Right Now
If your Rork app looks like a business tool, the features are already there. That's the hard part done.
The next step is adding five lines of design direction to your next prompt — even just hex codes for two colors and a font size for headings. You'll see the difference immediately.
Design in Rork isn't about fighting the AI. It's about giving it the same level of detail on the visual side that you already give it on the functional side. Once you start doing that, the gap between "this looks like a prototype" and "this looks like a real app" gets a lot smaller.