Skip to main content
Four dark phone screens of a hiking app that Rork drew in Design mode: Discover with trails near Bergen, Trail with an elevation profile, On the trail with a live route map, and Log with hikes this year

A real Design mode proposal: “A dark, photo-led hiking companion that finds the best trails near you, then walks with you to the summit.” No code exists yet.

Design mode turns Rork into an AI app designer: it designs your mobile app with AI before any code exists. Rork asks a few questions about the style, then draws three or four screens of your iPhone, Android, or web app. It writes no code until you press Build. It is the cheap way to decide how your app looks. Changing a picture costs far less than rebuilding a working app. So you can try another palette, another layout, or another first screen while you have design credits, before anything is built. For a new app, a Plan mode plan draws the screens too. Pick Design mode when the look is the question, and Plan mode when the whole app is.

​
Turn on Design mode

The mode menu sits next to the model picker in the composer. It shows the current mode, Build by default. Open it and pick Design.
The Rork composer with the mode menu open. Three rows: Build, Build and edit your app. Plan, Plan the features and screens before building. Design, Explore the look before building.

Design reads “Explore the look before building”.

Only one mode is on at a time: picking Design turns Plan off.
On the home screen, the Design row belongs to paid plans. Rork tests a design-first start with some free accounts: they start in Design automatically and may not see the mode menu at all. Free credits cover design, and building your app needs a plan. See Plans & Subscriptions.

​
How a design comes together

1

Describe the app

Say what the app is for and, if you know it, how it should feel. “A calm habit tracker with daily check-ins, streaks and weekly stats” is enough.
2

Answer the questions

Rork asks one short batch of questions before it draws anything, usually about the main screen, the layout, and the colors. Most answers come with a small picture of the style they stand for. Every question also offers Surprise me and an Other… box for your own words. Press Submit when you are done.
3

Watch the screens arrive

The Design mode panel opens next to the chat. One line at the top says what the app is and how it feels. The screens fill in one by one, each with its name under it.
4

Change what you do not like

Ask for a change in chat. A change to one or two screens redraws only those. A new style redraws the whole set.
5

Press Build

The Review Design card waits at the bottom of the chat. View Design reopens the screens and Build turns them into a working app.
A Rork Questions card on question 3 of 3, What mood should the color direction have, with palette tiles named Warm roasted tones like espresso and cream, Dark moody like a late-night espresso bar, Bright and fresh like a modern specialty roastery, and Surprise me, then an Other field and Submit

A color question. Each answer shows its palette, and Surprise me leaves the choice to Rork.

After you answer, Rork does not ask again before it draws. Anything your answers leave open, Rork decides, and you correct it after you see the screens.
Rork with the chat on the left and the Design mode panel on the right. The chat shows the answers to three design questions and a Review Design card with View Design and Build. The panel shows four screens of a plant care app: Today, My Plants, Plant Detail and Add Plant

Design mode in Rork: your answers and the Review Design card in the chat, the drawn screens in the Design mode panel.

​
What a design includes

Four dark phone screens of a habit tracker that Rork drew in Design mode: Today with a daily score, Streaks, one Habit opened in full, and New habit

A habit tracker: the main moment (Today), a list (Streaks), one item in full (Habit), and adding one (New habit).

  • 3 or 4 screens, each with a different job: the main moment of the app, a list or feed, one item opened in full, progress, or a first-run screen. Never two screens that say the same thing, and never a settings screen.
  • One look across all screens. The same colors, type, and icons on every screen, so the set reads as one app.
  • Real content in your language: real names, amounts, and times, not placeholder text.
  • Your platform’s own controls. An iPhone design uses iPhone controls and navigation, an Android design uses Android ones, and a web design uses full-width desktop layouts.
The screens are pictures, not a running app. You cannot tap them, but you can open each one large. If you name a reference app or a visual style, Rork can look it up on the web first and carry what it sees into the design. Ask “show me the references” and it shows them in chat before it draws.

​
Examples of mobile app designs made with AI

Every proposal gets its own look. These are real Design mode proposals, shown as Rork drew them.
Four bright phone screens of a city guide that Rork drew: Nearby, Guide, Place and Saved, with sunlit photos of Lisbon

“A bright, sun-bleached city companion where every place comes with a short story worth reading before you go.”

Four glassy phone screens of a task tracker that Rork drew: Projects, Today, a Kitchen Remodel project, and Stats

“A bright, glassy task tracker where you flick through your projects like cards and every layer floats over a soft color wash.”

Four phone screens of a retro Snake game that Rork drew: Arcade, Run, New best and Scores, in green handheld style

“An endless Snake that feels like a beloved 90s handheld.” Games get a design too.

​
Choose one of four designs

Some Design mode sessions start with a choice instead of a full set. Rork tests this with some accounts, so you may not see it. Rork draws your app’s Home screen four different ways and shows Choose a design for your app, with the line “One screen, four directions. Select your favorite to design the remaining screens.”
  • Click a design to select it. The expand button under each design opens it large, and Select this design there marks it.
  • The chat card reads Choose a design direction until you pick, then Design 2 selected (or whichever number you chose). View designs reopens all four.
  • Confirm with Use this design on the chat card. Rork keeps that Home screen and draws three more screens in the same look.
  • To change one design before you choose, say so in chat, for example “Make Design 2 cleaner”. Only that design is redrawn. If the change fails, press Retry changes.
  • None of the four fit? Generate other designs asks what to change in chat, then draws four new designs.

​
Tutorial 1: design a new app

This walkthrough takes a few minutes. You end with approved screens and a running app.
1

Pick Design and send your idea

On the home screen, open the mode menu and pick Design. Then send:
2

Answer the questions

Pick the answers that feel right, or Surprise me where you have no opinion. Press Submit.
3

Look at the screens

The screens arrive in the Design mode panel, one by one. Read the line at the top: it is Rork’s short description of your app. Open a screen to see it large.
4

Ask for one change

Try a small change first, so you see how cheap it is:
5

Press Build

Press Build on the Review Design card. Rork sends Build a working app from the approved design. for you and writes the app.
Write the look into your first message and Rork has less to ask. “A dark, smoky roastery site with big photo cards” answers most of the questions before Rork asks them.

​
Tutorial 2: design a website

Design mode works for web apps too. A web design uses wide desktop sections instead of phone screens.
1

Pick Design and describe the site

2

Answer the questions and watch the sections arrive

Each picture is one full-width page of the site, like a map, a detail page, or a list.
Four wide desktop pages of a trail finder website that Rork drew in Design mode: Discover with a full-screen map, Trail with an elevation profile, Trails with filters, and Logbook with a table of hikes

A real web design: four full-width pages of a trail finder, drawn before any code.

3

Change it and build

Ask for changes in chat, then press Build on the Review Design card.

​
Tutorial 3: change a design for very little

Short, specific requests work best. Each of these redraws one or two screens, not the whole set:
To start over with a new style, say so plainly. Rork redraws all the screens:
If too few screens come out, the Review Design card shows Try design again in place of Build. Press it to draw the design again before anything is built.

​
After you press Build

On a paid plan, Build sends Build a working app from the approved design. and Rork writes the app. On the free plan, Build opens the plan picker under the title Turn your design into a real app. Pick a plan and the build continues.
A Review Design card in the Rork chat listing three screens, with View Design and Built shown below it

The Review Design card after the build: it shows Built and keeps View Design.

  • Rork saves the chosen look to .rork/DESIGN.md: the direction, colors, type, and screen decisions. Rork reads that file on later changes, so new screens keep the same look. Open it in More → Code, in the .rork folder.
  • The Design tab closes when the build starts. Find the proposal again in More → Design.
  • On a phone, the Design tab also has a floating Build button.

​
What Design mode cannot do

  • It does not write code. A design turn only asks, draws, and waits for you.
  • The screens are pictures. You cannot tap through them like a prototype.
  • The first proposal has 3 or 4 screens. Ask for more screens after the build, in chat.
  • While a design session is open, the mode menu hides. Build is the way forward.
  • The built app follows the design closely, but it is real code, not a copy of the pictures. Check the preview and ask for fixes as usual.

​
FAQ

Yes, but design credits, not build credits. The free plan includes a monthly allowance for designing. Turning an approved design into a working app needs a paid plan. See Build credits vs Cloud credits.
Free credits cover design, so on the free plan Rork can design your app before you pay. Turning the design into a working app needs a paid plan. See Plans & Subscriptions.
Yes. Every screen in a proposal uses the same colors, type, and icons. After the build, Rork keeps the look in .rork/DESIGN.md, so new screens match the ones you approved.
Yes. Pick Build in the mode menu before you send, and Rork builds without a design. To keep the design but skip changes, press Build on the first proposal.
Yes. Attach it with + → Upload image and say what you like about it. Rork uses it as a style or content reference for the screens.
Design mode settles the look. Plan mode settles the whole app: features, screens, flow, and goals, and for a new app it draws the screens as well. See Plan mode.
Press View Design on the Review Design card. After the build, open More → Design.
It is on the Review Design card at the bottom of the chat. On a phone, the Design tab also has a floating Build button.

​
Next steps

Plan mode

Agree on features, screens, and flow before you build.

How the agent works

Build, Plan, and Design side by side.

Element Selection

After the build, point at a part of the app and change it.

Images, video, and 3D

Generate the pictures and sounds your app needs.