200+ App Design Specs in Markdown – Drag into Claude or Cursor for Exact UI Clones

✍️ OpenClawRadar📅 Published: May 19, 2026🔗 Source
200+ App Design Specs in Markdown – Drag into Claude or Cursor for Exact UI Clones
Ad

Describing a UI to Claude in prose gets you close but wrong — off colors, off spacing, missing states. The fix? Hand it an exact spec instead of a description. One developer maintains a compiled list of 200+ popular apps already written up as structured markdown design specs, available at spectr.to/gallery.

What’s in each spec

  • Exact hex codes for colors
  • Type scale definitions
  • Spacing values (padding, margin, gaps)
  • Every screen state (loading, empty, error, etc.)
  • Navigation graph showing screen transitions
  • Separate specs for SwiftUI, Jetpack Compose, and Expo renderers

Each spec is a markdown file with no dependencies — you drag it straight into Claude, Cursor, or any AI agent, and it has the actual values instead of guessing.

Ad

How to use

Browse the gallery at spectr.to/gallery to find an app. Download (or copy) the markdown spec for your target framework. Drop the file into your AI agent’s context or paste it inline. The agent then uses the exact spec to generate the UI code.

The maintainer is actively seeking feedback on two points: which apps to add next, and whether dragging the spec in as a file or pasting it inline yields better results — they go back and forth on that, so real-world input is welcome.

📖 Read the full source: r/ClaudeAI

Ad

👀 See Also