gabelul

gabelul/stitch-kit

Plugin Claude Code

Plugin marketplace listing 1 plugin: stitch-kit.

gabelul/stitch-kit

Plugin Claude Code

Your agent designs terrible UI. stitch-kit wires it into Google Stitch MCP and teaches it the whole pipeline — ideation, screen generation, design systems, and production components across 7 frameworks.

gabelul/stitch-kit

Instructions file CodexOpenCode

Instructions for gabelul/stitch-kit, covering agents.md, what this repo is, skill structure, quick install (both platforms) and installing (claude code).

gabelul/stitch-kit

Agent

Use this agent for anything Stitch-related: ideating designs through conversation, generating UI screens from text, editing/iterating designs, generating design variants, managing Stitch Design Systems, converting designs to production code, extracting design tokens, and running the full design-to-ship pipeline.…

gabelul/stitch-kit

Hook

Runs before the context is compacted for auto and manual tool calls, executing pre-compact.mjs via node (2 commands). From gabelul/stitch-kit.

gabelul/stitch-kit

Hook

Runs when a session starts on compact and resume, executing session-start.mjs via node (2 commands). From gabelul/stitch-kit.

gabelul/stitch-kit

Skill Claude CodeCodex

Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes, keyboard navigation, focus management, and screen reader support.

gabelul/stitch-kit

Skill Claude CodeCodex

Adds a purposeful animation layer to Stitch-generated components — CSS transitions, Framer Motion (React/Next.js), or Svelte transitions. Always respects prefers-reduced-motion.

gabelul/stitch-kit

Skill Claude CodeCodex

Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex values, typography rules, and Stitch-ready prompt snippets. Use this before stitch-loop or any multi-page build to establish design consistency.

gabelul/stitch-kit

Skill Claude CodeCodex

Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4 @theme block, and a semantic design system document. Run this before framework conversion skills.

gabelul/stitch-kit

Skill Claude CodeCodex

Converts a Stitch screen, a local HTML file, or a URL into clean, platform-agnostic HTML5 + CSS — semantic markup, CSS custom properties for theming, dark mode via prefers-color-scheme, mobile-first responsive, zero framework dependencies. Works in browsers, WebViews, Capacitor, and Ionic. Only the Stitch route needs…

gabelul/stitch-kit

Skill Claude CodeCodex

Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive questioning — then produces a rich PRD document and auto-generates Stitch screens. Your design buddy that thinks deeply before designing.

gabelul/stitch-kit

Skill Claude CodeCodex

Iteratively build multi-page websites using Stitch. Reads next-prompt.md (the baton), generates the next page with Stitch MCP, integrates it into the site, then updates next-prompt.md to continue the loop. Works with stitch-design-md and stitch-ui-prompt-architect for consistent multi-page output.

gabelul/stitch-kit

Skill Claude CodeCodex

Applies a Stitch Design System to existing screens — updates their colors, fonts, and roundness to match the design system's theme. Requires an assetId from list or create operations.

gabelul/stitch-kit

Skill Claude CodeCodex

Creates a Stitch Design System from a DESIGN.md that was already uploaded with stitch-mcp-upload-design-md. Second half of a two-step pair — the upload must happen first.

gabelul/stitch-kit

Skill Claude CodeCodex

Creates a reusable Stitch Design System from theme tokens — colors, fonts, roundness. Can be applied to future screens for visual consistency.

gabelul/stitch-kit

Skill Claude CodeCodex

Creates a new Stitch project container (a design workspace). Call this when starting a new design session to get a projectId for screen generation.

gabelul/stitch-kit

Skill Claude CodeCodex

Permanently deletes a Stitch project and all its screens. Destructive — requires explicit user confirmation before calling.

gabelul/stitch-kit

Skill Claude CodeCodex

Edits existing Stitch screens with text prompts — the iteration tool. Change colors, layout, content, or style without regenerating from scratch. Supports refinement loops via outputcomponents suggestions.

gabelul/stitch-kit

Skill Claude CodeCodex

Generates a high-fidelity UI screen or wireframe from a text prompt using Stitch. This is the core text-to-UI generation tool — the heart of the Stitch workflow.

gabelul/stitch-kit

Skill Claude CodeCodex

Generates design variants of existing Stitch screens using the native variant API. Explore alternative layouts, color schemes, fonts, or content with configurable creativity levels.

gabelul/stitch-kit

Skill Claude CodeCodex

Retrieves metadata for a specific Stitch project — title, theme, create/update time. Use to inspect a project before generating new screens. Do NOT use this if you already have a screenId — use stitch-mcp-get-screen instead.

gabelul/stitch-kit

Skill Claude CodeCodex

Retrieves full details of a specific Stitch screen — HTML download URL, screenshot URL, dimensions. This is the final step in design retrieval before code conversion.

gabelul/stitch-kit

Skill Claude CodeCodex

Lists all Stitch Design Systems, optionally filtered by project. Returns asset names needed for apply and update operations.