How to Teach an AI Agent to Build Websites and Write React Components

I recently caught myself thinking: we've gotten used to neural networks writing code, but the process still looks like passing chunks of text back and forth in a chat. You copy a prompt, get a wall of code, paste it into your project, realize you forgot imports or the styles broke... Familiar routine?

It seems like the folks at Google Labs got tired of the same thing and rolled out stitch-skills. This isn't another "programmer killer," but rather a set of concrete skills for AI agents that work through the MCP (Model Context Protocol). To simplify: these are instructions and tools that let your Claude, Cursor, or Gemini not just generate text, but consciously manipulate project structure, follow design systems, and even assemble complete websites from a single sentence.

What is this anyway

The project is a library of skills tailored for working with Stitch — a server for visual design and interface generation. The main feature here is standardization. Each skill in the repository is packaged following a unified template: there's a manifest for the agent (SKILL.md), validation scripts, and "golden standard" examples.

This is needed so the agent doesn't have to guess what to do, but follows a clear algorithm. For example, if you ask to turn a sketch into React components, the agent uses skill react-components, which knows the rules of the game: how to check syntax and not lose design tokens.

What it's useful for in practice

The repository currently has about a dozen ready-made skills. I've highlighted the ones that actually save time, rather than just looking flashy in demos.

Full site generation via stitch-loop

Instead of asking "build me a landing page" and getting one file index.html, this skill makes the agent deploy a full-fledged structure. It creates the necessary pages on its own, organizes files, and checks that everything actually opens. Essentially, this is prototype build automation.

Polishing thoughts with enhance-prompt

Often a neural network gives a poor result because the prompt was something like "make it pretty." Skill enhance-prompt takes your fragmented ideas and turns them into a spec with UI/UX terms and design system context. It's like having an experienced lead proofread the task before sending it to a developer.

Documentation via design-md

My "favorite" part of the job — describing why the button is exactly that color and how the spacing works. Skill design-md analyzes the project and generates the DESIGN.md file itself. It's not just a list of styles, but a description of the design system in human language that then helps the same AI agent generate new screens more accurately.

Converting to React and shadcn/ui

For those who've already played around with prototypes and want to push this to production, there are skills react-components and shadcn-ui. They make sure that when transferring design to code, component logic isn't lost and the correct libraries are used.

How it works under the hood

If you look inside any skill folder, you'll see a strict structure. The folks at Google Labs are clearly advocates for predictability:

• SKILL.md: essentially a system prompt that explains the agent's task.
• scripts/: executable files for validating the result. If the agent messed up the code, the script will tell it about it.
• examples/: reference examples. The model learns from them (few-shot learning) to understand what result is expected.

Installing skills is made as simple as possible via CLI:

npx skills add google-labs-code/stitch-skills --skill react:components --global

The command itself will find the tools you have installed (like Cursor or Claude Code) and add new capabilities to them.

Is it worth trying

The project is specific. If you write code the old-fashioned way in plain Vim without AI assistance, this probably won't be useful to you. But if you've already moved part of your routine to Cursor or use MCP servers, then stitch-skills is a great example of how you can structure work with neural networks.

This will especially appeal to frontend developers and those quickly building MVPs. The ability to turn an abstract sketch into a structured project with documentation and React components in a couple of minutes is something we'll eventually get to anyway.

On the downside: the documentation is somewhat sparse in places, and the project isn't officially supported by Google as a commercial product (it's a Google Labs experiment). But as a foundation for creating your own skills or for speeding up your current layout work — it's a very worthy option.

You can check out all available skills and read the specification in the project repository.