FURTHER READING
Further Reading for Gemini
Curated Gemini CLI tutorials, documentation and walkthroughs for design work, as listed in the published guide.
Gemini 
OpenDesign Design With
Gemini in
OpenDesign.
How to design interfaces with Gemini CLI in OpenDesign: a whiteboard photo as the reference, GEMINI.md as the rulebook, one operations-dashboard task from brief to reviewed file, and the limits to know before you start.
THREE WAYS INTO THIS GEMINI CLI GUIDE
Pick Your Entry Point Into Gemini CLI
THIS GUIDE · UI DESIGN
Generate a Product Interface With Gemini CLI
The core path here: a brief, reference images, design rules held in context, and an HTML artifact you review yourself.
Read this guide SETUPSet Up Gemini From Zero
Start from a clean machine and walk through to a Gemini CLI that can build and check its own UI output.
Go to setup COMPARISONCompare Gemini With Other Agents
Where Gemini CLI's multimodal and large-context strengths sit against Codex, Claude Code and Cursor, and when another workflow suits better.
See the comparisonOn This Page Example
One Complete Gemini Design Task
One Gemini Task: From Whiteboard Brief to Rendered Interface
Follow one task through its whole loop: the brief and constraints you hand to Gemini, the artifact it returns, and the checks that remain yours before calling it finished. The interface below is an illustrative example built for this page, not a recorded Gemini run.
1Design Brief and Constraints
BriefTurn the attached whiteboard photo into an operations dashboard: four headline numbers, a weekly volume chart and a queue of incidents. One screen on desktop, a scrollable summary on a phone.
- Design systemPaper canvas from OpenDesign: Albert Sans, a single green accent
- Breakpoints1440px desktop and 390px mobile, no horizontal scroll
- InteractionsDate range control, incident filters, and keyboard navigation through the queue
- OutputOne self-contained HTML file with stable
data-od-idhooks
2Who Does What: You, Gemini CLI and OpenDesign
- You
You write the brief, choose the design system and set the acceptance criteria.
- Gemini
Gemini CLI plans the layout, writes the HTML, CSS and JavaScript, then revises on request.
- OpenDesign
OpenDesign supplies the design system and skill, renders the preview and keeps each version as a file in the project.
- Review
Before handoff you check visual hierarchy, spacing on the 8px grid, both breakpoints and every interaction.
3Gemini's Artifact: The Operations Dashboard at 1440px and 390px
4Review Before Handoff
Layout
Grid and Spacing
The four cards, chart and queue all sit on one 8px grid; nothing collides at 1440 or 390.
Hierarchy
Visual Hierarchy
Scan order runs headline numbers, then chart, then queue; the accent touches a single bar and a single critical pill.
Responsive
Mobile Layout
At mobile, two numbers per row, chart beneath, queue as a list; the date range collapses into a sheet.
Interaction
Interaction Checks
Change the range, filter to critical only, and arrow-key through the queue.
Fit
Where Gemini CLI Fits Your Design Task — and Where It Does Not
Gemini Fits When
- Multimodal screenshot → UI. Gemini's image understanding reads a reference shot into responsive markup and can compare the render back against it.
- 1M-token context. An entire design system, component library and reference set fit in one window, so output reuses your real primitives instead of inventing styles.
- GEMINI.md + MCP. The GEMINI.md context file carries your conventions on every run; the Figma MCP server pulls real design context into the code.
- Open and free to start. Apache-2.0, with a generous free tier through a Google account and BYOK via the Gemini API.
Choose Another Workflow When
- You need editable vector files. What comes back is HTML, not an editable design document. Look at a separate vector workflow if your asset format demands it.
- You have no reference and no constraints. With no design system or examples to work from, Gemini leans toward a generic look; write the brief before you generate.
- You do not have the credential this agent needs. Required: Google account (free tier) or Gemini API key (bring your own key). OpenDesign does not provide or proxy credentials.
- Your team works in Antigravity or Claude Code. Those agents have their own pages; the workspace itself does not change, but setup does. See related agents.
Compatibility
Gemini Requirements Before You Start
This page treats Gemini as an agent connected through the OpenDesign desktop app. Published references were checked on 6 September 2026.
Tool ScopeGemini, by Google
Google ships Gemini CLI as an open-source (Apache-2.0) terminal AI agent. It reads codebases, edits files, runs commands, fetches the web, and grounds answers with Google Search. This page focuses on designing interfaces with Gemini through OpenDesign, not on Gemini's own interface. OpenDesign's setup notes list the available agents.
Accounts and AuthenticationGoogle account (free tier) or Gemini API
Credential options: a Google account (free tier) or a Gemini API key (BYOK). Authenticate with either one; credentials remain on your machine. This page promises no quota or price.
System and VersionsDesktop app or source
Desktop builds appear on the download page. The Node.js and pnpm requirements in the source quickstart apply only when running from source, not when installing a desktop package. Minimum compatible Gemini version: not verified here.
Connection CheckThe success signal
Use the connection instructions shown in your installed version, then try a small task. Confirm Gemini handled it and that the artifact opens. A download by itself does not prove a working connection.
Start with the desktop app
Gemini Setup in Three Steps
Download the app first, complete the Gemini setup for the version you installed, then check a small result. This path does not require building OpenDesign from source.
- 1
Download the OpenDesign Desktop App
Select the package for your computer, install it, and open the app.
Download OpenDesignCHECKPOINTThe desktop app opens. If it is already installed, move to the next step; you do not need to download it again. - 2
Prepare Your Gemini Connection
Follow the Gemini instructions that come with your installed version, including any GEMINI.md project context convention it uses. Authenticate with your Google account or a Gemini API key (BYOK); credentials stay on your machine.
Gemini CLI documentation# 1. Install Gemini CLI (Node 20+) npm install -g @google/gemini-cli # or run without installing: npx https://github.com/google-gemini/gemini-cli # 2. Start it in your project and authenticate on first run cd your-project gemini # sign in with your Google account, or set GEMINI_API_KEYTaken from the Gemini setup notes in this published guide; verify the current command in the vendor documentation.
CHECKPOINTMake sure the agent and account match what you intended. If the agent is unavailable, check compatibility before attempting a larger task. - 3
Run One Small Gemini Task
Keep the opening brief modest enough to judge the entire loop, one revision included.
Starter briefCreate a settings screen with a profile form and a save confirmation. Apply my design rules. Verify it at desktop and mobile widths.
CHECKPOINTOpen the artifact, exercise the save state, and ask for one specific change. Review starts with the generated file; it does not end there.
If you intend to run OpenDesign from source, use the technical quickstart instead.
The Gemini design workflow
Five Steps Through Gemini's Design Loop
One operations dashboard brief, traced from first prompt to a checked file. At every step you see your input, Gemini CLI's action, OpenDesign's contribution and your review duty.
- 1
Design Brief
Keep it plain and short: three to six lines. Say who uses the screen, what it must do and where it will run.
- YouDraft the brief yourself, and use @ to attach a reference screenshot when you have one.
- GeminiReads the brief plus the project’s GEMINI.md; if a detail is ambiguous, it asks instead of guessing.
- OpenDesignSupplies the project, the terminal prompt surface and the skill matched to the artifact type.
- CheckMake sure the brief names acceptance criteria. Writing them now costs less than fixing a finished artifact.
- 2
Design Constraints
A design system plus a few firm rules. That is the difference between brand-specific output and a generic default.
- YouChoose a design system, then name your breakpoints and any components that must appear.
- GeminiBefore writing a line, it loads DESIGN.md tokens and GEMINI.md posture rules into context.
- OpenDesignShips the design-system library and binds your chosen system into the skill template.
- CheckCheck that tokens match the brand: one accent, the correct fonts, the correct radius.
- 3
Generate the Interface
Gemini CLI writes one self-contained HTML file, covering layout, styles, interactions and stable hooks.
- YouWait, or answer a clarifying question. There is nothing to configure here.
- GeminiIt plans the sections, writes HTML, CSS and JavaScript, runs the file and repairs what fails.
- OpenDesignSaves the artifact into the project folder and indexes it so the preview can find it.
- CheckNothing yet. Review the file after it renders, not by reading its source.
- 4
Preview
OpenDesign renders the file at the widths you specified. This is the point where the design gets judged.
- YouChange widths, exercise the interactions, and attach comments to specific elements.
- GeminiGemini CLI reads your comments from the preview and prepares the next pass.
- OpenDesignRenders the preview and exposes
data-od-idtargets so comments and edits can point at elements. - CheckCheck hierarchy, contrast, overflow at 390px, focus states, and whether the accent stays sparing.
- 5
Revise and Verify
Ask for changes by pointing at preview elements. Each revision is a new file; nothing gets overwritten without you knowing.
- YouConvert comments into change requests, and decide when the task is finished.
- GeminiApplies the changes in place and runs the file again.
- OpenDesignKeeps versions side by side, then exports an image or the HTML once you are done.
- CheckCheck the changed area first, then the full page once at each breakpoint.
Resources
Gemini Design Resources
Skills Browse skills Design systems Browse systems Templates Browse templates
Design Skills
The kinds of artifacts Gemini CLI can generate in OpenDesign, with one skill mapped to each type.
Design Systems
Design-system tokens and components to bind before Gemini CLI writes any output.
Templates
Starting points for decks, landing pages and product screens within the Gemini CLI workflow.
Limitations
Gemini CLI Limits, Manual Checks and Fallback Paths
- ScopeThis page is about Gemini CLI as an agent connected to OpenDesign, not every feature of Gemini itself.
- Usage LimitsUsage limits and cost follow the credential in play — Google account (free tier) or Gemini API key (BYOK). This page makes no promise about free quotas.
- NetworkLocal project files do not imply offline inference. Check your agent’s provider settings and data policies before sharing sensitive inputs.
- Output Is HTMLArtifacts are HTML files, not editable vector design documents.
- Manual ReviewAccessibility, real content, brand fit and interaction correctness are yours to review in the preview. Treat any self-check from Gemini CLI as a first pass.
- FallbackIf Gemini CLI is unavailable or a task fails, return to the installed version’s connection instructions and authentication. Preserve the error and the last working artifact before changing configuration.
FAQ
Common Questions About Gemini and OpenDesign
Can Gemini CLI Produce Real Design Work?
Yes — with an aesthetic skill, a design system, and real reference images in context, Gemini CLI produces production-quality, responsive UI, and its strong multimodal models verify output against references. Without that context it tends to default to a generic look, which is the gap OpenDesign fills.
Do I Need to Pay to Design With Gemini CLI?
No — signing in with a Google account gives a generous free tier, and you can also bring a Gemini API key (BYOK) or use Vertex AI. OpenDesign never proxies your credentials either way.
Which Gemini CLI Traits Matter Most for Design?
Two things: its models are strongly multimodal, so it reads reference screenshots well, and its 1M-token context can hold an entire design system and reference set at once. Both help — but taste still comes from the design system, skill, and references you supply.
Choosing Between Gemini CLI and Claude Code for Frontend Design
Both are strong. Claude Code is known for specific, codebase-aware design decisions; Gemini CLI’s edge is multimodal understanding plus a huge context and a free tier. Many teams use both — OpenDesign lets you switch agents without changing your design workflow.
How Does Gemini CLI Connect to Figma?
Add the Figma MCP server under mcpServers in ~/.gemini/settings.json. Gemini can then pull real design context — components, variables, layout data — so the generated code matches the source instead of approximating it.
What Gemini CLI Is, in Practice
Gemini CLI is an open-source (Apache-2.0) AI agent that Google ships for the terminal. It reads your repository, edits files, runs shell commands, fetches the web, and can ground answers with Google Search — planning and verifying work from natural-language tasks rather than just completing lines. The same engine also powers the Gemini Code Assist agent inside VS Code.
For design work, two properties stand out. Its models are natively multimodal, so you can hand it a screenshot and it reasons about the actual layout. And its context window reaches up to 1M tokens, large enough to hold your whole design system, component library, and reference set at once instead of summarizing them away.
Context files: Gemini CLI reads a GEMINI.md file for persistent project context — the natural place to encode your design conventions, tokens, and review checklists. Personal and team settings layer on top.
Built-in tools + MCP: It ships file, shell, web-fetch, and Google Search tools out of the box, and supports MCP servers (configured in ~/.gemini/settings.json) to add external context like a live Figma file.
Free to start: Signing in with a personal Google account gives a generous free tier of Gemini requests; you can also bring a Gemini API key or use Vertex AI.
Credential: Google account (free tier) or Gemini API key from AI Studio (BYOK) or Vertex AI
Vendor: Google
License: Apache-2.0, open source
For design work, two properties stand out. Its models are natively multimodal, so you can hand it a screenshot and it reasons about the actual layout. And its context window reaches up to 1M tokens, large enough to hold your whole design system, component library, and reference set at once instead of summarizing them away.
Context files: Gemini CLI reads a GEMINI.md file for persistent project context — the natural place to encode your design conventions, tokens, and review checklists. Personal and team settings layer on top.
Built-in tools + MCP: It ships file, shell, web-fetch, and Google Search tools out of the box, and supports MCP servers (configured in ~/.gemini/settings.json) to add external context like a live Figma file.
Free to start: Signing in with a personal Google account gives a generous free tier of Gemini requests; you can also bring a Gemini API key or use Vertex AI.
Credential: Google account (free tier) or Gemini API key from AI Studio (BYOK) or Vertex AI
Vendor: Google
License: Apache-2.0, open source
Why multimodal models and a huge context fit design
Gemini CLI’s design edge comes from two model properties — but, as with every agent, taste still has to be supplied.
Strong multimodal understanding: Because Gemini models are natively multimodal, the agent reads reference screenshots well — comparing its rendered output back to an image instead of guessing from a prose description.
A 1M-token context window: A large context means the whole design system, tokens, and many reference states fit at once, so the agent reuses your real primitives rather than inventing one-off styles.
Conventions in GEMINI.md: A GEMINI.md (plus the Figma MCP server) points the agent at your tokens, components, and real specs, so it works against a brand instead of a default look.
Taste comes from three inputs you provide: a design system, a skill, and real reference images.
The lesson is the same one every agent teaches: Gemini CLI does not have taste by default. It produces good design when you give it constraints — a design system, an aesthetic skill, and concrete references. OpenDesign packages exactly those inputs, which is why the two fit together (more below).
Strong multimodal understanding: Because Gemini models are natively multimodal, the agent reads reference screenshots well — comparing its rendered output back to an image instead of guessing from a prose description.
A 1M-token context window: A large context means the whole design system, tokens, and many reference states fit at once, so the agent reuses your real primitives rather than inventing one-off styles.
Conventions in GEMINI.md: A GEMINI.md (plus the Figma MCP server) points the agent at your tokens, components, and real specs, so it works against a brand instead of a default look.
Taste comes from three inputs you provide: a design system, a skill, and real reference images.
The lesson is the same one every agent teaches: Gemini CLI does not have taste by default. It produces good design when you give it constraints — a design system, an aesthetic skill, and concrete references. OpenDesign packages exactly those inputs, which is why the two fit together (more below).
Setting Up Gemini CLI for Design Work From Scratch
The setup sequence: install → authenticate → configure GEMINI.md → add a skill → enable browser verification.
Encode your design rules: Put your tokens, primitives, and conventions in GEMINI.md and point Gemini at them, so output matches a brand instead of defaulting to a generic look.
Add browser verification: Wire a Playwright or browser MCP so Gemini renders in a real browser and checks its output across breakpoints instead of only confirming the build passes.
Use the current setup section for commands and version-specific details, which may change.
Historical command example from the previous guide; verify current syntax in the linked vendor documentation.
Encode your design rules: Put your tokens, primitives, and conventions in GEMINI.md and point Gemini at them, so output matches a brand instead of defaulting to a generic look.
Add browser verification: Wire a Playwright or browser MCP so Gemini renders in a real browser and checks its output across breakpoints instead of only confirming the build passes.
Use the current setup section for commands and version-specific details, which may change.
# 1. Install Gemini CLI (Node 20+)
npm install -g @google/gemini-cli
# or run without installing: npx https://github.com/google-gemini/gemini-cli
# 2. Start it in your project and authenticate on first run
cd your-project
gemini # sign in with your Google account, or set GEMINI_API_KEY
# 3. Generate project context
/init # scaffolds a GEMINI.md for this project
# 4. Wire the Figma MCP server (optional, for design handoff)
# add it under "mcpServers" in ~/.gemini/settings.jsonHistorical command example from the previous guide; verify current syntax in the linked vendor documentation.
Turning Screenshots Into UI With Gemini CLI
The highest-leverage design loop with Gemini CLI is turning a reference image into working, responsive UI and iterating until it matches — leaning on the multimodal model to compare output back to the reference.
Start from the clearest visual references you have — and include multiple states (desktop and mobile, hover, empty, loading), not just one hero shot.
Be specific in the prompt; vague prompts produce generic UI even with a strong model.
Keep your design system and conventions in GEMINI.md, and tell Gemini where the tokens and canonical primitives live.
Run a dev server and have Gemini render in a real browser, resizing to breakpoints to check the result.
Iterate by having Gemini compare its implementation back to the screenshots — not merely confirm it builds.
Reference an image with @ to attach it to the prompt, then give concrete constraints:
Keep prompts small and focused, commit good iterations and revert bad ones (telling Gemini when you revert), so each pass builds on a clean base.
Historical command example from the previous guide; verify current syntax in the linked vendor documentation.
Start from the clearest visual references you have — and include multiple states (desktop and mobile, hover, empty, loading), not just one hero shot.
Be specific in the prompt; vague prompts produce generic UI even with a strong model.
Keep your design system and conventions in GEMINI.md, and tell Gemini where the tokens and canonical primitives live.
Run a dev server and have Gemini render in a real browser, resizing to breakpoints to check the result.
Iterate by having Gemini compare its implementation back to the screenshots — not merely confirm it builds.
Reference an image with @ to attach it to the prompt, then give concrete constraints:
Keep prompts small and focused, commit good iterations and revert bad ones (telling Gemini when you revert), so each pass builds on a clean base.
gemini
# in the prompt:
> @reference-desktop.png @reference-mobile.png
Implement this design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens from GEMINI.md.
Match spacing, layout, and hierarchy; make it responsive.
Render it in the browser and iterate until it matches the references
across breakpoints.Historical command example from the previous guide; verify current syntax in the linked vendor documentation.
GEMINI.md, MCP Servers and Extensions
Three extension points make Gemini CLI practical for sustained design work, and all three map cleanly onto an open design workflow.
GEMINI.md context: Project rules live in a GEMINI.md at the repo root (with global and team layers). It is the durable home for your design conventions, read on every run.
MCP servers: Configure MCP servers under ~/.gemini/settings.json — the portable way to bring in design context and external tools, most relevantly the Figma MCP server, that work across agents, not just Gemini.
Extensions and built-in tools: Gemini CLI extensions and its built-in Google Search, file, shell, and web-fetch tools let it gather references and run the verification loop without leaving the terminal.
These are portable, multi-agent capabilities — exactly the kind of thing OpenDesign is built to orchestrate, rather than re-create per project.
GEMINI.md context: Project rules live in a GEMINI.md at the repo root (with global and team layers). It is the durable home for your design conventions, read on every run.
MCP servers: Configure MCP servers under ~/.gemini/settings.json — the portable way to bring in design context and external tools, most relevantly the Figma MCP server, that work across agents, not just Gemini.
Extensions and built-in tools: Gemini CLI extensions and its built-in Google Search, file, shell, and web-fetch tools let it gather references and run the verification loop without leaving the terminal.
These are portable, multi-agent capabilities — exactly the kind of thing OpenDesign is built to orchestrate, rather than re-create per project.
Gemini CLI vs Codex vs Claude Code vs Cursor for design
There is no single winner for design work — each agent has a different strength, and experienced teams stack them. A fair summary:
Gemini CLI — Strong multimodal image understanding and a 1M-token context; open-source with a free tier — Screenshot-heavy work and holding a whole design system in context
Codex — Strong visual polish with a frontend skill; sandboxed async builds — Delegated async builds and portable AGENTS.md rules
Claude Code — Specific design decisions (hex, spacing, type) and codebase-aware UX — Frontend reasoning and large-context refactors
Cursor — Visual build-and-see loop with live preview and inline edits — Tight iterate-and-watch UI work inside an IDE
The recurring community verdict is that taste comes from humans: all of them default to a generic aesthetic without skills, references, and constraints. That is the real problem to solve — and it is design-tool-shaped, not model-shaped.
Agent — Design strength — Best for
Gemini CLI — Strong multimodal image understanding and a 1M-token context; open-source with a free tier — Screenshot-heavy work and holding a whole design system in context
Codex — Strong visual polish with a frontend skill; sandboxed async builds — Delegated async builds and portable AGENTS.md rules
Claude Code — Specific design decisions (hex, spacing, type) and codebase-aware UX — Frontend reasoning and large-context refactors
Cursor — Visual build-and-see loop with live preview and inline edits — Tight iterate-and-watch UI work inside an IDE
The recurring community verdict is that taste comes from humans: all of them default to a generic aesthetic without skills, references, and constraints. That is the real problem to solve — and it is design-tool-shaped, not model-shaped.
Agent — Design strength — Best for
Common Pitfalls and How to Avoid the “AI slop” Look
The most common complaint about AI-generated design is that it looks generic — soft gradients, floating panels, oversized rounded corners, dramatic shadows, an Inter-and-purple vibe that “screams an AI made this.” Other reported issues include broken mobile layouts and instructions leaking into UI copy. None of these are unique to Gemini CLI; they are what happens when any agent runs without a curated design context.
Add an aesthetic skill: A curated design skill forces the agent to commit to a real direction instead of the default look.
Verify in a real browser: Use the multimodal model to render and self-check across breakpoints so layouts do not silently break on mobile.
Supply tokens and references: Real design tokens and reference screenshots are the single biggest lever on output quality.
Encode rules in GEMINI.md: Put “no hero cards, max two typefaces, brand-first hierarchy” style rules where the agent reads them every run.
Notice that every mitigation is about giving the agent a curated design context. Maintaining that context by hand, per project, is the toil OpenDesign removes.
Add an aesthetic skill: A curated design skill forces the agent to commit to a real direction instead of the default look.
Verify in a real browser: Use the multimodal model to render and self-check across breakpoints so layouts do not silently break on mobile.
Supply tokens and references: Real design tokens and reference screenshots are the single biggest lever on output quality.
Encode rules in GEMINI.md: Put “no hero cards, max two typefaces, brand-first hierarchy” style rules where the agent reads them every run.
Notice that every mitigation is about giving the agent a curated design context. Maintaining that context by hand, per project, is the toil OpenDesign removes.
Using Gemini CLI as the Agent Inside OpenDesign
OpenDesign is the open-source design layer the workflow above keeps asking for. It treats Gemini CLI as a first-party adapter and wraps it in a curated skill and design-system library, a structured render pipeline, and a local desktop UI — so the design context that makes Gemini good is there from the first run, not assembled by hand each time. Both are open-source and local-first, which makes the pairing a natural fit.
Authenticate with your Google account or Gemini API key (BYOK) — credentials stay on your machine and are never proxied through us.
Pick a design system and a skill, then generate decks, prototypes, and landing pages with consistent taste.
Every artifact and DESIGN.md file lives in your own repo, not a hosted cloud.
Same Gemini CLI agent, same key — plus a real, portable, open-source design workflow around it. It is local-first and Apache-2.0, so nothing about your work or your credentials leaves your machine.
Install OpenDesign and select Gemini CLI as your agent.
Authenticate with your Google account or Gemini API key (BYOK) — credentials stay on your machine and are never proxied through us.
Pick a design system and a skill, then generate decks, prototypes, and landing pages with consistent taste.
Every artifact and DESIGN.md file lives in your own repo, not a hosted cloud.
Same Gemini CLI agent, same key — plus a real, portable, open-source design workflow around it. It is local-first and Apache-2.0, so nothing about your work or your credentials leaves your machine.
Install OpenDesign and select Gemini CLI as your agent.
Is OpenDesign affiliated with Google?
No. OpenDesign is independent; Gemini is a trademark of Google.