Geben Sie Ihrem KI-Agenten echte UI-Kits als Vorlage
Verbinden Sie EpicPxls mit Claude Code, Cursor oder einem anderen MCP-Client. Ihr Agent durchsucht über 65.000 Design-Assets, öffnet saubere Screens aus echten UI-Kits und baut danach.
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...
Gleiche Aufgabe. Gleiches Modell. 1 Versuch gegen 4 Richtungen aus echten UI-Kits.
Den ganzen Lauf ansehenWarum KI-Designs alle gleich aussehen
Bitten Sie ein Modell ohne Vorlage um einen Screen, baut es den Durchschnitt aus allem, was es kennt. Heraus kommt ein ordentliches, sicheres Layout, das aussieht wie hundert andere.
Ein echtes UI-Kit liefert konkrete Vorgaben: ein Layout-Raster, Abstände, eine Schriftskala und die Art, wie ein Designer Formulare gelöst hat. Im Lauf oben wurden so aus einem generischen Screen 4 verschiedene Richtungen.
So funktioniert es
Drei Schritte aus dem aufgezeichneten Lauf. Tool-Aufrufe und Antworten sind echt und nur gekürzt.
Kits suchen
Der Agent fragt EpicPxls nach Fitness-UI-Kits mit gerenderten Screens. Er bekommt Titel, Preise und Screen-Anzahl zurück und wählt die 4 Kits mit den meisten Screens.
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 }] }
}
verifiedEr startet mit fertigen Kits von Designern statt mit einer leeren Seite.
Echte Screens ansehen
Für jedes Kit liefert get_item_screens saubere Screens in Originalgröße. Der Agent öffnet die Screens für Registrierung, Login und Profil und liest das Layout direkt daraus ab.
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"
}
verifiedEchte Pixel liefern echte Maße. Version 1 hat 52px hohe Felder und einen 56px Button, weil die Register- und Login-Screens des Kits genau das verwenden.
Danach bauen
Jede Version folgt dem Layout, den Abständen und der Schriftskala eines Kits, mit eigenen Texten und Icons. Der Agent vermerkt das Quell-Kit oben in jeder Datei.
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.verifiedSie bekommen 4 klar verschiedene Richtungen zur Auswahl, jede mit Link zu ihrem Kit.
Alle Tool-Aufrufe in der Fallstudie ansehenDie Ergebnisse im Vergleich
Screenshots bei 390 px Breite, genau so, wie jeder Lauf sie erzeugt hat. Klicken Sie auf einen, um das HTML live zu öffnen.
Was kostenlos ist und wofür Sie zahlen
Jeder kann sich ohne Konto verbinden. Ein Abo fügt die Screen-Bilder hinzu.
| Kostenlos | Abonnent | |
|---|---|---|
Katalog durchsuchensearch_items | check_circleJa | check_circleJa |
Artikeldetails, Preise und Linksget_item | check_circleJa | check_circleJa |
Kategorien, kostenlose Assets, kostenlose Tools, Farbpalettenlist_categories, get_free_assets, list_free_tools, extract_palette | check_circleJa | check_circleJa |
Screen-Namen und -Größenget_item_screens | Die ersten 3 pro Kit | Bis zu 25 pro Kit |
Screen-Bilder (MCP)get_item_screens | closeNein | 200 Kits pro Monat, bis zu 25 Screens pro Kit |
| Downloads der Quelldateien | closeNein | 20 pro Monat |
| Persönlicher Token | Nicht nötig | Nur für Sie |
Wenn Ihr Agent die Screens eines Kits zum ersten Mal öffnet, geht ein Teil Ihres Abonnements an den Autor dieses Kits.
- check_circleDer MCP ist Teil des normalen Abos. Keine Zusatzkosten.
- check_circleJederzeit kündbar.
- check_circleIhr Token ist persönlich und funktioniert nicht mehr, wenn das Abo endet.
In einer Minute verbunden
Wählen Sie Ihren Client und fügen Sie das Snippet ein. Das kostenlose Setup braucht keinen 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 ./refKein npm? Laden Sie die einzelne Datei: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"
}
}
}Abonnenten erhalten einen persönlichen Token, saubere Screens in voller Größe und Downloads der Quelldateien.
Funktioniert mit Claude Code, Cursor, VS Code, Windsurf und jedem Client, der MCP spricht.
Fragen
Verbinden Sie EpicPxls mit Ihrem Agenten
Über 65.000 Design-Assets, eine Zeile Setup.
Abonnieren für saubere ScreensAssets ansehenVerdienen 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.
