VividKit Crystal clear AI coding
VI
Choose Your Setup Get Started with AgentKit Continue with ClaudeKit Migrate from ClaudeKit to AgentKit Clean cutover from ClaudeKit What Is AgentKit? How AgentKit Works AgentKit Kits, Skills, Agents & Hooks AgentKit Runtime Support AgentKit Desktop App AgentKit Configuration AgentKit CLI Quick Reference AgentKit Skills Cheatsheet AgentKit Workflows AgentKit Statusline Update AgentKit CLI & Kits AgentKit Helper Clean reinstall of AgentKit AgentKit Troubleshooting What is ClaudeKit? ClaudeKit CLI Guide Command Finder Commands Cheat Sheet Workflow Recipes CLI Quick Reference Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Other coding tools How ClaudeKit Works Inside ClaudeKit Finding Your Unknowns Session Recovery Fix from Logs UI/UX Guide Accounts Switcher IDE Config Remote Control Codex App System Diagramming UI Review Gate Promotions Support VividKit

Quick Ref / Command

Engineer Kit

/ak:stitch

Google Stitch Design Generation

Generates high-fidelity UI designs from text prompts, tracks quota, exports HTML/Tailwind, screenshots, and DESIGN.md, then hands designs to frontend implementation skills.

01

Verify setup

02

Check quota

03

Resolve project

04

Generate screen

Rule 01

Stitch produces static design, not production React

Rule 02

DESIGN.md is the handoff contract

Rule 03

Group designs by repo or active plan for traceability

Rule 04

Add responsiveness and animation during implementation

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

01

Start

Input, scope, route

  1. 1 Verify setup Confirm API key location, SDK install, optional project ID, and MCP setup when native design context is needed.
  2. 2 Check quota Run the local advisory quota check before generation and explain that provider-side enforcement remains authoritative.
02

Work

Agent / skill execution

  1. 3 Resolve project Choose project by explicit project ID, project name, environment override, git repo auto-detect, or claudekit-default fallback.
  2. 4 Generate screen Run the Stitch generation script with the user's design prompt, active plan project name, device, or variant needs.
03

Verify

Gate, review, validation

  1. 5 Review image Show the generated design preview and capture user feedback before requesting redesigns or additional variants.
  2. 6 Export artifacts Export HTML/Tailwind, screenshot, and DESIGN.md so implementation agents can consume concrete design specs.
04

Close

Report, handoff, artifact

  1. 7 Hand off to code Route DESIGN.md to frontend-design, ui-ux-pro-max, or ui-styling; DESIGN.md wins over text descriptions.
  2. 8 Track quota Increment local quota after generation and keep repo-isolated project records for future design sessions.

Syntax, arguments, subcommands

How to invoke the skill: syntax, positional arguments, shared options, then each subcommand with its own syntax and outcome.

Syntax

/ak:stitch [design prompt or action]

or

/ak:stitch <generate|export|quota> ...

Arguments

[design prompt or action] Required

Design prompt or action

Natural-language screen brief, constraints, device, content, variant, export, or quota request. Do not include secrets, customer data, or unapproved brand assets.

/ak:stitch "Generate two desktop checkout concepts, show previews, and export the selected screen to ./stitch-exports without implementing it"

Subcommands

generate Generate
/ak:stitch generate <prompt> [--project <id>|--project-name <title>] [--device MOBILE|DESKTOP|TABLET] [--variants <count>]

Create one Stitch screen or approved variants from a concrete prompt after checking access, quota, and safe content boundaries.

<prompt>
The UI concept to generate, including audience, content, device, and brand constraints. Remove secrets and sensitive data before sending.
--project <id>
Reuse an exact existing Stitch project ID instead of lookup or auto-create.
--project-name <title>
Look up or create a bounded Stitch project name, commonly repo/plan for traceable design sessions.
--device MOBILE|DESKTOP|TABLET
Ask Stitch for a mobile, desktop, or tablet layout. It does not make the exported HTML production responsive.
--variants <count>
Request additional design alternatives only when variants are intentionally approved.

Outcome: Screen ID, project ID, preview image URL, and optional variant IDs for visual review.

/ak:stitch generate "A desktop checkout page with payment form and cart summary" --device DESKTOP --variants 2
export Export
/ak:stitch export <screen-id> [--format html|image|all] [--output <dir>]

Download an approved generated screen as HTML, image, or both plus a local DESIGN.md handoff.

<screen-id>
Generated Stitch screen to export. Use the project ID or project-name path from generation when needed.
--format html|image|all
Choose provider HTML, preview image, or all outputs including derived DESIGN.md.
--output <dir>
Directory for design.html, design.png, and DESIGN.md; confirm before overwriting existing exports.

Outcome: Exact exported file paths for design.html, design.png, and DESIGN.md when requested.

/ak:stitch export screen-123 --format all --output ./stitch-exports/
quota Quota
/ak:stitch quota <check|increment|reset>

Read or adjust the local advisory credit counter; provider-side quota remains the authority.

<check|increment|reset>
Use check before generation; do not run increment again after a bundled generation already counted usage.

Outcome: Local JSON-style quota summary or an explicit note that provider limits blocked generation.

/ak:stitch quota check

Special Operations

Generate

Turns a text prompt into a screen ID and preview image URL.

Export

Creates design.html, design.png, and DESIGN.md for implementation.

Quota

Tracks a local advisory counter; provider-side quota remains authoritative.

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

Generate and export concept Recommended 
/ak:stitch generate "A desktop checkout page with payment form and cart summary" --device DESKTOP --variants 2 --project-name "my-saas/checkout"
Use when:
You need provider-backed UI generation plus a reviewable handoff artifact before implementation.
Expected:
Checks local quota, resolves the Stitch project, generates two desktop variants, shows preview URLs for review, and prepares the selected screen for HTML/image/DESIGN.md export.
Generate mobile variants 
/ak:stitch generate "Mobile onboarding flow for a finance app with three calm trust-building screens" --device MOBILE --variants 3
Use when:
You want rapid UI design exploration from a concrete prompt before choosing a direction.
Expected:
Uses the generation action with the mobile device target, requests only approved variants, and returns screen or variant IDs with preview image URLs for user selection.
Export existing screen 
/ak:stitch export screen-123 --format all --output ./stitch-exports/
Use when:
A generated screen has been approved and should become concrete implementation input.
Expected:
Runs the export action for the selected screen and writes design.html, design.png, and DESIGN.md so frontend-design, ui-ux-pro-max, or ui-styling can consume the design spec.
Check quota first 
/ak:stitch quota check
Use when:
Before generating concepts, variants, or redesigns when local advisory quota or provider availability may block the run.
Expected:
Runs the quota action, reports local advisory usage and remaining state, and stops or chooses an approved non-provider workflow when generation should not continue.

Handled Scope

  • AI UI generation
  • Tailwind export
  • DESIGN.md handoff
  • quota tracking
  • design variants

Next