Prompt, design & code generation

Watch it done (real recording)

Watch: the complete AI workflow, the idea, the follow-up questions, the answers, and the live build (time-compressed).

This chapter is a deep dive into how a prompt becomes design and code. It covers the skill system that guides every run, the two chat modes, the scoping chips, attaching reference files, voice input, and how to read the generated code.

The short version: you write what you want, FlutterGo picks the right skills, and the agent produces real Dart/Flutter code, "scaffold, theme, screens, and live preview," as the Android and iOS app chip on the studio home puts it.

Everything below uses the exact buttons you see on screen, so keep your project open while you read.

What you need#

• You know the basics of talking to the agent (Working with the AI agent).
• You have a project open, or you are on the studio home ready to create one.

How to do it#

1. Start from the studio home (or your project)#

On the studio home, the prompt box asks "What Android and iOS app do you want to build?" territory, type your idea, keep the Android and iOS app chip selected, and press Send.

The studio home. ① prompt box, ② Android and iOS app output type, ③ Design mode selector, ④ Send.

The Android and iOS app chip means: "Real Dart/Flutter code, scaffold, theme, screens, and live preview."

2. Understand the skill behind your prompt#

Every Flutter run is guided by the fluttergo-pipeline skill. It appears as a chip in the form Skill: {title}. Skills are small instruction packs the agent loads before working. The catalogue includes these families:

You don't manage these, they are injected on every run. To detach the active skill, use Clear active skill on the chip.

3. Choose Design mode or Ask mode#

Click the mode selector next to the composer:

• Design (Design mode): "For creating or changing concrete outputs: pages, prototypes, live artifacts, slides, images, videos, HyperFrames, audio, dashboards, and project files." This is the mode that generates and edits code.
• Ask (Ask mode): "For quick answers, edits, planning, and discussion without assuming a design artifact must be created." Nothing in your project changes.

Tip: Use Ask first for anything you are unsure about, "Help me decide the best structure for this landing page." Then switch to Design to build it.

4. Pick the design system for this turn#

The design system decides colors, typography, and component styling. In the composer, open the design system picker ("Choose a design system"):

• Pick one of your systems, you'll see "Design system switched to {title}".
• Pick "None, freeform" to not anchor to a system this turn ("Don't anchor to a system this turn").
• On the studio home, the Style control defaults to Auto: "Automatically matches the best design system and visual style for the current prompt."

5. Scope to files and pages#

Two chips narrow what the agent touches:

• Editing chip (current design file): open any design file and the composer shows Editing plus the file name; the placeholder becomes "Ask FlutterGo AI to change {file}...". Your prompt now targets that file.
• App pages: click the selector (default "All pages ({count})"), search with "Search pages…", and tag pages. The chip then reads "{count} pages tagged", only those pages are in scope for this message.

6. Attach images and references#

Click +, the tooltip reads "Attach files (or paste / drop)". Attach:

• Screenshots of designs you like ("match this style").
• Real content, copy, product photos, logos.
• Documents the app should reflect.

You can paste from the clipboard or drag files straight onto the composer. Remove a staged file with its ×. You can also type @ to reference Design Files, tabs, plugins, skills, MCP servers, and connectors by name.

7. Or speak your prompt#

Click Dictate (the microphone). It switches to "Listening… click to stop" while it transcribes into the prompt box. Review the text, then send as usual.

8. Read the generated code#

Your app's code is always inspectable. In the Flutter live preview panel, switch between the Preview and Code tabs, or use the Show code / Hide code toggle. The file list (Files) lets you open any Dart or pubspec file; empty projects show "No Dart or pubspec files yet. Generated code will appear here."

Success: The generated Dart is standard Flutter with no lock-in. Once synced to GitHub, your project is a normal Flutter repository you can open in any IDE.

9. Regenerate and refine#

There is no separate "regenerate" button, refining is just the next prompt:

• Not happy with a change? Say "revert the last change", adjust your prompt, and send again.
• Want a variation? Describe the difference: "same screen, but with a bottom navigation bar instead of tabs."
• If a run failed to produce output, send the prompt again (transient model errors show a Retry action where applicable).

Common mistake: Rewriting the whole prompt from scratch each round. Iterate instead, the agent keeps the conversation context, so "make the cards smaller" is enough.

Troubleshooting#

Problem: The output ignored my design system. Possible causes: The picker was set to "None, freeform", or Auto matched a different style. Solution:

1. Open the design system picker in the composer.
2. Select your system explicitly, wait for "Design system switched to {title}".
3. Re-send the prompt.

Problem: The agent edited pages I did not tag. Possible causes: The App pages chip was on "All pages"; tags apply per message. Solution:

1. Tag the pages again, tags are for this message.
2. Confirm the chip shows "{count} pages tagged" before sending.

Problem: My attachment did not upload. Possible causes: Network hiccup during upload. Solution:

1. Look for the "Attachment upload failed" notice.
2. Remove the failed chip and attach the file again.
3. If it keeps failing, paste the image directly into the composer instead.

Problem: The Code tab is empty. Possible causes: The project has no generated files yet. Solution:

1. The panel will say "No Dart or pubspec files yet. Generated code will appear here."
2. Send a build prompt first (the agent scaffolds pubspec.yaml and lib/main.dart).

FAQ#

What exactly does the fluttergo-pipeline skill do? It is the orchestration skill: it reads your prompt, picks the right generation, backend, and repair skills, and sequences the run. It is attached to every Flutter project automatically.

Is Design mode the same as "design only"? No. Design mode is the full generation mode, it can change layout, logic, navigation, data, and packages. Ask mode is the one that changes nothing.

Can I use my own fonts and colors? Yes, set up a design system (sidebar, then Design systems) and select it in the composer. New generations then use your colors, type, spacing, and logo.

Can I paste a Figma screen? You can attach or paste any image as a reference. On the studio home there is also a From Figma starter chip that migrates a Figma frame into the active design system.

Does dictation work in any language? Dictation uses your browser's speech recognition, so language support follows your browser settings.

Can I edit the code by hand? Yes, open the Code tab and edit; saving is a safe point that syncs to GitHub when connected. Most users let the agent do the editing.

Where to go next#

• Working with the AI agent, prompt-writing rules and the full composer tour.
• Preview, run & build, see your generation running.
• Testing & debugging, when a generation does not compile.