# getdesign by Mohtasham Murshid Madani

[Canonical page](https://www.mohtasham.dev/work/getdesign)

The tool I built because screenshots kept hiding the exact design decisions my coding agents needed.

getdesign renders a public page inside a Daytona sandbox and returns its full-page screenshot with a CSS-backed, nine-section design.md. The hosted product is in private beta, while the skill, CLI, and SDK are public.

Role: Founder. Updated 2026-08-26.

I am not a strong designer, so most of my design work starts with references. I would give an agent a screenshot and ask it to build something similar. It could usually copy the big decisions, but it missed the details that made the original work: the exact colors, border radii, spacing, typography, shadows, and component proportions.

I built getdesign to give the agent both sides of the reference. It gets a screenshot of the rendered page and a structured design document built from the page's actual CSS.

## My work

- Founder
- Built alone
- AI agent collaboration

## Current access

- Private beta
- Public skill
- Published CLI and SDK

## August 2026

- 118 waitlist
- 46 GitHub stars
- Friends in beta

## Why a screenshot was not enough

A screenshot tells an agent what the page looks like. It does not reliably tell it whether a card uses a 12px or 16px radius, which gray belongs to a border, or how the spacing changes between sections.

getdesign collects the page's HTML and stylesheets, renders it in a real browser, and extracts colors, typography, spacing, radii, borders, shadows, and responsive rules. It then combines that evidence with screenshots instead of asking the model to guess everything from pixels.

I based the file format on Google Labs Code's DESIGN.md idea, then made getdesign's own fixed nine-section contract. Every run returns the same order, including components, layout, depth, interactions, responsive behavior, and an agent prompt guide.

## The Daytona implementation

The Daytona capture system was the hardest part to build, and it is the part I am most proud of. Each run creates a temporary Daytona sandbox and launches Chromium inside it. getdesign measures the rendered page, captures it in viewport-sized tiles, scrolls through the full page, and stitches those tiles into one screenshot. The sandbox is deleted after the run.

This took far more work than calling a screenshot API. Pages load at different speeds, some continue growing as they scroll, fixed headers appear in every tile, and the browser can report a page as ready before the visual layout has settled.

## What works today and what still breaks

getdesign is ready for private beta clients. A few friends use it, but the hosted extractor is not publicly available yet. The agent skill is public and works, although it is less reliable than the complete Daytona pipeline. The CLI and TypeScript SDK are published. The dashboard, documentation, and desktop app also work. The hosted API is not ready.

The weakest part is fetching the page source and CSS. Some sites render most of their interface on the server. Others inject styles after JavaScript runs, lazy-load assets, hide files behind authentication, or ship more CSS than the fetcher can reasonably process. The screenshot shows what appeared, but the crawler may still miss the rule that produced it.

getdesign is one of my startup projects, but Oikina gets most of my time. getdesign will stay open source. The business would come from hosted runs through a subscription, usage pricing, or a mix of both. I have not settled on the model yet.

## How getdesign captures a full page

1. Create a sandbox: Start a short-lived Daytona environment.

2. Launch Chromium: Open the submitted URL in kiosk mode.

3. Measure the page: Read the rendered height inside the sandbox.

4. Capture tiles: Screenshot each viewport while moving down the page.

5. Stitch the page: Combine the ordered tiles into one full-page image.

6. Delete the sandbox: Remove the temporary environment after the run.

## One extraction pipeline, several ways in

Entry points: Hosted web: Private beta; Agent skill: Public, lighter capture path; CLI and SDK: Published packages; Hosted API: Not ready

Evidence: Crawler: HTML, stylesheets, fonts, and CSS rules; Daytona: Rendered page and ordered screenshot tiles

Analysis: Token extraction: Colors, type, spacing, radii, borders, and shadows; Visual description: What the full rendered page actually shows; Structured synthesis: Validated nine-section document

Output: Full-page screenshot: The visual reference; design.md: Exact values and instructions for the coding agent

## what the agent misses to what getdesign adds

- exact colors: CSS-backed palette. Values come from fetched and rendered styles

- border radius: Radius scale. Repeated values become usable rules

- spacing rhythm: Layout guidance. Section and component spacing are recorded

- type hierarchy: Typography roles. Family, size, weight, and line height

- below-the-fold design: Full-page capture. Ordered tiles cover the complete landing page

- how to apply it: Agent prompt guide. The last section turns evidence into instructions

## Published CLI and SDK

```text
# CLI
npx @getdesign/cli https://cursor.com --out design.md

# TypeScript SDK
import { getDesign } from "@getdesign/sdk";
const result = await getDesign("https://cursor.com");
```

npx @getdesign/cli https://cursor.com --out design.md

The CLI and TypeScript SDK are published, although the hosted product is still private beta.

I built getdesign because 'make it look like this screenshot' was never enough. The agent needed the page and the small design decisions hiding behind it.

- [Open getdesign ↗](https://getdesign.app)
- [View the source ↗](https://github.com/MohtashamMurshid/getdesign)
- [Google DESIGN.md spec ↗](https://github.com/google-labs-code/design.md)

[Visit getdesign](https://getdesign.app)