How to install Google Stitch Skills: Stitch MCP, Codex, Claude Code and design workflow configuration

Google Stitch Skills is a set of Agent Skills and plug-ins for Stitch. It follows the Agent Skills open standard and can be used with coding agents such as Codex, Gemini CLI, Claude Code, and Cursor. It’s not a separate “prompt word pack”: it’s officially required that Stitch MCP be configured and running before these skills can access the corresponding design workflow. Official warehouse

If you already have Codex Skills Workflow, you can think of it as a more focused collection of design plug-ins: stitch-design is responsible for design tasks, stitch-build is oriented towards construction and components, and stitch-utilities provides auxiliary capabilities.

Make three confirmations before installation

1. Already have Stitch MCP configuration, credentials, and network access available;
2. Make it clear whether the skill runs at the user level, project level or workspace level, and avoid installing the project-specific design context globally;
3. Know which designs, code or screenshots can be handed off to an external service and which must stay local.

Don’t just install Skills and then troubleshoot “why there are no tools.” Skills are responsible for instructing Agent how to work, and it is the MCP server that truly provides Stitch capabilities.

First verify Stitch MCP in a blank project

Don’t troubleshoot the first round of problems in the main project yet. Create a temporary directory or use a test project without sensitive design data, complete the MCP authentication and connection according to the Stitch document, and then check from the client whether the MCP server is displayed as connected. Then have the Agent perform a read-only or draft-only task, such as listing available design resources or generating a non-publishing page variant based on a sample component.

The goal of this step is not to make a formal design, but to layer the problem: when the MCP tool cannot be seen, check the server command, authentication and network; when the tool can be seen but the Skill does not take effect, check the plug-in installation scope; when it can be called but the result is incorrect, return to the project rules, input and permissions. Don’t mix the three types of problems and solve them by “reinstalling”.

After confirming that the test environment is available, decide on the installation location. Common skills that are frequently used by individuals can be placed at the user level; skills that rely on specific component libraries, tokens or design specifications can be placed at the project level; only team shared workspaces can be considered at the workspace level. The larger the scope, the greater the need to review whether it contains internal links, screenshots, or proprietary design context.

Codex installation plug-in market

The official Codex CLI installation method is as follows:

1
2
3
4
5

codex plugin marketplace add google-labs-code/stitch-skills --ref main \
  --sparse .agents/plugins \
  --sparse plugins/stitch-design \
  --sparse plugins/stitch-build \
  --sparse plugins/stitch-utilities

--sparse is used to pull only the required paths and reduce the content of the first clone. After signing up for the marketplace, install design, build, or tool plugins as needed; don’t default to installing all plugins into every project.

The official example of Claude Code with Cursor is a project or workspace scope installation:

1
2

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

After the installation is complete, close and reopen the client and confirm that the corresponding entry can be seen in the plug-in list. If the command is executed successfully but the client is not loaded, first check whether the current directory is the project root directory, whether --scope is as expected, and whether the team configuration overrides the personal configuration; do not bypass the plug-in manager by manually copying the hidden directory. This way, there are still traceable entries for subsequent updates, uninstalls, and dependency checks.

Don’t miss dependencies when installing selectively

When only a few skills are needed, use:

1

npx skills add google-labs-code/stitch-skills

But the official tip is that there may be dependencies between Stitch Design Skills. When “Skills can be seen but failed to execute” appears after selective installation, first check whether the dependencies it refers to are installed at the same time, instead of repeating the installation or manually copying the directory.

Complete a design task with a minimal set of plug-ins

For example, when you only need to make an existing Dashboard into a filter page, first install stitch-design and its declared dependencies, and keep stitch-build only when you really want to generate component code. Let the Agent output the design draft and change instructions first, without granting permission to write to the repository or publish shared projects. Check that the draft can reuse existing navigation, color tokens, table fields, and component naming; once these constraints are correct, let it move into the build phase.

The same set of test tasks should also be run again before upgrading the plug-in or MCP. Record client version, plug-in version, MCP configuration and test input; if the new version changes the tool name or generates results, you can quickly roll back instead of temporarily troubleshooting the real design project.

How to write design tasks so they can be reviewed

Don’t just tell Agent “make a more modern homepage.” A more stable task should give inputs, allowed side effects, and acceptance criteria:

1
2
3
4

基于现有 Dashboard 组件创建一个新的筛选页草案。
只生成设计变体，不修改仓库代码，不发布到共享项目。
保留现有颜色 token、导航和表格字段。
输出两个变体，并说明每个变体改变了哪些组件和交互状态。

This prevents design tools from skipping “generate draft” directly into “modifying production code” or “overwriting shared design”.

Physical checklist before delivery

At the end of a design task, the Agent is required to give rather than just hint in the conversation: which Skills and MCP tools were used, which design resources were read, which pages were generated or modified, and which actions have not yet been performed. Manually re-check whether the shared project has not been accidentally released, whether key components still use existing tokens, and whether the screenshots contain business data that should not be transmitted externally.

If the task needs to fall into the code warehouse, split “design draft completion” and “code change completion” into two submission or two approval points. The former allows exploration, while the latter must follow existing testing, code review and release processes. In this way, Stitch Skills can help Agents understand the design workflow without blurring the boundaries of responsibility between design tools and production changes.

FAQ

summary

The correct sequence of Stitch Skills is: first have the Stitch MCP available, then select plug-ins or skills according to project needs, and finally constrain the Agent with clear design input and acceptance criteria. Successful installation is just the beginning; scope, dependencies, and design data boundaries determine whether it can be used stably in team processes.