Google Labs open-sources 15 UI design skills: before AI builds interfaces, make it read DESIGN.md

Google Labs has put a repository on GitHub called stitch-skills. It contains 15 UI design skills for AI Agents, organized according to the Agent Skills open standard and compatible with coding Agents such as Codex, Claude Code, Cursor, Gemini CLI, and OpenCode. The material comes from Yarad's Telegram channel, and the repository and documentation match up.

Let's start with what problem it solves.

Most problems with AI-generated UI come from missing constraints. Every conversation feels like opening a fresh mystery box. You ask it to add a login page, and it gives you a whole new style. The colors drift, the font changes, and the button corner radius is sometimes large and sometimes small. The first version is often usable; the trouble starts with the second version.

The core of stitch-skills is to break the design process into callable skills and then pin down colors, fonts, and component rules in a DESIGN.md file. Every time an Agent generates or modifies a page, it reads this file first. Only then can a multi-page project look like the same product.

The 15 skills fall into three groups.

Design group:

generate-design: Generate interfaces from text or reference images; it can also modify existing screens and generate variants.
manage-design-system and extract-design-md: Manage DESIGN.md, or extract a design system from existing frontend code.
code-to-design, extract-static-html, upload-to-stitch: Move frontend code, static HTML, and local assets into a Stitch project.

Build group:

react-components: Convert Stitch screens into React components, with validation and design token consistency checks.
react-native: Convert to React Native components.
react-vite-dashboard: Convert to a React plus Vite admin dashboard, wired to TanStack Query and DESIGN.md tokens.
shadcn-ui: Connect to shadcn/ui components.
remotion: Generate project walkthrough videos with Remotion.

Tool group:

design-md: Analyze a Stitch project and generate DESIGN.md.
enhance-prompt: Turn a vague UI idea into a prompt Stitch can use.
stitch-loop: Generate a multi-page website from one prompt, with automatic validation.
taste-design: Generate a less generic DESIGN.md, with an emphasis on typography and color calibration.

The suitable projects are clear: product websites, admin dashboards, app UIs, prototypes, and going from an idea to a developable interface. The prerequisite is to configure Google Stitch MCP first. Without it, the Agent cannot connect to Stitch's design capabilities.

Installation differs by Agent. Codex uses the plugin marketplace; Claude Code and Cursor can use:

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

OpenCode requires manually copying the skills and configuring Stitch MCP in opencode.json. The repository's Prerequisites are clearly written; just follow them.

The repository also states clearly: this is not an officially supported Google product and is not part of Google's Open Source Software Vulnerability Reward Program. Treat it as a toolchain experiment first, and do not use it directly as a formal production dependency.

My judgment: the appeal of this set is not 'one-click generation of beautiful UI.' Generation capability is not scarce. What is truly scarce is repeatable constraints and processes. DESIGN.md is like memory for the Agent, so the next time it changes a button, it remembers why this blue was used last time. For people with a development background, the first things worth trying are extract-design-md and react-components: one extracts the design system from existing code, and the other pulls generated results back into component code. For non-technical readers, it is enough to understand it as writing design specifications into a file the Agent can read, then letting it work through the process.

Repository:
https://github.com/google-labs-code/stitch-skills

Source material:
https://t.me/yarad_ai