| name | Mark Kashef — Visual Blueprint Methodology |
| description | ASCII wireframe-first visual planning system that aligns human vision with AI execution before any production work begins |
| version | 2.0 |
| format | completion-engine |
| workflows | 5 |
Mark Kashef — Visual Blueprint Methodology
A universal visual planning protocol that uses ASCII art wireframes as the "contract" between human creative intent and AI production execution. Instead of prompting blindly and iterating expensively at the code/design layer, this system forces visual alignment at the wireframe layer first — reducing iteration cycles by 60-80%, eliminating assumption-based failures, and positioning the human as creative director over the AI production team.
Available Workflows
| # | Workflow | Produces | Use When |
|---|
| 01 | ASCII Wireframe Generator | Production-ready ASCII wireframe for any visual asset type | You need a quick wireframe to plan layout before building anything visual |
| 02 | Visual Blueprint-to-Build Pipeline | Complete built asset from concept → wireframe → annotation → production | Full end-to-end visual project: websites, dashboards, marketing pages, PDFs |
| 03 | Slide Deck Architect | Fully wireframed and produced presentation deck | Building slide decks or pitch presentations with precise layout control |
| 04 | Design System Visualizer | Visual diagrams of technical systems, schemas, and architectures | Making database schemas, APIs, or system architectures visually understandable |
| 05 | Visual Taste Gate | Critiqued/refined wireframe ready for production | Quality-checking wireframes before committing to production, or reviewing existing designs |
Quick Reference
Slash Commands
/wireframe — Quick wireframe generation and iteration/visual-blueprint — Full end-to-end blueprint-to-build pipeline/sketch-to-build — Rapid wireframe-to-production shortcut
Stacking Recommendations
- With
mark-kashef-banana-squad: Wireframe compositions before image generation
- With
oren-creative-direction: CEV taste critique on wireframes
- With
sean-kochel-design-first-build: Wireframe as the design-first artifact
- With
kittl-graphic-design: Blueprint graphic layouts before Kittl production
- With
/generate-image: Translate wireframe specs into image gen prompts
Evolution Log
2026-04-09 — Add Conversion Traceability Matrix to Blueprint-to-Build Pipeline
- Hypothesis: Adding a Conversion Traceability Matrix (CTM) to Phase 1 of workflow 02 — where every wireframe element must declare its conversion role, the viewer decision it influences, and a testability statement — will make visual hierarchy decisions conversion-traceable rather than purely structural.
- What changed: New step 3 in Phase 1 of
workflows/02-visual-blueprint-to-build.md. Four conversion roles (Attention Capture, Desire Building, Friction Removal, Action Triggering). Elements that can't fill the matrix get cut or merged. Element order must follow the natural conversion decision sequence.
- Benchmark task: "Design the visual hierarchy for an Authority Flywheel landing page — every element justified by conversion impact"
- Baseline score: Intent 7 / Expert 7 / Adversarial 5 / Composite 6.3
- Variant score: Intent 9 / Expert 8 / Adversarial 8 / Composite 8.3 (+2.0)
- Result: KEPT — strictly additive. Biggest gain in adversarial resilience (+3): every element now has a testable conversion justification. Original wireframe methodology untouched.
Execution Prompts (structure-pure v2)
5 deterministic practitioner prompts — each carries an Output Contract, Output Skeleton, and Quality Gate. When a deliverable matches one, Read it and honor its contract instead of improvising the output shape.
- Mark Kashef — ASCII Wireframe —
skills/mark-kashef-visual-design/references/prompts-v2/ascii-wireframe.md
- Mark Kashef — Design System Visualizer —
skills/mark-kashef-visual-design/references/prompts-v2/design-system-visualizer.md
- Mark Kashef — Slide Deck Architect —
skills/mark-kashef-visual-design/references/prompts-v2/slide-deck-architect.md
- Mark Kashef — Visual Blueprint-to-Build Pipeline —
skills/mark-kashef-visual-design/references/prompts-v2/visual-blueprint-to-build.md
- Mark Kashef — Visual Taste Gate —
skills/mark-kashef-visual-design/references/prompts-v2/visual-taste-gate.md
