Skip to main content
Glama
rishapgandhi

Quick Design

by rishapgandhi
OverviewSchemaSourceRelated ServersDiscussionsAdmin
Python
Local

Quick Design

An MCP server that generates professional design artifacts (HTML, PDF, PPTX) in seconds — powered by Open Design's 150 design systems and 270+ skills.

Built on top of Open Design — the open-source Claude Design alternative. Quick Design reimagines it as a lightweight MCP server that any AI agent (OpenClaw, Claude Code, Kiro, Cursor) can call for instant design generation.

What It Does

Your message → AI Agent → Quick Design MCP → Gemini generates HTML → PDF/PPTX → Delivered

Feed a design system as a skill. Get production-quality HTML in one shot.

Related MCP server: studiox-skills-mcp

Features

  • 🎨 150 Design Systems — Airbnb, Apple, Tesla, Linear, Stripe, Notion, Ferrari, and 144 more

  • ⚡ 270+ Skills — Dashboards, pitch decks, landing pages, email templates, social posts, animations

  • 📄 Multi-format output — HTML, PDF (via wkhtmltopdf), PPTX (via python-pptx)

  • 🎞️ HyperFrames — HTML/GSAP animations for motion graphics

  • 🚗 Custom brand skills — Bake exact CSS into skills for consistent one-shot output

  • 🔌 MCP protocol — Works with OpenClaw, Claude Code, Kiro, Cursor, any MCP-compatible agent

  • 📱 WhatsApp delivery — Via OpenClaw bridge (send PDFs directly to WhatsApp)

Quick Start

# Clone
git clone https://github.com/rishapgandhi/quick_design.git
cd quick_design

# Install dependencies
pip install -e .

# Set your Gemini API key
cp .env.example .env
# Edit .env → paste your key from https://aistudio.google.com/apikey

# Test
python3 -c "from src.core.prompt_builder import list_available_skills; print(f'{len(list_available_skills())} skills loaded')"

MCP Server Setup

With OpenClaw

Add to ~/.openclaw/openclaw.json:

{
  "mcp": {
    "servers": {
      "quick_design": {
        "command": "python3",
        "args": ["-m", "src.server"],
        "cwd": "/path/to/quick_design"
      }
    }
  }
}

With Claude Code / Kiro

claude mcp add quick_design python3 -m src.server --cwd /path/to/quick_design

Available Tools

Tool

Output

Description

generate_pitch_deck

PDF

Multi-slide pitch deck

generate_pitch_deck_pptx

PPTX

PowerPoint file

generate_landing_page

PDF

Marketing landing page

generate_dashboard

PDF

Analytics/KPI dashboard

generate_email_template

PDF

Branded email

generate_social_post

PDF

Social media graphic

generate_hyperframes

HTML

GSAP animation

list_design_systems

JSON

All 150 design systems

list_skills

JSON

All 270+ skills

Example: Ferrari Design for Mahindra

This is the power of Quick Design — take any design system, apply it to any brand:

Prompt:

Create a landing page for MAHINDRA using the ferrari_automotive skill.
Models: Thar Roxx, XUV700, Scorpio-N, XUV 3XO, BE 6e
Tagline: "Explore the Impossible"

Result: A full cinematic red-and-black landing page with Ferrari's design DNA — gradients, red glows, razor-sharp buttons, editorial layout — applied to Mahindra's brand.

The ferrari_automotive skill has exact CSS patterns baked in:

  • Red (#DA291C) and black gradients throughout

  • Red ambient glow effects behind vehicles

  • Full red stats section

  • Chiaroscuro editorial rhythm

  • 2px border-radius (razor precision)

This approach works for any brand × any design system. Feed a skill with exact CSS, get consistent output every time.

How It Works

┌─────────────────────────────────────────────────┐
│         Quick Design MCP Server                  │
│                                                  │
│  Prompt = Skill + Design System + Brief          │
│                                                  │
│  1. Load skill (CSS patterns + layout rules)     │
│  2. Load design system (brand tokens)            │
│  3. Load craft rules (anti-AI-slop quality)      │
│  4. Compose prompt → send to Gemini              │
│  5. Save HTML → convert to PDF/PPTX             │
│  6. Return file path to agent                    │
└─────────────────────────────────────────────────┘

Adding Custom Skills

Drop a .md file in src/skills/:

# My Custom Skill

## EXACT CSS Patterns To Use
(paste your CSS here — the model copies it)

## Page Section Structure
1. Section name — description
2. Section name — description
...

The key insight: don't describe what you want — give the model exact CSS to copy. Small models follow templates perfectly but fail at creative interpretation.

Design Systems

150 systems from Open Design:

airbnb · apple · bmw · claude · cursor · discord · ferrari · figma · github · linear-app · meta · nike · notion · nvidia · shopify · spotify · stripe · supabase · tesla · uber · vercel · and 130 more...

Tech Stack

  • Python 3.10+

  • MCP protocol (stdio server)

  • Google Gemini 3.1 Flash Lite (500 req/day free tier)

  • wkhtmltopdf (HTML → PDF)

  • python-pptx (PPTX generation)

  • Open Design repo (skills + design systems source)

Acknowledgements

This project is built on Open Design (Apache-2.0) — the open-source Claude Design alternative by nexu-io. We use their:

  • 150 design systems (DESIGN.md files)

  • 270+ skill prompts (SKILL.md files)

  • Craft rules (anti-AI-slop, typography, color discipline)

Quick Design doesn't replace Open Design — it's a lightweight MCP adapter that makes the same design intelligence available as a single-shot tool call for any AI agent.

License

MIT

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers