stitch-ui-designerDesign, preview, and generate UI code using Google Stitch (via MCP). Helps developers choose the best UI by generating previews first, allowing iteration, and then exporting code.
Install via ClawdBot CLI:
clawdbot install a2mus/stitch-ui-designerGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Feb 27, 2026
Startup founders and product managers can quickly generate UI mockups for new features or landing pages, such as a signup flow or dashboard, to validate ideas with stakeholders before development. This reduces design iteration time and aligns teams visually early in the cycle.
E-commerce businesses can use the skill to design and preview updated product pages, checkout interfaces, or admin panels, ensuring a user-friendly experience. Iterating on previews helps optimize conversion rates without immediate coding overhead.
Edtech companies can create interactive learning interfaces, such as quiz screens or progress trackers, by describing educational needs. Previewing designs allows for feedback from educators and students to enhance usability before implementation.
Healthcare providers can design patient portals or appointment scheduling interfaces tailored to specific workflows. Generating previews first ensures compliance with accessibility standards and user needs, reducing rework in development.
Offer a free tier for basic UI design and previews, with paid upgrades for advanced features like code export, team collaboration, or premium templates. Revenue comes from subscription plans targeting individual developers and small teams.
Integrate the skill into a design agency's workflow to quickly produce client mockups, charging per project or hourly for design iterations and code delivery. This accelerates proposal creation and client approvals, increasing service throughput.
Sell enterprise licenses to large companies for internal UI design, bundled with training, support, and customization. Revenue is generated through one-time setup fees and annual maintenance contracts, targeting industries like finance or logistics.
💬 Integration Tip
Ensure mcporter and stitch-mcp-auto are properly configured with Google Cloud authentication to avoid project ID errors; always fetch previews before code to save tokens and time.
Scored Apr 19, 2026
Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, implementing...
Senior product designer methodology ensuring thorough user research, structured architecture, accessible color and typography systems, and pixel-perfect UI e...
Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-conv...
Shared design system for yuanfang-skills. Provides token CSS variables, 12+ themes, and reusable layout-type HTML blocks. Used by yuanfang-html-image (and fu...
Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinc...