100 Popular Apps Reverse-Engineered into Markdown Design Specs for Claude UI Cloning

A developer reverse-engineered 50 popular apps into structured markdown design specs and fed them to Claude to rebuild UIs. After iterating, they found a few critical patterns that improved clone accuracy, and published the repo with 100 apps.

What Makes Claude Nail UI Clones

• Exact values, not ranges: #1A1A1A works; "dark gray" produces five different grays across five screens.
• State coverage up front: Listing every state (empty, loading, error, filled) stopped Claude from inventing its own states.
• Spacing as a scale: Use a 4/8/16/24 spacing system instead of per-element pixel annotations for more consistent layouts.
• Navigation as a graph: Explicit screen-to-screen transitions eliminate guessing where buttons go.

Longer prose made output worse past a point — brevity and precision matter more than volume.

What's in the Repo

The public repository at github.com/Meliwat/awesome-ios-design-md contains 100 apps, each with three spec depths: quick reference, standard build, and full pixel-level clone. All specs are markdown, MIT licensed, with no dependencies. Drop a spec into Claude for more predictable UI output.

Who Is This For

Developers using Claude to generate or clone UI components, especially for iOS or general app design.