Una pantalla de registro, dos ejecuciones: Claude Code con y sin EpicPxls
Le dimos a Claude Code la misma tarea dos veces, una solo y otra con el MCP de EpicPxls. Aquí está todo lo que hizo, con capturas reales y el HTML que escribió.
Los prompts
Los dos empiezan con la misma frase. La segunda ejecución añade el MCP y pide 4 versiones. Ninguna tenía plugins, hooks ni 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.Ejecución 1: solo Claude Code
Escribió un archivo en 88 segundos sin mirar ninguna referencia.
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.Abrir en vivo
Ejecución 2: cada llamada, en orden
29 llamadas en 324 segundos. Las llamadas a EpicPxls van en azul. Las respuestas están recortadas y se han quitado los enlaces firmados de las pantallas.
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
La config limpia pide permiso antes de ejecutar comandos de shell, así que las dos descargas con curl se bloquearon. El agente cambió a WebFetch, que guardó las imágenes en disco, y las abrió con Read.
Las pantallas que miró
Copias limpias de las pantallas que abrió el agente. Cada una enlaza a su kit.
Abiertas: Main Preview (430 × 932)
Lo que creó
Capturas a 390 y 1280 px de ancho. Las citas son las notas del propio agente sobre lo que tomó de cada kit.
signup-1.html
Basado en 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.Abrir en vivo
signup-2.html
Basado en 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.Abrir en vivo
signup-3.html
Basado en 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.Abrir en vivo
signup-4.html
Basado en 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.
A 390 px esta versión es más ancha que la pantalla y se desplaza de lado. La mostramos tal como la hizo el agente.
Abrir en vivoEl resumen final del agente
Palabra por palabra, tal como terminó la ejecución.
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.
Pruébalo con tu propio prompt
Conéctate en un minuto. La búsqueda es gratis y las pantallas limpias vienen con la suscripción.
Configurar el MCPSuscríbete para pantallas limpiasGana el 85% y
más en todas las ventas
Sube tus productos y ponlos
a la venta al precio que desees.
