Dale a tu agente de IA UI kits reales en los que basarse
Conecta EpicPxls a Claude Code, Cursor o cualquier cliente MCP. Tu agente busca entre más de 65.000 recursos de diseño, abre pantallas limpias de UI kits reales y construye a partir de ellas.
https://www.epicpxls.com/mcp- code
Writesignup.html
+ "Use the EpicPxls MCP: find 4 different fitness app UI kits, look at their real screens, then build 4 versions…"
- search
search_items"fitness app" - image
get_item_screensfitness-mobile-app-ui-kit - image
get_item_screensfitness-app-ui-kit-e87322b1... - image
get_item_screensfitnex-mobile-app-ui-kit - image
get_item_screens69-gymtracker-modern-gym-ap...
Misma tarea. Mismo modelo. 1 intento frente a 4 direcciones sacadas de UI kits reales.
Ver la ejecución completaPor qué todos los diseños hechos con IA se parecen
Pide a un modelo una pantalla sin referencia y creará la media de todo lo que ha visto. Obtienes un diseño ordenado y seguro que se parece a otros cien.
Un UI kit real le da detalles concretos que copiar: una retícula, espaciado, una escala tipográfica y la forma en que un diseñador resolvió los formularios. En la ejecución de arriba, eso convirtió una pantalla genérica en 4 direcciones distintas.
Cómo funciona
Tres pasos de la ejecución grabada. Las llamadas y las respuestas son reales, solo recortadas.
Buscar kits
El agente pide a EpicPxls UI kits de fitness con pantallas renderizadas. Recibe títulos, precios y número de pantallas, y elige los 4 kits con más pantallas.
search_items(query: "fitness app", category: "UI Kits", with_screens: true){
"results": [
{ "title": "Fitfee - Fitness Mobile App", "price": 15, "screens": 15 },
{ "title": "69 GymTracker - Modern Gym App UI Kit", "price": 10, "screens": 10 },
{ "title": "Fitness app UI kit", "price": 24, "screens": 25 },
{ "title": "Fitnex Mobile App UI Kit", "price": 12, "screens": 25 },
{ "title": "Fitness Mobile App UI Kit", "price": 19, "screens": 25 },
... 15 more
],
"facets": { "category_title": [{ "key": "UI Kits", "doc_count": 58 }] }
}
verifiedParte de kits terminados, hechos por diseñadores, y no de una página en blanco.
Mirar pantallas reales
Para cada kit, get_item_screens devuelve pantallas limpias a su tamaño original. El agente abre las pantallas de registro, login y perfil y lee el diseño directamente de ellas.
get_item_screens(slug: "fitness-mobile-app-ui-kit", limit: 8){
"item": { "title": "Fitness Mobile App UI Kit", "source_type": "figma" },
"screens_in_file": 34, "rendered": 25, "returned": 8,
"screens": [
{ "title": "Splash", "width": 375, "height": 812, "url": "(signed)", "watermarked": false },
...
{ "title": "Login v. 1", "width": 375, "height": 812, "url": "(signed)", "watermarked": false },
{ "title": "Register", "width": 375, "height": 812, "url": "(signed)", "watermarked": false }
],
"how_to_use": [
"Copy the layout, spacing and type scale. Do not copy the sample copy, logos or photos.",
...
]
}
{
"item": { "title": "Fitness Mobile App UI Kit", "source_type": "figma" },
"screens_in_file": 34, "rendered": 25, "returned": 3,
"screens": [
{ "title": "Splash", "width": 375, "height": 812 },
{ "title": "Onboarding 1", "width": 375, "height": 812 },
{ "title": "Onboarding 2", "width": 375, "height": 812 }
],
"note": "Showing 3 of 25 rendered screens. Subscribers get up to 25 per item and the editable source file: https://www.epicpxls.com/subscribe"
}
verifiedPíxeles reales dan medidas reales. La versión 1 tiene campos de 52px y un botón de 56px porque eso usan las pantallas Register y Login del kit.
Construir a partir de ellas
Cada versión sigue el diseño, el espaciado y la escala tipográfica de un kit, con sus propios textos e iconos. El agente anota el kit de origen al principio de cada archivo.
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.verifiedTienes 4 direcciones claramente distintas para elegir, cada una enlazada a su kit.
Ver todas las llamadas en el caso de estudioLos resultados, uno al lado del otro
Capturas a 390 px de ancho, tal como las produjo cada ejecución. Haz clic en una para abrir el HTML en vivo.
Qué es gratis y qué pagas
Cualquiera puede conectarse sin cuenta. La suscripción añade las imágenes de las pantallas.
| Gratis | Suscriptor | |
|---|---|---|
Buscar en el catálogosearch_items | check_circleSí | check_circleSí |
Detalles, precios y enlaces de los productosget_item | check_circleSí | check_circleSí |
Categorías, recursos gratis, herramientas gratis, paletaslist_categories, get_free_assets, list_free_tools, extract_palette | check_circleSí | check_circleSí |
Nombres y tamaños de pantallasget_item_screens | Las 3 primeras por kit | Hasta 25 por kit |
Imágenes de pantallas (MCP)get_item_screens | closeNo | 200 kits al mes, hasta 25 pantallas cada uno |
| Descarga de archivos fuente | closeNo | 20 al mes |
| Token personal | No hace falta | Solo tuyo |
Cuando tu agente abre las pantallas de un kit por primera vez, parte de tu suscripción va al autor de ese kit.
- check_circleEl MCP forma parte de la suscripción normal. Sin coste extra.
- check_circleCancela cuando quieras.
- check_circleTu token es personal y deja de funcionar cuando termina la suscripción.
Conéctate en un minuto
Elige tu cliente y pega el fragmento. La configuración gratis no necesita token.
claude mcp add --transport http epicpxls https://www.epicpxls.com/mcpcodex mcp add epicpxls --url https://www.epicpxls.com/mcpnpx epicpxls login
npx epicpxls search "fitness app"
npx epicpxls screens <slug> --out ./ref¿Sin npm? Descarga el archivo único:curl -fsSL https://www.epicpxls.com/cli -o epicpxls && chmod +x epicpxls
~/.cursor/mcp.json{
"mcpServers": {
"epicpxls": {
"url": "https://www.epicpxls.com/mcp"
}
}
}.vscode/mcp.json{
"servers": {
"epicpxls": {
"type": "http",
"url": "https://www.epicpxls.com/mcp"
}
}
}{
"mcpServers": {
"epicpxls": {
"type": "http",
"url": "https://www.epicpxls.com/mcp"
}
}
}Los suscriptores reciben un token personal, pantallas limpias a tamaño completo y descargas de archivos fuente.
Funciona con Claude Code, Cursor, VS Code, Windsurf y cualquier cliente que hable MCP.
Preguntas
Conecta EpicPxls a tu agente
Más de 65.000 recursos de diseño, una línea de configuración.
Suscríbete para pantallas limpiasVer recursosGana el 85% y
más en todas las ventas
Sube tus productos y ponlos
a la venta al precio que desees.
