--- title: Claude Code Built My Shopping App in 70 Minutes. It Kept... description: A builder used Claude Code to turn a Claude-generated design file into a working Expo shopping app in a single ~70-minute session, producing 26 screens, a... canonical: https://daily.dev/posts/claude-code-built-my-shopping-app-in-70-minutes-it-kept-53-of-claude-design-s-54-colours--9o0fghblq twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Claude Code Built My Shopping App in 70 Minutes. It Kept 53 of Claude Design's 54 Colours. | daily.dev og:description: A builder used Claude Code to turn a Claude-generated design file into a working Expo shopping app in a single ~70-minute session, producing 26 screens, a... og:url: https://daily.dev/posts/claude-code-built-my-shopping-app-in-70-minutes-it-kept-53-of-claude-design-s-54-colours--9o0fghblq og:image: https://api.daily.dev/og/posts/9o0FghBlQ.png og:image:alt: Claude Code Built My Shopping App in 70 Minutes. It Kept 53 of Claude Design's 54 Colours. og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Claude Code Built My Shopping App in 70 Minutes. It Kept 53 of Claude Design's 54 Colours. **[Noor Mohammad](https://daily.dev/sources/ew9hy5zthevyyefagop4g)** · [@noormohammad](https://daily.dev/noormohammad) · 1 min read · 2 upvotes · 1 comments ## Summary A builder used Claude Code to turn a Claude-generated design file into a working Expo shopping app in a single ~70-minute session, producing 26 screens, a 3-step checkout, order tracking and an admin console. The agent ran 47 files and 69 shell commands with help from 3 sub-agents, verified everything in Chrome, but buttons and the bottom tab bar lost styling on an actual iPhone device — fixed in 8 minutes. A color fidelity audit found 53 of 54 design colors preserved in the final app, with the single dropped color being a hover state that doesn't apply to touchscreens. The writeup includes prompts used, the build log, what broke on iOS, and a Figma-to-code comparison video. ## Content Claude Design file → Expo app via Claude Code, one session, ~70 minutes. Result: **26 screens, 3-step checkout, order tracking, admin console** on iPhone. The interesting part: at 1:06 a.m., after 47 files, 69 shell commands and 3 helper agents, the agent had verified everything in Chrome and was happy. On device, buttons and the bottom tab bar had lost their styling. Fixed in 8 minutes — and the root cause is the most transferable lesson in the build. Fidelity audit, colour by colour: **53 of 54 kept.** The dropped one was a hover state — phones don't hover. Real prompts, the log, what broke on iOS, and a Figma-to-code comparison. Full build on video. 🔗 [https://medium.com/@thebuildersplaybook/claude-code-built-my-shopping-app-in-70-minutes-it-kept-53-of-claude-designs-54-colours-4dc8cbec8437](https://medium.com/@thebuildersplaybook/claude-code-built-my-shopping-app-in-70-minutes-it-kept-53-of-claude-designs-54-colours-4dc8cbec8437) #reactnative #expo #claude #mobile #ai #design ## Community discussion Top comments from developers on daily.dev. **@noormohammad** · 0 upvotes > The web-preview-passes / device-fails gap is the one I'd warn anyone about before trying this — React Native Web will happily render styles that native won't apply the same way, and an agent checking in Chrome has no way to know. > > Anyone else running agent-built Expo apps: do you force verification on a simulator/device, or trust the web preview? > > 🎥 Full build: [https://www.youtube.com/watch?v=g3bdOoQzMgo](https://www.youtube.com/watch?v=g3bdOoQzMgo) --- Tags: [#ai-coding](https://daily.dev/tags/ai-coding), [#react-native](https://daily.dev/tags/react-native), [#claude-code](https://daily.dev/tags/claude-code), [#vibe-coding](https://daily.dev/tags/vibe-coding) [View this post on daily.dev](https://daily.dev/posts/claude-code-built-my-shopping-app-in-70-minutes-it-kept-53-of-claude-design-s-54-colours--9o0fghblq) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/claude-code-built-my-shopping-app-in-70-minutes-it-kept-53-of-claude-design-s-54-colours--9o0fghblq","headline":"Claude Code Built My Shopping App in 70 Minutes. It Kept 53 of Claude Design's 54 Colours.","text":"A builder used Claude Code to turn a Claude-generated design file into a working Expo shopping app in a single ~70-minute session, producing 26 screens, a 3-step checkout, order tracking and an admin console. The agent ran 47 files and 69 shell commands with help from 3 sub-agents, verified everything in Chrome, but buttons and the bottom tab bar lost styling on an actual iPhone device — fixed in 8 minutes. A color fidelity audit found 53 of 54 design colors preserved in the final app, with the single dropped color being a hover state that doesn't apply to touchscreens. The writeup includes prompts used, the build log, what broke on iOS, and a Figma-to-code comparison video.","url":"https://daily.dev/posts/claude-code-built-my-shopping-app-in-70-minutes-it-kept-53-of-claude-design-s-54-colours--9o0fghblq","datePublished":"2026-10-01T10:12:51.696Z","dateModified":"2026-10-01T10:13:06.223Z","author":{"@type":"Person","name":"Noor Mohammad","url":"https://daily.dev/noormohammad","image":"https://media.daily.dev/image/upload/s--3w4n0n-6--/f_auto/v1754054115/avatars/avatar_eW9hy5zTHEVyYeFaGOP4G?_a=BAMClqZW0","description":"Software Engineer | React, Next.js & scalable web apps | Writing on AI, blockchain & emerging tech","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":180}},"interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"comment":[{"@type":"Comment","text":"The web-preview-passes / device-fails gap is the one I’d warn anyone about before trying this — React Native Web will happily render styles that native won’t apply the same way, and an agent checking in Chrome has no way to know.\nAnyone else running agent-built Expo apps: do you force verification on a simulator/device, or trust the web preview?\n🎥 Full build: https://www.youtube.com/watch?v=g3bdOoQzMgo","datePublished":"2026-10-01T10:13:02.330Z","url":"https://daily.dev/posts/9o0FghBlQ#c-4s3YnMpd0","author":{"@type":"Person","name":"Noor Mohammad","url":"https://daily.dev/noormohammad","image":"https://media.daily.dev/image/upload/s--3w4n0n-6--/f_auto/v1754054115/avatars/avatar_eW9hy5zTHEVyYeFaGOP4G?_a=BAMClqZW0"}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/sources/ew9hy5zthevyyefagop4g","name":"Noor Mohammad"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Noor Mohammad","item":"https://daily.dev/sources/ew9hy5zthevyyefagop4g"},{"@type":"ListItem","position":3,"name":"Claude Code Built My Shopping App in 70 Minutes. It Kept 53 of Claude Design's 54 Colours."}]} ```