One sign-up screen, two runs: Claude Code with and without EpicPxls
We gave Claude Code the same task twice, once alone and once with the EpicPxls MCP. Here is everything it did, with real screenshots and the HTML it wrote.
The prompts
Both start with the same sentence. The second run adds the MCP and asks for 4 versions. Neither run had plugins, hooks or a CLAUDE.md.
Design a sign-up screen for a fitness app. Write it as one self-contained HTML file named signup.html.Design a sign-up screen for a fitness app. Use the EpicPxls MCP: find 4 different fitness app UI kits, look at their real screens, then build 4 versions as signup-1.html to signup-4.html, each one following a different kit's layout, spacing and type scale. Each file is one self-contained HTML file. At the end, list which kit each version is based on.Run 1: Claude Code alone
It wrote one file in 88 seconds without looking at any reference.
signup.html
I made signup.html, a sign-up screen for a made-up fitness brand called Kinetic. It's one file with no external dependencies. I haven't opened it in a browser, so check how it looks and behaves before relying on it.Open live
Run 2: every tool call, in order
29 tool calls in 324 seconds. EpicPxls calls are in blue. Responses are trimmed and signed screen links are left out.
ToolSearchselect: search_items, get_item, get_item_screens, extract_paletteLoaded 4 EpicPxls toolssearch_itemsquery: "fitness app", category: "UI Kits", with_screens: true20 results (58 UI kits match). Picks: Fitnex, Fitness Mobile App UI Kit, Fitness app UI kit, 69 GymTrackerget_item_screensslug: "fitnex-mobile-app-ui-kit", limit: 842 screens in file, 25 rendered, 8 returned clean: Settings, Profile, Sleep Schedule, Sleep Tracker, Breakfast Details, Breakfast, Meal Planner, ATM Locationget_item_screensslug: "fitness-mobile-app-ui-kit", limit: 834 in file, 25 rendered, 8 returned clean: Splash, Onboarding 1-3, Get Started 1-2, Login v. 1, Registerget_item_screensslug: "fitness-app-ui-kit-e87322b1-…", limit: 827 in file, 25 rendered, 8 returned clean: Welcome ×2, Sign Up ×2, Splash ×2, Password ×2get_item_screensslug: "69-gymtracker-modern-gym-app-ui-kit", limit: 811 in file, 10 rendered, 8 returned clean: Workout ×5, Goals ×2, ReportBashcurl the 9 screen urls into ./refBlocked: needs approval in this permission modeBashcurl the 9 screen urls into ./ref (rewritten)Blocked: needs approval in this permission modeToolSearchselect: WebFetchLoaded WebFetchWebFetchFitness Mobile App UI Kit / RegisterPNG saved to disk (WebFetch cannot describe images)WebFetchFitness app UI kit / Sign UpPNG saved to diskWebFetchFitness app UI kit / Sign Up (second variant)PNG saved to diskWebFetchFitnex / ProfilePNG saved to diskWebFetch69 GymTracker / Main PreviewPNG saved to diskReadRegister.pngImage viewedReadSign Up.pngImage viewedReadSign Up (second).pngImage viewedReadProfile.pngImage viewedReadGymTracker Main Preview.pngImage viewedWebFetchFitness Mobile App UI Kit / Login v. 1PNG saved to diskWebFetchFitnex / Main PreviewPNG saved to disk (630 KB)ReadLogin v. 1.pngImage viewedReadFitnex Main Preview.pngImage viewed (1920 × 2176)Writesignup-1.htmlFile createdWritesignup-2.htmlFile createdWritesignup-3.htmlFile createdWritesignup-4.htmlFile createdEditsignup-3.html: placeholder status bar → SVG iconsFile updatedEditsignup-4.html: "Step 1 of 1" → "Pick a starter program"File updated
The clean config asks before it runs shell commands, so both curl downloads were blocked. The agent switched to WebFetch, which saved the images to disk, and opened them with Read.
The screens it looked at
Clean copies of the screens the agent opened. Each one links to its kit.
What it built
Screenshots at 390 and 1280 px wide. The quotes are the agent's own notes on what it took from each kit.
signup-1.html
Based on Fitness Mobile App UI Kit (SigmaGFX)
From its Register and Login screens: 375px wide, dark charcoal with a lime logo, centred 22px bold title, 52px fully rounded inputs with the label sitting in the border, a periwinkle 56px sign-up button, an "or" divider, and rounded Google/Apple buttons side by side.Open live
signup-2.html
Based on Fitness app UI kit (Sketchwire)
From its Sign Up screens: 390px wide, one question per screen with a back arrow, 22px semibold question, 56px input with 8px corners, and a lime 56px Continue button right under it. It runs as a 4-step flow (email → name → password with live rule checks → goal) and ends on a done screen.Open live
signup-3.html
Based on Fitnex Mobile App UI Kit (SigmaGFX)
From its Profile and onboarding screens: 375px wide, white with orange #FF6B2C, a square outlined back button with a centred 17px title, an 18px heading with a small grey hint, and outlined 12px-corner fields with icons. It adds Weight/Height/Age boxes with a kg/lb switch, goal choices that fill orange when picked, and square social buttons.Open live
signup-4.html
Based on 69 GymTracker - Modern Gym App UI Kit (69UI)
From its Workout screens: 430px wide in Roboto, a 28px bold left-aligned title, a periwinkle/grey Sign Up / Log In toggle, cards with 2px grey borders and 14px corners, and starter-program cards with teal stats and a Low/Mid/High gauge. It also has a navy bottom bar (used here for Google/Apple/Watch sign-up) and a floating round button.
At 390 px this version is wider than the screen and scrolls sideways. We show it exactly as the agent built it.
Open liveThe agent's final summary
Word for word, as it ended the run.
I've built four sign-up screens for a fitness app, signup-1.html to signup-4.html. Each is one HTML file with no external dependencies. I haven't opened them in a browser, so the layouts haven't been checked visually.
I found the kits with the EpicPxls search and looked at their real screens. Each file follows one kit's layout, spacing and type scale, and uses its own text and inline SVG icons (none of the kits' sample copy, logos or photos). The source kit is also noted in a comment at the top of each file.
| File | Based on | What it takes from the kit |
|---|---|---|
| signup-1.html | Fitness Mobile App UI Kit | From its Register and Login screens: 375px wide, dark charcoal with a lime logo, centred 22px bold title, 52px fully rounded inputs with the label sitting in the border, a periwinkle 56px sign-up button, an "or" divider, and rounded Google/Apple buttons side by side. |
| signup-2.html | Fitness app UI kit | From its Sign Up screens: 390px wide, one question per screen with a back arrow, 22px semibold question, 56px input with 8px corners, and a lime 56px Continue button right under it. It runs as a 4-step flow (email → name → password with live rule checks → goal) and ends on a done screen. |
| signup-3.html | Fitnex Mobile App UI Kit | From its Profile and onboarding screens: 375px wide, white with orange #FF6B2C, a square outlined back button with a centred 17px title, an 18px heading with a small grey hint, and outlined 12px-corner fields with icons. It adds Weight/Height/Age boxes with a kg/lb switch, goal choices that fill orange when picked, and square social buttons. |
| signup-4.html | 69 GymTracker - Modern Gym App UI Kit | From its Workout screens: 430px wide in Roboto, a 28px bold left-aligned title, a periwinkle/grey Sign Up / Log In toggle, cards with 2px grey borders and 14px corners, and starter-program cards with teal stats and a Low/Mid/High gauge. It also has a navy bottom bar (used here for Google/Apple/Watch sign-up) and a floating round button. |
All four check the fields before submitting, let you show or hide the password, and show a success state.
EpicPxls didn't provide a sign-up screen for Fitnex or GymTracker, so versions 3 and 4 are built from those kits' other screens. Fitzy and Sketchwire had real sign-up and login screens to follow.
The kits are paid items, so the EpicPxls terms ask you to credit the item URL if you ship something built from one.
Try it with your own prompt
Connect in one minute. Search is free, and clean screens come with a subscription.
Set up the MCPSubscribe for clean screensEarn 85% and
more on all sales
Upload your products and put them up
for sale at whatever price you want.
