design-with-blocks

Convert an app idea into a 7-block architecture plan with markdown design doc.

Updated Apr 24, 2026
One-click install
npx skills add https://github.com/kayashaolu/design-with-blocks-plugin --skill design-with-blocks
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-with-blocks
Source: https://github.com/kayashaolu/design-with-blocks-plugin/tree/main
Command: npx skills add https://github.com/kayashaolu/design-with-blocks-plugin --skill design-with-blocks

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

This Skill removes the guesswork from turning an app idea into a clear architecture by forcing a disciplined decomposition into the 7 Universal Building Blocks, so you can design the right patterns before choosing tools.

Core Features & Use Cases

  • Guided app intake and clarification: prompts you to define what you are building and who your users are (humans, AI agents, or both).
  • Outside-in design discipline: walks through User, External Service, and Time influences before decomposing features.
  • Feature-to-block decomposition with reasoning: maps each feature to the correct building blocks, enforcing the framework invariants (only seven primitives, canonical names, no invented primitives).
  • Per-block technology recommendations: suggests technology options for each block using pattern-first defaults (e.g., Docker + framework for Service/Worker; Postgres/Redis/S3 equivalents for storage).
  • Deliverables you can reuse immediately: outputs a structured markdown design doc and offers to render a labeled 7-block architecture PNG (with Mermaid fallback).

Quick Start

Tell an AI assistant: design my app using the 7 Universal Building Blocks framework, and include a labeled architecture diagram, per-block technology recommendations, and a buildable markdown design doc.

Frequently Asked Questions about design-with-blocks

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

FAQPage Schema
How do I turn an app idea into a system architecture plan?

Turning an app idea into an architecture plan requires decomposing features into task primitives, storage primitives, and external entities. The 7 Universal Building Blocks framework enforces this canonical decomposition before selecting technology, yielding a structured design doc.

What are the 7 Universal Building Blocks for app design?

The 7 Universal Building Blocks are canonical primitives for app architecture mapping, categorizing system elements into users, external services, time influences, task primitives, and storage primitives. This framework prevents inventing primitives during product design sessions.

How do I map technology choices to my system design?

To map technology choices to a system design, you first decompose features into the 7 Universal Building Blocks. The framework then provides pattern-first per-block technology recommendations, suggesting Docker for services and Postgres or Redis equivalents for storage.

Can I generate an architecture diagram for my product design?

You can generate an architecture diagram for product design by applying the 7 Universal Building Blocks framework. It outputs a labeled architecture diagram as a PNG renderer, with a Mermaid fallback, alongside a structured markdown design doc.

Does this app planning framework support designing for AI agents?

Yes, this app planning framework supports designing for AI agents. During the guided app intake and clarification process, you define what you are building and specify whether your users are humans, AI agents, or both before outside-in decomposition.

What is the best way to document app architecture for a startup?

The best way to document app architecture for a startup is using the 7 Universal Building Blocks to enforce design discipline. It produces a reusable, structured markdown design doc with per-block technology mapping to align early technical decisions.