stitch-ui-designer

What This Skill Does

The stitch-ui-designer skill transforms the way you build frontends by leveraging the power of Google Stitch through the OpenClaw agent. Instead of writing boilerplate code from scratch, this skill allows you to articulate your UI requirements in natural language and receive high-fidelity visual previews immediately. It acts as an iterative bridge between conceptual design and production-ready HTML/CSS. By utilizing the MCP (Model Context Protocol) integration, the skill ensures that design contexts are preserved during modifications, allowing for a seamless transition from a rough idea to a polished component.

Installation

To begin using the skill, ensure you have the OpenClaw environment active. Install the skill directly from the repository using the following terminal command:

clawhub install openclaw/skills/skills/a2mus/stitch-ui-designer

Once installed, you must perform the initial configuration to link the Stitch MCP server to your local environment. Run the command: mcporter config add stitch --command "npx" --args "-y stitch-mcp-auto". Additionally, ensure you have authenticated with your Google Cloud account via gcloud auth login to allow the agent to manage assets in your Google Cloud project.

Use Cases

• Rapid Prototyping: Quickly generate multiple UI variations for client demos without writing a single line of code.
• Component Library Generation: Build custom dashboard widgets, login forms, or profile cards by describing their functionality and look.
• Design Iteration: Use the skill to refine existing components by providing feedback on initial previews until the design aligns perfectly with your brand requirements.
• Frontend Kickstarting: Generate the foundational HTML and CSS structures for a web application, reducing development time by hours.

Example Prompts

1. "I need a clean, dark-themed login screen for a crypto dashboard; generate a preview for me."
2. "That looks good, but can you change the primary button to blue and add a section for a user avatar at the top?"
3. "The design looks great now, please export the HTML and CSS code for this screen."

Tips & Limitations

• Preview First: Never jump straight to code. Use the visual output to validate the layout. If the layout is wrong, refining it in the design stage is faster than editing code manually.
• Contextual Awareness: If you are working on a large project, be sure to use stitch.extract_design_context to maintain consistency across multiple pages.
• Auth Requirements: The tool relies heavily on the stitch-mcp-auto package. If you encounter authorization errors, check that your GOOGLE_CLOUD_PROJECT environment variable is correctly set and that the project is enabled for Stitch APIs.
• Limitation: Currently, the code generation is optimized for standard HTML/CSS. Complex JavaScript interactions may require manual integration after the base code is exported.