What happens if the Stitch API is down?

The system features a built-in fallback handler that automatically switches to local HTML generation, ensuring your workflow is never interrupted.

Is a Google Stitch API key required?

An API key is required only for high-fidelity '--force-hifi' mockups. Basic HTML wireframes work locally without any external API keys.

What is the main benefit of the hybrid mockup system?

It provides the best of both worlds: fast, local HTML generation for quick iterations and high-fidelity Google Stitch API rendering for professional, presentation-ready designs.

Can this skill update my existing documentation?

Yes, the skill specifically targets Markdown files to detect ASCII art and replace it with rendered PNG images, keeping your docs visually consistent.

Hybrid UI Mockup Generator

Name: Hybrid UI Mockup Generator
Author: garimto81

bygarimto81

•

デザインツール

Generates professional UI mockups and wireframes using a hybrid system of local HTML templates and the Google Stitch API.

The Hybrid UI Mockup Generator is a specialized Claude Code skill designed to bridge the gap between technical documentation and visual design. It intelligently analyzes user prompts to select the best rendering engine, choosing between lightning-fast local HTML wireframes for drafts or high-fidelity Google Stitch mockups for stakeholder presentations. Its most powerful feature is the ability to detect ASCII-based diagrams within Markdown files and automatically replace them with polished PNG screenshots, ensuring your documentation always looks professional and remains easy to understand.

主な機能

01Smart Context Analysis: Selects the rendering mode based on keywords like 'high-quality', 'draft', or 'presentation'.

02Integrated Screenshot Tooling: Uses Playwright to capture and export UI mockups as high-quality image assets.

03ASCII-to-Image Conversion: Automatically detects text-based diagrams in Markdown and replaces them with PNGs.

041 GitHub stars

05Seamless Fallback: Automatically reverts to HTML wireframes if the Stitch API is unavailable or rate-limited.

06Hybrid Backend: Intelligent switching between local HTML generation and Google Stitch API.

ユースケース

01Rapidly prototyping frontend layouts during the early stages of development.

02Transforming architectural ASCII diagrams in PRDs into visual UI screenshots.

03Generating high-fidelity mockups for official project reviews and stakeholder presentations.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add garimto81/claude mockup-hybrid

For use in Claude.ai and ChatGPT

Download Skill