What are Gemini CLI templates?
Gemini CLI templates are finished UI designs you save in your project for Gemini to follow from the terminal. Reference the template with @ in your prompt, and add the GEMINI.md template from this page so Gemini CLI loads your design rules in every session and builds pages that look like one product.
How to use templates with Gemini CLI
Save the template in your project
Copy a template and save it as design/template.html in the project folder.
Add GEMINI.md
Save the template from this page as GEMINI.md at the project root. Gemini CLI loads it as context in every session.
Reference it with @
Run gemini in the project and ask for the page with @design/template.html in the prompt.
Check and refine
Open the page at phone and desktop width and ask for one fix at a time.
GEMINI.md template for design
Gemini CLI reads GEMINI.md files as project context at the start of every session. This template turns yours into a design brief, so Gemini uses your colours, type scale and components on every page.
GEMINI.md design template
A GEMINI.md context file that Gemini CLI loads in every session, so the pages it builds follow your template, colours and components.
GEMINI.md# Project context for Gemini ## Design Every page and component follows @design/template.html. ## Design source of truth - Match the BrowserMoon template in design/template.html for fonts, spacing, colours, corner radius, shadows and components. When in doubt, open it and copy what it does.
Why Gemini CLI needs a design to follow
Gemini CLI can read a whole project and change many files from one prompt in the terminal. Without a design to follow, it fills the gaps with generic choices, and each session can pick slightly different ones.
A template file and a GEMINI.md design brief give it one source of truth. Gemini loads the brief automatically and reads the template when you reference it, so every page it writes matches.
Gemini CLI templates for websites and apps
Begin with the landing page or the main app screen, ask Gemini to build it from the template and to split it into components, then build each next page in its own prompt.
Hero, landing page and dashboard templates suit Gemini CLI best, because one prompt can turn a template into a full set of components. Use /memory show to check that your GEMINI.md rules are loaded before a big change.
Gemini CLI vs Claude Code for building from a template
Both run in the terminal, read a project context file and reference files with @. Gemini CLI uses GEMINI.md and Claude Code uses CLAUDE.md, and the design rules inside can be the same. With a template and a context file, either one builds pages that match; there is a CLAUDE.md version on the Claude Code templates page.
Who uses Gemini CLI templates
Gemini CLI templates are used by developers who work from the terminal and want Gemini to build UI that looks designed: building a marketing site or app screens in one session, converting a template into components for an existing project, or keeping many pages consistent with one GEMINI.md brief.
Best Gemini CLI templates by use case
Landing page template for Gemini CLI
One prompt turns the template into a full set of section components.
Hero section template for Gemini CLI
A strong first screen for a Next.js, Astro or plain HTML site.
Dashboard template for Gemini CLI
Charts and tables Gemini builds across several files from the terminal.
Navigation template for Gemini CLI
A navigation bar with a mobile menu, matched to the rest of the site.
Pricing template for Gemini CLI
A pricing section that follows the template's type and spacing.
Tips for better results in Gemini CLI
Reference files with @
Point Gemini at the template file instead of pasting it into the prompt.
Check loaded context
Run /memory show to confirm your GEMINI.md rules are loaded.
Refresh after edits
Run /memory refresh after you change GEMINI.md in a running session.
One page per prompt
Smaller prompts keep the design consistent and the diff easy to review.
Gemini CLI vs Claude Code
Gemini CLI and Claude Code are both terminal agents that read a project context file, reference files with @ and edit many files at once. Many developers keep both installed and use whichever suits the task.
For UI work the setup is the same: a template file in the project and a short context file with your design rules. Gemini reads GEMINI.md and Claude Code reads CLAUDE.md, so you can keep the same rules in both.
What to ask Gemini CLI after you paste a template
- @design/template.html Build the landing page as section components in this project.
- Add a pricing section that matches the hero's type and spacing.
- Check this page at 375px and fix anything that overflows.
- Add the design rules you used to GEMINI.md.
Common mistakes with Gemini CLI templates
No GEMINI.md
Without it, every session starts with no design rules.
Pasting the template into the prompt
Reference the file with @ so Gemini can read it again later.
Accepting every edit unread
Review proposed changes before approving them, especially in shared components.
Gemini CLI templates by category
Frequently asked questions
What are Gemini CLI templates?
Finished UI designs you save in your project for Gemini CLI to follow, plus a GEMINI.md file that keeps every session on design.
Where does GEMINI.md go?
At the root of your project. Gemini CLI also reads a global ~/.gemini/GEMINI.md and GEMINI.md files in subfolders, and combines them.
How do I reference a template in Gemini CLI?
Type @ followed by the path, for example @design/template.html, in your prompt. Gemini reads the file before it answers.
Are the Gemini CLI templates free?
Browsing and previewing are free. Copying a template and the GEMINI.md template needs a BrowserMoon licence.
Do the templates work with React and Next.js?
Yes. Gemini CLI converts the HTML and CSS into components for your framework.
Can I use the same design rules in Claude Code?
Yes. Save the same rules as CLAUDE.md for Claude Code or AGENTS.md for Codex; the template file works in every tool.
Can Gemini CLI create GEMINI.md for me?
Yes. Run /init in your project and Gemini drafts a GEMINI.md from your code. Add the design rules from this page to it.
Is Gemini CLI free to use?
Gemini CLI is open source and has a free usage tier with a Google account. The templates on this page need a BrowserMoon licence to copy.
Templates for other AI coding tools