50 Popular Apps Reverse-Engineered into Claude-Readable Design Specs: Key Patterns for UI Cloning
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.
#1A1A1Aworks. "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.
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
👀 See Also
OpenGauge: Open-source tool for tracking LLM agent costs locally
OpenGauge is an open-source tool that monitors API calls from LLM agents like OpenClaw, logging token usage, costs, and latency to a local SQLite database. It includes proxy mode for automatic logging, detailed cost statistics, and circuit breaker functionality to prevent runaway loops.
OpenClaw: Revolutionizing Website Maintenance with Continuous Surveillance
OpenClaw, an innovative AI-driven agency, redefines website maintenance by operating tirelessly around the clock. Harnessing advanced automation, it ensures optimal website functionality and promptly addresses issues.
Reframe slash command for Claude Code applies cognitive science technique to problem-solving
A developer created a /reframe slash command for Claude Code that implements a cognitive science technique called distance-engagement oscillation. The approach was tested across three open-weight LLMs with 50 problems and consistently outperformed other methods.
Spec27: Spec-Driven Validation for AI Agents – API-Level Testing Without Internal Access
Spec27 is a new tool from Safe Intelligence for spec-driven validation of AI agents. It tests agent behavior from the outside in, running adversarial and robustness checks against primary interfaces without needing SDKs, gateways, or internal traces.