Design with Blocks
Systems Thinking Lab skill: describe an app in plain English, decompose it into the 7 Universal Building Blocks, get tech recommendations, and output a buildable design doc before pixels.
Overview
Design with Blocks (kayashaolu/systemthinkinglab) turns architecture-level product design into a Claude Code plugin. You describe the product; the skill decomposes features into Service, Worker, Key-Value Store, File Store, Queue, Relational Database, and Vector Database (plus User / External Service / Time), then produces a buildable design document with per-block technology recommendations. Magier lists it as essential for product/UX designers who need structure before visual polish—pairing with Review with Blocks for critique. It is process/architecture design, not a visual theme skill.
Work with LimeDock
Using this skill? LimeDock can wire it into a durable automation you own.
Skills show what's possible. LimeDock builds and runs the owned marketing, sales, and ops automations around them.
We sell owned automations for SaaS teams — live workflows that plug into Slack, CRM, and your internal platform — not just a skill list.
Link
Installation guide
/plugin marketplace add kayashaolu/systemthinkinglab
/plugin install design-with-blocks@systemthinkinglabInvoke with `/design-with-blocks`. Update later via `/plugin marketplace update systemthinkinglab`.
How to use it
1. Install the Systems Thinking Lab marketplace and the design-with-blocks plugin. 2. Run `/design-with-blocks` with a plain-language app description and constraints (users, scale, compliance). 3. Answer clarifying questions until the 7-block decomposition is stable. 4. Export/save the design doc into the repo before any UI coding. 5. Optionally continue with scaffold (mentor while building) and review-with-blocks (critique).
Example prompts
- “Use Design with Blocks to design a multi-tenant project management SaaS with file uploads and search.”
- “Decompose our marketplace MVP into the 7 building blocks and recommend starter tech per block.”
- “Turn this one-pager into a buildable design doc with queues, workers, and data stores explicit.”
- “Flag which blocks we should NOT build in v1 for a solo founder.”
Use cases and examples
- Greenfield SaaS architecture briefs
- Decompose a vague founder idea into buildable blocks
- Pre-visual system design for eng + design alignment
- Teaching juniors the 7-block vocabulary
- Avoid over-engineering before UI exploration
Prerequisites
- Claude Code with plugin marketplace support
- Willingness to spend time on architecture before UI
- Optional: Systems Thinking Lab course for deeper pattern literacy
Tips
- Do this before frontend-design—structure first, pixels second.
- Keep the design doc in-repo so later agents inherit constraints.
- Pair with review-with-blocks after the first draft.
- Don't confuse this with visual “block” UI kits—it's systems vocabulary.