Live preview, running the exact code the prompt carries
Magneto Charge Schedule
A week of overnight charging drawn as seven columns of 18:00 to 09:00 with the off peak window shaded and each night's block sitting inside it, so the reason for the schedule is visible rather than stated. Every block is derived from the miles that day needs and placed backwards from the departure time, and the saving compares the week's energy at the off peak rate against the same energy at the peak rate.
Paste into Claude Code, Cursor or Windsurf. It builds this screen 1:1 in your app.
What the prompt carriesEverything inlined, nothing fetched
- screen.tsx
- written in full, ready to paste
- 543 lines
- Inter
- Regular, Medium, Semi Bold, Bold, Extra Bold
- via @expo-google-fonts
- Integration rules
- ships 1:1, never re-themed to your app
- SDK 52+
The rule this design follows
It ships exactly as previewed: same colors, same type, same copy, same motion. The prompt tells your agent to build that, and not to adapt it to your existing theme.
