Present multiple visual design directions with side-by-side previews for stakeholder selection.
npx skills add https://github.com/lolwierd/dotfiles --skill design-deck
Please help me install this Agent Skill. Skill: design-deck Source: https://github.com/lolwierd/dotfiles/tree/main/ai/dot-agents/skills/design-deck Command: npx skills add https://github.com/lolwierd/dotfiles --skill design-deck
Visual design direction decisions often require presenting multiple plausible options and collecting clear choices from stakeholders. This skill solves that by enabling side-by-side visual decks that compare architecture diagrams, UI mockups, and code decisions in a structured, plan-driven flow.
Generate a design deck containing three directions from the provided plan to illustrate different visual directions and collect user picks.
High-intent search queries and answers about installing and using this skill.
To present visual design directions side-by-side, you can generate a design deck that loads three or more visual options per decision point using code blocks, mermaid diagrams, or HTML mockups to collect explicit user selections.
Comparing architecture diagrams and UI mockups during early product design is best handled by a plan-driven design deck that presents high-fidelity side-by-side previews and supports slide-based decision points to capture user picks.
Yes, you can use HTML mockups and mermaid diagrams together to compare architecture choices. The design deck supports multiple preview formats including previewHtml and previewBlocks to visualize different architectural directions simultaneously.
To generate more visual options when initial directions are insufficient, use the optional generate-more loop within the design deck flow to extend the available choices and present additional side-by-side comparisons for stakeholder alignment.
Yes, this visual prototyping approach works directly with plan-driven and PRD flows. The design deck mechanism supports plan and PRD inputs to structure slide-based decision points and capture stakeholder selections throughout the review process.
You need a side-by-side design deck for UI prototyping and architecture reviews when explicit stakeholder alignment on design directions, architecture choices, or UI patterns is required in a repeatable, review-friendly format.
Sheldon-92Generate and evaluate multiple landing-page concepts for visual design directions.
HDeiblerDetermine prototype scope, fidelity, and stopping criteria for design planning.
nicobailonGenerate multi-slide visual decision decks comparing architecture, UI, and code approaches.
OneWave-AICompare players side-by-side with era-adjusted statistics and advanced metric explanations.
