Ein Registrierungs-Screen, zwei Läufe: Claude Code mit und ohne EpicPxls
Wir haben Claude Code zweimal dieselbe Aufgabe gegeben, einmal allein und einmal mit dem EpicPxls-MCP. Hier ist alles, was es getan hat, mit echten Screenshots und dem HTML, das es geschrieben hat.
Die Prompts
Beide beginnen mit demselben Satz. Der zweite Lauf nutzt den MCP und fragt nach 4 Versionen. Keiner der Läufe hatte Plugins, Hooks oder eine 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.Lauf 1: Claude Code allein
Es schrieb in 88 Sekunden eine Datei, ohne eine Vorlage anzusehen.
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.Live öffnen
Lauf 2: jeder Tool-Aufruf der Reihe nach
29 Tool-Aufrufe in 324 Sekunden. EpicPxls-Aufrufe sind blau. Antworten sind gekürzt, signierte Screen-Links weggelassen.
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
Die leere Konfiguration fragt vor Shell-Befehlen nach, deshalb wurden beide curl-Downloads blockiert. Der Agent nutzte stattdessen WebFetch, das die Bilder auf der Festplatte speicherte, und öffnete sie mit Read.
Die Screens, die es angesehen hat
Saubere Kopien der Screens, die der Agent geöffnet hat. Jeder verlinkt auf sein Kit.
Geöffnet: Main Preview (430 × 932)
Was es gebaut hat
Screenshots bei 390 und 1280 px Breite. Die Zitate sind die Notizen des Agenten dazu, was er aus jedem Kit übernommen hat.
signup-1.html
Nach 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.Live öffnen
signup-2.html
Nach 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.Live öffnen
signup-3.html
Nach 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.Live öffnen
signup-4.html
Nach 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.
Bei 390 px ist diese Version breiter als der Bildschirm und scrollt seitlich. Wir zeigen sie genau so, wie der Agent sie gebaut hat.
Live öffnenDie Zusammenfassung des Agenten
Wörtlich, so wie er den Lauf beendet hat.
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.
Probieren Sie es mit Ihrem eigenen Prompt
In einer Minute verbunden. Die Suche ist kostenlos, saubere Screens gibt es mit dem Abo.
MCP einrichtenAbonnieren für saubere ScreensVerdienen Sie 85% und
mehr bei allen Verkäufen
Laden Sie Ihre Produkte hoch und stellen Sie sie
zum Verkauf zu jedem beliebigen Preis zur Verfügung.
