50 Popular Apps Reverse-Engineered into Claude-Readable Design Specs: Key Patterns for UI Cloning

✍️ OpenClawRadar📅 Published: May 15, 2026🔗 Source
50 Popular Apps Reverse-Engineered into Claude-Readable Design Specs: Key Patterns for UI Cloning
Ad

u/meliwat spent weeks reverse-engineering 50 popular apps into structured markdown design specs and fed them to Claude to rebuild the UIs. The difference between near-perfect clones and drifting outputs came down to a few concrete practices observed at volume.

What Made 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.
  • Spacing as a scale, not per-element pixels. A 4/8/16/24 spacing system produced more consistent layouts than annotating every gap.
  • Navigation as a graph. Explicit screen-to-screen transitions killed the "where does this button go" guessing.
Ad

What Didn't Help

Longer prose. Past a point, more words made the output worse, not better. Keep specs concise.

Available Resources

The entire collection is open-sourced on GitHub at github.com/Meliwat/awesome-ios-design-md. Each app ships with 3 spec depths: quick reference, standard build, or full pixel-level clone. All markdown, MIT license, no dependencies.

Community Question

The author asks: if you've done UI cloning with Claude, what patterns have you found that are missing from this list? Which apps are worth adding next?

📖 Read the full source: r/ClaudeAI

Ad

👀 See Also