SearchBook a call

DESIGN ENGINEERING / Source

DesignMD

A credit-based generator that turns a website address into DESIGN.md, with a command-line tool and Figma import.

What it is

DesignMD takes a website address and produces a DESIGN.md covering color, typography, spacing, and components. It also offers a HyperText Markup Language (HTML) preview, a Figma token import, a directory of generated examples, a comparison tool, and a command-line interface (CLI). Its explanation page says the format came from Google Stitch, Google’s artificial intelligence (AI) design tool.

The Discover directory includes generated references for sites including Netflix, Atlassian, Stripe, Linear, Vercel, Anthropic, Notion, Figma, Uber, GitHub, Supabase, Netlify, Railway, and Perplexity. This is an extractor and a hosted catalog, not a published standard or a raw Cascading Style Sheets (CSS) export.

First principles

A generator that turns a web address into DESIGN.md is a pipeline with three stages: render the page, collect values from it, and have a large language model (LLM) write them up as a document. Each stage limits the next.

  • One page is a sample. A product’s design lives across many screens and states, and a single rendered page shows only some of them. Multi-page analysis widens the sample. It still cannot cover states the crawler never reaches, such as a signed-in view or an error.
  • Collected values are facts; the write-up is an interpretation. When the output calls a red the primary call-to-action color, that is the model’s reading of what it saw, not something the page declared.
  • Every run costs money. Rendering, screenshots, and model calls happen on each generation, so the service meters each one in credits.

So the useful questions for any generator are which pages it sampled, which values it observed directly, and which it inferred. DesignMD lets the user choose the sample through its single-page and multi-page modes. Its output does not answer the other two.

Who is behind it

DesignMD is built by Crowdlinker, which the research identifies as an AI-native digital product and venture studio. The footer links to Crowdlinker’s X, LinkedIn, GitHub, and company site. The @crowdlinker/designmdme package lists four Crowdlinker maintainers. No individual founder appears on the product site.

The service showed 15 dated changelog entries from 2026-04-15 through 2026-09-14. That is evidence of active product work, not of extraction accuracy.

Format and how an agent consumes it

DesignMD’s output is readable Markdown with sections for extracted design choices. Its Netflix example includes this structure:

## Primary Colors
Netflix Red (#E50914): Logo, primary CTA (Play, Sign Up)
Red Dark (#831010): Hover states, pressed buttons

## Typography Hierarchy (Netflix Sans)
Hero   52px  weight 700
H1     36px  weight 700
Body   16px  weight 400

The same example has a spacing scale, components, and design-philosophy prose. A GitHub example similarly lists colors, Mona Sans type settings, spacing values, component names, and breakpoints. The research found no public fixed frontmatter schema. These are LLM-written summaries of scraped data, not a documented raw format of Document Object Model (DOM) tokens.

The CLI provides a concrete local path:

designmdme login
designmdme --website stripe.com
designmdme stripe.com --single-page
designmdme stripe.com --multi-page
designmdme --website stripe.com --html

It captures a screenshot, extracts tokens, and writes DESIGN-<domain>.md; --html also writes an interactive preview. The package is @crowdlinker/designmdme, version 1.3.0 in the research. It is proprietary licensed and requires Node 18 or later. A June 16, 2026 changelog entry describes an installable agent skill:

npx skills add crowdlinker/skills --skill designmdme-cli --agent claude-code -g -y

The web interface is another route: generate a file, copy or download it, then put it in the project context. Figma import is a third route, for using extracted variables and styles.

Pricing and access

DesignMD uses credits and one-time top-ups. The free allocation is 4 credits on first visit plus 20 credits on signup, with no card required to start. Starter is $5 for 50 credits, Standard is $15 for 175 credits, and Pro is $30 for 375 credits. Credits do not expire. A single-page generation costs 4 credits, multi-page analysis 8, an HTML preview adds 8, and Figma import costs 12.

What works

This is a complete workflow, not a single file download. The web app, CLI, skill, preview, multi-page analysis, comparison, and Figma import all use the same metered pipeline. The free first use lowers the cost of evaluating it. The dated changelog gives users a visible record of what changed.

Multi-page analysis is especially useful in principle, because products rarely have one representative screen. The comparison tool is another practical way to inspect differences before relying on a generated spec.

What does not

The CLI is closed-source. More important, the output is an LLM’s written interpretation of scraped data, not a raw CSS or DOM dump. The research found no published extraction method or accuracy benchmark, so fidelity is UNVERIFIED. The format is visible through examples, but its authoritative schema is not published as a versioned specification.

Usage after the initial credits is metered. That is a valid business model, but it gives a team no self-hosted or open-source route.

What we take from it

Velofy could propose a single pipeline available through a browser, CLI, agent skill, and Figma workflow, with a limited free evaluation path. Those are proposals only. Velofy has not shipped an npm package, an agent skill, or a Model Context Protocol (MCP) server.

The important improvement would be to publish the extraction method, a versioned schema, and a fidelity note with each result. A generated design file should separate values observed in the source from recommendations inferred by a model.

Source ↗

← All design-engineering entries