Peter Yang releases 25-minute design-md workflow for Claude product builds

• Peter Yang turned Tastemaker into a 25-minute Claude product-build walkthrough: problem definition, design.md, Claude Design prototype, HTML spec, core flows, and Claude Code build, as Yang's tutorial post lays out.
• The central artifact is a reusable design.md with color, typography, spacing, and visual rules; Yang's design.md post points builders to Mobbin and designmd.sh for source material.
• Claude Design's underrated move is pre-design questioning, with Yang's clarifying-questions screenshot showing persona and A/B variation choices before screen generation.
• Mobbin MCP gives agents access to 600K+ shipped app screens, and Rachel How's workflow frames it as a librarian for design context rather than a designer.

Peter's written walkthrough includes timestamps for each phase, a paid /spec skill that generates an HTML spec, and a Replit handoff note. Mobbin MCP published its agent-facing screen library page on July 29, while designmd.sh docs describe DESIGN.md as a root-level markdown file alongside AGENTS.md or CLAUDE.md. Anthropic's Claude Design page now frames the tool as a place to prototype, edit, and hand work to Claude Code.

Yang's workflow is a build order, not a prompt trick. In the full text, he says the recap is about why planning should take at least half the project time.

1. Define the user problem before building, 00:50.
2. Get inspired and create a design.md, 02:25.
3. Prototype key screens in Claude Design, 05:00.
4. Create an HTML spec for product, design, and tech, 12:59.
5. Design the core flows, default states, and edge cases, 17:02.
6. Build the app with Claude Code, 20:42.

The example app is Yang's Tastemaker link, a one-page taste profile for movies, TV shows, and games. The public Tastemaker page describes ratings, reviews, lists, following, and saved recommendations.

A DESIGN.md gives the agent taste memory. The designmd.sh docs define it as a single markdown file for colors, typography, spacing, components, dos and don'ts, usually kept in the project root.

Yang's version starts with visual references, then asks Claude to convert them into rules. In the written walkthrough, his Tastemaker prompt asks Claude to keep the interface quiet and let cover art carry the color.

The pattern has three sources of context:

• Product-specific rules, because Yang says every product should have a different design.md in one reply.
• Real app references, because Yang's post names Mobbin as a place to find patterns and screens.
• Reusable community files, because designmd.sh lists DESIGN.md files for coding agents and web builders.

Claude Design asks for constraints before drawing. Yang's screenshot shows it asking whose profile to use and what the screen variations should test, including layout density, header treatment, favorites placement, and landing hero framing.

Anthropic's June update says Claude Design can import one or several design systems from a GitHub repo, design files, or raw uploads, then check its output against those systems before showing it to the user in the Claude Design update.

The handoff is not Claude-only. In Yang's Codex reply, he says his Codex workflow is to generate UI with ChatGPT images and have Codex match it, or export Claude Design files as a zip and have Codex build from them.

Amir Mushich made the same point from the opposite side: design without a briefing is like shooting with eyes closed, and another design agent he tried also asked relevant questions.

Rachel How's Mobbin workflow turns screen research into agent context:

1. Connect Mobbin MCP to Claude, Codex, Cursor, or Antigravity.
2. Ask the agent to research how top apps in the industry design the target flow.
3. Ask it to compile the findings into a visual report.
4. Attach the report, a spec or PRD, and the design system before building.

Mobbin's own MCP page says the server connects agents to 600,000+ real product screens, with the page also claiming 621,500+ shipped screens. The Mobbin feature docs list three agent tools: search_screens, search_flows, and search_sections.

How added that every output in her video came from the exact prompt on screen, and that specificity plus context changed the result.

Replit shipped the same reference idea into a product surface. Its Replit Design announcement says Mobbin is built in and draws from more than 600,000 real-world screens from over 1,000 apps.

Yang's written walkthrough draws a line between inspiration and copying: he says he borrowed a little from Monogram because Tastemaker sits in a different product category.

The registry layer has its own caveat. The designmd.sh About page says registry files are community-contributed reference material, not official DESIGN.md files unless the company itself published them, and that the CLI downloads from the source repository rather than hosting the files.

Provenance already surfaced in the replies. Rachel How said one site was stealing screens from Mobbin, and another reply from How repeated the accusation in a separate thread.