design-deck

Generate multi-slide visual decision decks comparing architecture, UI, and code approaches.

285|17|Updated Feb 23, 2026

Search Tags:#mermaid diagrams #architecture decisions #ui mockups #interactive selection #design deck #code diffs #plan prd

Ready to run

npx skills add https://github.com/nicobailon/pi-design-deck --skill design-deck-nicobailon

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-deck
Source: https://github.com/nicobailon/pi-design-deck/tree/main/skills/design-deck
Command: npx skills add https://github.com/nicobailon/pi-design-deck --skill design-deck-nicobailon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes the guesswork from architecture and UI decisions by letting you compare multiple options side-by-side and choose the one that best fits.

Core Features & Use Cases

Visual decision decks: Present 2–4 high-fidelity previews per slide for architecture, UI mockups, and code diffs.
Multiple preview formats: Use previewBlocks (code, mermaid, image, html) or previewHtml for richer UI.
Plan/PRD-driven generation: Build decks from a referenced plan/PRD by extracting decision points and producing one slide per decision.

Quick Start

Use the design-deck skill to generate a visual comparison deck for backend architecture options by asking: show me 3 architecture options for the backend

Frequently Asked Questions about design-deck

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I visually compare architecture options for a new project?▼

You can visually compare architecture options by generating a multi-slide decision deck that presents 2–4 high-fidelity previews side by side. This allows you to evaluate competing backend or frontend approaches and select the best fit directly from the slides.

Can I use mermaid diagrams and UI mockups in a decision deck?▼

Yes, decision decks support multiple preview formats including mermaid diagrams, UI mockups, code blocks, and HTML. You can use previewBlocks or previewHtml to render rich visual comparisons for your architecture and design choices.

How do I generate a visual comparison deck from a PRD?▼

To generate a visual comparison deck from a PRD, reference your plan or PRD document. The system automatically extracts key decision points and produces a dedicated slide with multiple options for each decision.

What is the best way to evaluate code diffs side by side?▼

The best way to evaluate code diffs side by side is by using a visual decision deck. It generates slide options with previewBlocks that display competing code approaches, allowing you to visually compare and select the optimal implementation.

Can I iterate and generate more options if I do not like the initial slides?▼

Yes, you can iterate on the generated slides. The deck supports a generate-more iteration workflow, allowing you to request additional architecture or UI options until you find the best match for your project requirements.