Templates & design systems

Templates and design systems are the two big reuse tools in FlutterGo.AI. They save time and keep your work consistent.

A template is a ready-made starter app. Instead of describing everything from zero, you pick a template and the AI builds from it. You can use public templates shared with everyone, or save your own projects as templates.

A design system is a set of visual rules, colors, fonts, spacing, and voice. When you attach a design system to a project, the AI keeps everything on-brand. You can pick an official preset, or teach FlutterGo.AI your own brand and create a custom system.

Here we show where to find both, how to use them, and how to create and manage your own.

What you need#

• You need at least one project idea, or an existing brand you want to capture.
• To create your own design system from a repository, have the GitHub URL ready.
• No design skills are needed. The AI does the heavy lifting.

How to do it#

1. Find public templates on the Home screen#

On the Home screen, scroll up past the prompt box (the hint says "Scroll up to explore more templates"). You'll see the Public templates section. Its subtitle explains it: "Starter apps shared with everyone. Pick one to begin." Each card carries a Public template badge.

Public templates: starter apps shared with everyone.

2. Start a project from a template#

Click a template card to begin a project from it. You can also go through the New project dialog: open it, choose the From template tab (titled Start from a template), pick a template under the Template label, and click Create from template.

Tip: If the tab says "No templates yet", the empty state tells you how to make one: "Open any project, then use the Share menu inside the file viewer to convert it into a template. Templates show up here."

3. Save your own project as a template#

Happy with a project? Turn it into a template so you can reuse it:

1. Open the project and open a file in the file viewer.
2. Click Share in the viewer toolbar.
3. In the SAVE section, click Save as template….
4. Give it a Template name and an optional short description.

You can also select projects in the projects list and use Save as template to convert several at once.

4. Understand design systems#

A design system tells the AI how your work should look and feel. When you create a project, the Design system picker offers:

Important: Selected design systems are inspiration only. The AI follows the style closely but may adapt details to fit your app.

5. Browse your design systems#

Click Design systems in the left sidebar. The manager has three areas:

• Your systems, systems you created. Filter by All, Published, or Draft.
• Official presets, ready-made systems that ship with FlutterGo.AI.
• Enterprise, shared team systems ("coming soon").

The Design systems area in the sidebar.

6. Create your own design system#

In Your systems, find the card Create new design system. Its description says: "Teach FlutterGo AI your brand, product, code, assets, and design references." Click Create.

In the create flow:

1. Fill in Describe your brand or product. Example placeholder: "e.g. Mission Impastabowl: fast-casual pasta restaurant with in-store touchscreen kiosk, mobile app and website".
2. Optionally add a GitHub repository URL (https://github.com/owner/repo) so the AI can learn from your real product code.
3. Optionally describe style details ("e.g. We use a warm, earthy color palette with rounded corners. Our brand voice is playful but professional...").
4. Optionally upload brand assets like logos and fonts.
5. Click Generate. The button shows Opening project... and a design-system workspace opens.

7. Review and publish your design system#

The AI builds a draft: tokens, preview cards, and a DESIGN.md spec. The status line explains: "FlutterGo AI is ready for review. Give feedback on the work so far, then publish when it is useful for future projects." Chat with the AI to request changes, then publish. Your system's status changes from Draft to Published.

Success: A published system appears in the Design system picker for every new project.

8. Set a default design system#

In Your systems, open a system's menu and click Make default. The system gets a Default badge, and the New project dialog marks it with a DEFAULT badge so it is preselected for new work.

Tip: On the Home screen, the prompt box has a Style control. Auto "automatically matches the best design system and visual style for the current prompt", handy when you have many systems.

Common mistake: Writing only one word (like "modern") in the brand description. The AI needs real context. If you give too little, you'll see: "Tell FlutterGo AI about the company or design system first."

Troubleshooting#

Problem: The From template tab says "No templates yet". Possible causes: You have not saved any project as a template. Solution:

1. Open any finished project.
2. Open a file, click Share, then Save as template….
3. Reopen the New project dialog, your template now appears.

Problem: Generate fails with "Could not generate this design system." Possible causes: A temporary agent or connection problem. Solution:

1. Check your brand description is filled in.
2. Click Generate again.
3. If it keeps failing, try removing the GitHub URL and generating from the description only.

Problem: My design system does not show up when creating a project. Possible causes: The system is still a Draft, or it is hidden from the home gallery. Solution:

1. Open Design systems and publish the system.
2. In Settings under Design Systems, check Show in home gallery for that system.

FAQ#

What is the difference between a template and a design system? A template is a full starter app (screens and content). A design system is a set of visual rules (colors, type, spacing) applied to whatever you build.

Can I delete a public template? You can delete templates you saved. Hover the card and use the delete action. A dialog confirms: "Delete "{name}"? This cannot be undone."

Do design systems change existing projects? No. Picking a design system affects new generations. Inside a project you can switch systems for future turns without breaking what is already built.

Can I import a design system instead of describing it? Yes. Settings, then Design Systems supports Import from GitHub, Import from shadcn, and Import from project.

What does the DEFAULT badge mean? It marks the design system that is preselected for new projects. Change it any time with Make default.

Can my team share one design system? Team-shared systems appear under Enterprise in the Design systems area, which is marked "coming soon."

Where to go next#

• Creating a project
• Sharing your project
• Your code: export, download & local mode