stitch-prompt

A CLI tool to process prompt templates with spec and style variables, generating design prompts by combining Mustache templates with design specifications and UI style catalogs.

Features

• Template Processing: Uses Mustache templating to combine design specs with style instructions
• Design Spec Parsing: Parses Markdown design specifications with frontmatter and structured sections
• UI Style Catalog: Includes 35+ predefined UI styles from minimalist to cyberpunk
• Random Style Selection: Automatically selects random styles when none specified
• Flexible Input: Supports custom prompt templates and spec files

Installation

npm install
npm link  # Optional: to use globally as `stitch-prompt`

Usage

Basic Usage

stitch-prompt --spec specs/dogfood-tracker.md

This will:

1. Use the default prompt template (prompts/default.md)
2. Parse the specified design spec
3. Select a random UI style from the catalog
4. Generate a complete design prompt

Advanced Usage

# Specify a custom style
stitch-prompt --spec specs/dogfood-tracker.md --style "Dark Minimalism"

# Use a custom prompt template
stitch-prompt --spec specs/dogfood-tracker.md --prompt prompts/simple.md --style "Material Design"

# Output to a file
stitch-prompt --spec specs/dogfood-tracker.md --output my-prompt.md

# Generate prompts for all styles
stitch-prompt --spec specs/dogfood-tracker.md --all output-directory/

Command Options

• --spec (required): Path to design specification file (Markdown format)
• --style (optional): Style name from the catalog (random if not provided)
• --prompt (optional): Path to prompt template file (defaults to prompts/default.md)
• --output (optional): Output file path (prints to STDOUT if not provided)
• --all (optional): Generate for all styles, outputting to specified directory as $spec-$style.md files

Project Structure

stitch-prompt/
├── cli/
│   └── index.js          # Main CLI entry point
├── src/
│   └── utils/
│       ├── spec-parser.js # Design spec parsing logic
│       └── styles.js      # UI style catalog management
├── prompts/
│   ├── default.md        # Default prompt template
│   └── simple.md         # Alternative prompt template
├── specs/
│   └── dogfood-tracker.md # Example design specification
└── styles/
    └── styles.md         # UI style catalog (35+ styles)

Design Specifications

Spec files are Markdown documents with optional frontmatter and structured sections:

# App Title

## Description
Detailed description of the application screens and functionality.

## Type
Mobile application UI (or other type specification)

## Notes
Additional design considerations and requirements.

The spec parser extracts:

• Title: Main heading (H1)
• Description: Application functionality and screens
• Type: UI type specification
• Notes: Additional design notes
• Screens: Auto-extracted screen names from description
• Primary Tasks: Auto-extracted user tasks and goals

UI Style Catalog

The styles catalog (styles/styles.md) contains 35+ predefined UI styles:

• Modern Styles: Material Design, Flat Modern, Dark Minimalism
• Retro Aesthetics: Memphis Pop, Synthwave Dark, Vaporwave, 90s Web Revival
• Luxury Options: Luxury Minimalism, Luxury Dark, Editorial Elegance
• Playful Designs: Cartoon Pop, Children's App Style, Playful Pastel
• Specialized: Glassmorphism, Neumorphism, Brutalism, Cyberpunk Neon
• And many more...

Each style includes:

• Visual description and cues
• When to use guidelines
• Detailed image generation prompt

Templates

Default Template (prompts/default.md)

A comprehensive prompt template that:

• Emphasizes modern, production-ready design quality
• Includes detailed typography, color, and layout guidelines
• Focuses on component craftsmanship and micro-details
• Incorporates the parsed spec and selected style

Simple Template (prompts/simple.md)

A more concise template for basic design generation needs.

Examples

Generate with Random Style

stitch-prompt --spec specs/dogfood-tracker.md
# Using random style: Japanese Zen
# [Generated prompt output with zen-inspired design guidelines]

Generate with Specific Style

stitch-prompt --spec specs/dogfood-tracker.md --style "Cyberpunk Neon"
# [Generated prompt with cyberpunk styling for the dogfood tracker app]

List Available Styles

Since styles are defined in styles/styles.md, you can view the full catalog there or check the console output when no style is specified to see which random style was selected.

Development

# Run locally
npm start

# Development with auto-reload
npm run dev

# The CLI entry point
node cli/index.js --spec specs/dogfood-tracker.md

Requirements

• Node.js ≥ 20.0.0
• Dependencies: fs-extra, gray-matter, mustache, unified, remark-parse, yargs

License

MIT