Google Stitch CLI: Designing Interfaces from the Terminal with AI

Two designs sit side by side and you do not need a trained eye to tell them apart: one looks like an ordinary page while the other stands out with balanced spacing, clear hierarchy and a consistent palette. The secret behind the polished one is a freshly released tool called Stitch CLI , and the whole walkthrough shows step by step how that gap gets produced.

First, the groundwork: Stitch is a design platform developed by Google that turns written prompts into web and mobile interfaces, powered by Gemini models behind the scenes. The presenter says he has used the site for real work such as a word game and a news site; these working modes plus Figma and HTML/CSS output are confirmed in detail in the step-by-step tutorial on codecademy.com, where the generation limits of the free tier are also listed openly.

Stitch CLI moves inside coding agents

The real novelty is the CLI layer: the capabilities , skill packs, API calls and design rules behind the web interface of Stitch can now be used from inside agents such as Claude Code, Codex, Cursor or Antigravity, with no need to stay in the visual panel. The first prompt the presenter gives the assistant is deliberately plain, yet the tool still invokes the right commands. How this developer-facing programmatic surface is called is documented with sample code on the official package page at npmjs.com, where tool listing and project creation functions are clearly defined.

Setup is surprisingly simple: the machine needs Node.js 20 or newer, then a single npm command installs the tool and the stitch login command connects a Google account, with a paid-plan account being safer for limits. A version check and a list of roughly fifty commands confirm everything from the terminal, and only a single approval is requested after prompting the assistant. This five-minute setup flow is explained step by step in the hands-on guide on justinmckelvey.com, which also reports a three to five times speedup in daily use within the free quota.

Redesigning, saving and exporting

The most convincing moment is the redesign of an existing site: the agent reads the source code, applies a dark theme , rebuilds the page and saves the result back to Stitch, while unsatisfying details get revised with follow-up commands. This approach of trying parallel ideas on an infinite canvas and carrying design rules in a DESIGN.md file is described in detail in the official announcement on blog.google, which also highlights real-time editing through voice commands.

Saved projects travel with one click to platforms such as AI Studio , Figma, Netlify or Lovable once a screen is selected, so a design can become a code project, a deployment or a collaboration file. This end-to-end flow from Stitch to the build mode of AI Studio, taking twenty to forty-five minutes, is explained with examples in the in-depth guide on mindstudio.ai, where the role of Material Design 3 components in code generation is laid out clearly.

At the close, the presenter shows two different designs generated for a benchmark site: the leaderboard and the score matrix are fully reinterpreted, the color scale is left to the model, and detail pages remain optional extras, all tried on the free tier. The same bridge logic for carrying a design into code is demonstrated in the hands-on codelab on developers.google.com, where pulling design data over the MCP protocol is shown step by step.