# Understanding Software by Mohtasham Murshid Madani

[Canonical page](https://www.mohtasham.dev/work/understanding-software)

A Making Software landing-page clone that turned into an AI-assisted field-guide generator.

I built Understanding Software with an AI agent after falling in love with Dan Hollick's field-guide design. The Artifact Studio now plans, writes, illustrates, revises, and exports custom software explanations.

Role: Creator. Updated 2026-08-26.

Understanding Software started as a weekend clone of Dan Hollick's Making Software website. I loved his work and wanted to see whether I could recreate that technical field-guide style myself.

There was no larger product idea at first. It was a design problem. I worked closely with an AI agent, gave it very specific visual instructions, reviewed what it produced, and kept iterating until the page felt right.

## Project type

- Weekend project
- Design experiment
- AI collaboration

## What it became

- Visual field guide
- Artifact Studio

## Artifact output

- 2 to 8 sections
- Up to 4 figures
- Markdown and DOCX

## It started as a clone

Making Software gave me the basic reference: dense editorial layouts, blue technical drawings, grid paper, numbered figures, and explanations that treat diagrams as part of the writing.

I did not begin by trying to invent another educational platform. I wanted to understand how that visual system worked by rebuilding something similar. The clone was the exercise.

## The design was the hardest part

The design is still the part I am most proud of. Getting the page to feel technical without becoming unreadable took a lot of iteration. The typography, spacing, diagrams, borders, labels, and small annotations all had to work together.

My agent wrote much of the implementation, but it was not a one-prompt build. I directed the work, pointed out what felt wrong, and asked for specific changes. We kept going back and forth until the page matched the idea in my head. A lot of designers I know have seen or used the landing page, and the design is usually what they respond to first.

## Then the clone became a product idea

While building the clone, I realized the format could explain more than one fixed set of topics. That became the Artifact Studio. A reader asks a software question. The agent plans a field guide with two to eight sections, decides whether diagrams would help, writes the sections, generates the figures, and assembles everything into one live document.

Revisions preserve sections and figures that still work instead of rebuilding the entire guide. Three section writers and two figure jobs can run at the same time. The finished artifact can be copied or downloaded as Markdown or an editable Word document.

The exports are useful if someone wants to keep or change the guide. They are also a marketing experiment for my Markdown-to-Docx package. This is not a startup or a finished educational product. It is a weekend project I made for my own satisfaction.

## From one question to a finished field guide

1. Ask: The reader brings a software question.

2. Plan: The agent defines the sections and useful figures.

3. Write and draw: Section writers and figure jobs run together.

4. Stream: The document assembles while the work finishes.

5. Review: The reader inspects the prose, structure, and diagrams.

6. Revise: Useful sections and figures keep their stable IDs.

7. Export: Copy it or download Markdown or DOCX.

## How I worked with the agent on the original clone

Reference: Making Software: Layout, typography, diagrams, and annotations

Direction: Specific instructions: What to reproduce and what felt wrong; Visual review: Spacing, hierarchy, labels, and density

Agent work: Page implementation: Next.js, React, and CSS; Technical diagrams: Custom SVG figures and annotations

Iteration: Compare and correct: Repeat until the page matched the intended feeling

## reader action to studio mechanism

- ask a question: Structured artifact plan. Two to eight sections and up to four figures

- approve the plan: Parallel generation. Three section writers and two figure jobs

- watch the document: Streamed artifact state. Sections appear while other jobs continue

- request a revision: Stable section and figure IDs. Unaffected work does not regenerate

- finish: Copy, Markdown, or DOCX. The document can leave the site

## DOCX export

```text
const buffer = await convertMarkdownToArrayBuffer(markdown, {
  documentType: "document",
  imageHandling: {
    dataUrls: { enabled: true },
    maxImageBytes: 10_485_760
  }
});
```

npm run dev

The final artifact can leave the site as an editable Word document.

I started by cloning a website I loved. Somewhere along the way, it became a way for me and an AI agent to design explanations together.

- [Open the field guide ↗](https://understanding-software.vercel.app)
- [View the source ↗](https://github.com/MohtashamMurshid/understanding-software)
- [View Making Software ↗](https://www.makingsoftware.com)

[Visit Understanding Software](https://understanding-software.vercel.app)