Design first — choose the look before the build
In shortSwitch on Design first on Projects and press Build it. Within a minute you see three finished-looking first screens of your idea, each in a different style, on desktop and phone. Load more, see variations, tweak colours, corners and fonts, or ask for an adjustment — then press Build with your favourite, and the whole app follows that look.
A first build that guesses the look is the one people most often start again. Design first shows you several finished first screens of your idea — drawn at once by fast AI models, before anything is built. You pick the one you like, and the look you picked is what the whole app is built in: its colours, fonts, corners and how photos are framed.
How do I use Design first?
Section titled “How do I use Design first?”-
On Projects, describe your app in the prompt box.
-
Switch on Design first. It turns orange, and so do the box’s border and Build it. The hint under the box reads Enter to design.
-
Press Build it. The Design first window opens — nothing has been created yet.
-
Watch the screens appear. The first to finish takes the large stage; the others fill the thumbnails below. Click any thumbnail to put it on the stage.
-
When one feels right, press Build name (for example Build City of Brookhaven). The project is created in that look and its first build begins.
What am I looking at?
Section titled “What am I looking at?”- The top shows your brief and a clock: seconds while the screens draw, then Ready to build.
- The stage shows one screen large. Each screen is one finished page — not a wireframe — using your own words. A site (somewhere people arrive to discover, book or buy) is drawn as its landing page; a tool (something opened to do a job) is drawn as its main working screen, full of realistic content.
- The thumbnails show every screen with its product name and style, such as Soft pastel, Quiet luxury or Swiss minimal, and a count like 3 ready · 0 still drawing. You can pick a screen as soon as it is on view, even while it is still drawing.
- Desktop / Phone shows the same page at computer width or in a phone frame. Every screen is drawn to work at both sizes.
Before the first screen appears, the stage shows short notes about what is happening — Reading your brief…, Nothing is built yet: this is only the look. If a site needs photographs, MonstarX draws a few once and every screen uses the same ones.
Can I see more options?
Section titled “Can I see more options?”- Load 3 more shows three more directions in other styles (they are drawn while you look at the first ones). You can go up to nine.
- See 5 variations restyles the screen on the stage five ways — the same product, words and sections in five new styles: Glass, Ink, Night, Editorial and Signal. The variations open as a new set whose first thumbnail is the original; switch between sets with the arrows at the top. You can ask for variations three times in a session.
How do I change a screen?
Section titled “How do I change a screen?”Tweak — instant, no AI needed. The panel beside the stage changes the whole page at once:
- Main colour — nine swatches, starting with the screen’s own colours, or any colour you choose.
- Corners — Sharp, Soft or Round.
- Type — ten font pairs.
The thumbnail follows, and the build uses your tweaks. Reset tweaks puts the original back.
Adjust — describe a change in words, such as warmer, darker or use our green #2F6B4F, and press Adjust. The selected screen is redrawn with your change and placed next to it, captioned with what you asked. You can make up to six adjustments in a session.
What happens when I build?
Section titled “What happens when I build?”MonstarX creates the project under the chosen screen’s name, uploads your attachments, keeps the screen (at desktop and phone size) as the project’s design, and starts the first build. The builder follows it:
- The look — colours, fonts, corners, light or dark — carries through every page of the app.
- The page the sample shows (the home page of a site, or the main screen of a tool) follows its layout and order, and the builder compares its work with the sample as it goes.
- The pages and features still come from your description. The sample shows one page; the app gets everything you asked for.
- The photographs in the sample become the app’s own pictures.
Your first message in the chat carries a Design first chip with the name, the style and its colours. Click it to see the chosen screen full size, at desktop and phone width.
Can I skip it or close it?
Section titled “Can I skip it or close it?”- Skip and build now builds without a chosen look, as if Design first were off.
- Closing the window (the ×, Esc or clicking outside) asks first — Close Design first? All the designs, variations, and adjustments in this session will be lost. Your description and files stay in the prompt box.
- Reloading the page with the same description shows the same screens again, and draws only what had not finished.
Keyboard: ← and → or 1–9 move between screens, and Enter builds.
Does Design first use my credits?
Section titled “Does Design first use my credits?”Yes — drawing screens is AI work, charged to your plan like other requests. It is listed in Usage as Design first, under Not in an app, and never counts against the premium-model allowance, because you do not choose these models. A session with every variation uses more than one that picks from the first three. If your plan has no room left, the window cannot draw.
Frequently asked questions
Section titled “Frequently asked questions”Does the sample decide which pages my app has?
No. The sample decides the look and the layout of the one page it shows. The pages and features come from your description, and your description wins wherever the two disagree.
Can I attach a logo or a screenshot of a site I like?
Yes. Pictures attached to your brief (up to three) are shown to the design models, which take colours and character from them.
Why is Design first missing?
It is only in the signed-in prompt box on Projects, not on the home page. A request made of documents alone, with no words, builds as usual — type a sentence to design from.
Can I change the look after the build?
Yes. Ask in the chat — for example _make the buttons round and the green darker_ — or use Edit mode.
Are the screens safe to open?
Yes. Every screen is cleaned before it is shown: scripts and outside content are removed, so a screen can only display.