Dê ao seu agente de IA UI kits reais para se basear
Conecte a EpicPxls ao Claude Code, Cursor ou qualquer cliente MCP. Seu agente busca em mais de 65.000 recursos de design, abre telas limpas de UI kits reais e constrói a partir delas.
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...
Mesma tarefa. Mesmo modelo. 1 palpite contra 4 direções vindas de UI kits reais.
Ver a execução completaPor que todo design feito por IA parece igual
Peça uma tela a um modelo sem referência e ele cria a média de tudo o que já viu. O resultado é um layout arrumado e seguro, igual a outros cem.
Um UI kit real dá detalhes concretos para copiar: grid de layout, espaçamento, escala tipográfica e o jeito como um designer resolveu formulários. Na execução acima, isso transformou uma tela genérica em 4 direções diferentes.
Como funciona
Três passos da execução gravada. As chamadas de ferramenta e as respostas são reais, só encurtadas.
Buscar kits
O agente pede à EpicPxls UI kits de fitness com telas renderizadas. Recebe títulos, preços e número de telas, e escolhe os 4 kits com mais telas.
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 }] }
}
verifiedEle parte de kits prontos, feitos por designers, e não de uma página em branco.
Olhar telas reais
Para cada kit, get_item_screens devolve telas limpas no tamanho original. O agente abre as telas de cadastro, login e perfil e lê o layout direto delas.
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"
}
verifiedPixels reais dão medidas reais. A versão 1 tem campos de 52px e botão de 56px porque é isso que as telas Register e Login do kit usam.
Construir a partir delas
Cada versão segue o layout, o espaçamento e a escala tipográfica de um kit, com textos e ícones próprios. O agente anota o kit de origem no topo de cada arquivo.
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.verifiedVocê recebe 4 direções bem diferentes para escolher, cada uma com link para o kit de origem.
Ver todas as chamadas no estudo de casoOs resultados lado a lado
Capturas com 390 px de largura, exatamente como cada execução gerou. Clique em uma para abrir o HTML ao vivo.
O que é grátis e o que você paga
Qualquer pessoa pode conectar sem conta. A assinatura adiciona as imagens das telas.
| Grátis | Assinante | |
|---|---|---|
Buscar no catálogosearch_items | check_circleSim | check_circleSim |
Detalhes, preços e links dos itensget_item | check_circleSim | check_circleSim |
Categorias, recursos grátis, ferramentas grátis, paletaslist_categories, get_free_assets, list_free_tools, extract_palette | check_circleSim | check_circleSim |
Nomes e tamanhos das telasget_item_screens | As 3 primeiras por kit | Até 25 por kit |
Imagens das telas (MCP)get_item_screens | closeNão | 200 kits por mês, até 25 telas cada |
| Download dos arquivos-fonte | closeNão | 20 por mês |
| Token pessoal | Não precisa | Só seu |
Quando seu agente abre as telas de um kit pela primeira vez, parte da sua assinatura vai para o autor desse kit.
- check_circleO MCP faz parte da assinatura normal. Sem custo extra.
- check_circleCancele quando quiser.
- check_circleSeu token é pessoal e para de funcionar quando a assinatura termina.
Conecte em um minuto
Escolha seu cliente e cole o snippet. A configuração grátis não precisa de 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 ./refSem npm? Baixe o arquivo ú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"
}
}
}Assinantes recebem um token pessoal, telas limpas em tamanho real e downloads dos arquivos-fonte.
Funciona com Claude Code, Cursor, VS Code, Windsurf e qualquer cliente que fale MCP.
Perguntas
Conecte a EpicPxls ao seu agente
Mais de 65.000 recursos de design, uma linha de configuração.
Assine para ter telas limpasVer recursosGanhe 85% e
mais em todas as vendas
Faça upload de seus produtos e coloque-os
à venda pelo preço que você quiser.
