Agent skill

stitch-ui-design-variants

Generate alternative Stitch design variant prompts for A/B testing and creative exploration. Use when the user wants multiple style, layout, or content options for a Stitch screen. Takes a base Design Spec or prompt and produces 3 distinct variants (layout, style, or content variations).

Stars 254
Forks 41

Install this agent skill to your Project

npx add-skill https://github.com/partme-ai/full-stack-skills/tree/main/skills/stitch-skills/stitch-ui-design-variants

SKILL.md

Stitch Design Variants

This skill acts as a Variant Generator. It takes a base design and produces alternative prompts to explore different creative directions.

Input

  • Base Spec: The original Design Spec or Prompt.
  • Variant Type:
    • LAYOUT: Keep style, change structure.
    • STYLE: Keep structure, change theme/colors.
    • CONTENT: Keep design, change text/data.

Output Format (List of Strings)

A list of 3 distinct prompts.

Logic Rules

1. Layout Variants

  • Variant A: Standard layout.
  • Variant B: Split screen or asymmetrical layout.
  • Variant C: Minimalist/Hidden navigation layout.

2. Style Variants

  • Variant A: Original Theme.
  • Variant B: Inverted Theme (Light <-> Dark).
  • Variant C: High Contrast / Monochromatic.

Validation

Ensure each variant is sufficiently distinct: different layout structure (for LAYOUT), different color palette (for STYLE), or different content/copy (for CONTENT). If two variants look too similar, regenerate the weaker one.

Example: Style Variants for a Dashboard

Input: "Desktop SaaS dashboard. Dark mode. Blue primary (#2563EB). Sidebar nav."

Output:

  1. "Desktop SaaS dashboard. Dark mode with deep navy background (#0f172a). Primary blue (#2563EB) for CTAs. Sidebar navigation. Cards with subtle border glow. High-contrast text (#f8fafc)."
  2. "Desktop SaaS dashboard. Light mode with clean white background (#ffffff). Primary blue (#2563EB) for CTAs. Sidebar navigation. Cards with soft gray (#f1f5f9) backgrounds and subtle shadows."
  3. "Desktop SaaS dashboard. High-contrast monochrome with pure black background (#000000). Accent electric blue (#3b82f6) for active states only. Sidebar navigation. Minimal chrome, maximum data density."

References

  • Examples

Expand your agent's capabilities with these related and highly-rated skills.

partme-ai/full-stack-skills

ocrmypdf-batch

OCRmyPDF batch processing skill — process multiple PDFs, Docker automation, shell scripting, and CI/CD integration. Use when the user needs to OCR many PDFs, set up automated OCR pipelines, or integrate OCR into workflows.

254 41
Explore
partme-ai/full-stack-skills

ocrmypdf-optimize

OCRmyPDF optimization skill — compress PDFs, configure PDF/A output, JBIG2 encoding, and lossless optimization. Use when the user needs to reduce PDF file size, create archival PDF/A files, or optimize OCR output.

254 41
Explore
partme-ai/full-stack-skills

ocrmypdf-image

OCRmyPDF image processing skill — deskew, rotate, clean, despeckle, remove border from scanned documents. Use when the user needs to improve scanned PDF quality, fix skewed pages, remove noise, or clean up scanned documents before OCR.

254 41
Explore
partme-ai/full-stack-skills

ocrmypdf-api

OCRmyPDF Python API and plugin skill — use OCRmyPDF programmatically from Python, integrate with applications, and extend with plugins (EasyOCR, PaddleOCR, AppleOCR). Use when the user needs to call OCRmyPDF from Python code, build OCR pipelines, or use alternative OCR engines.

254 41
Explore
partme-ai/full-stack-skills

ocrmypdf

OCRmyPDF core skill — add searchable OCR text layer to scanned PDFs, convert images to searchable PDFs, support 100+ languages via Tesseract. Use when the user needs to OCR a PDF, make a scanned PDF searchable, or extract text from scanned documents.

254 41
Explore
partme-ai/full-stack-skills

svelte

Guides Svelte and SvelteKit development including reactive components, stores, transitions, lifecycle hooks, SSR, file-based routing, and deployment. Use when the user needs to build Svelte components, create SvelteKit applications, implement reactivity patterns, or configure Svelte with Vite.

254 41
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results