Communitygithub.com

Designer

Durchsuchen Sie Designeer (designeer.xyz), einen handkuratierten Katalog mit Design-Inspiration, UI-Ressourcen, Werkzeugen und Portfolios für reale Frontend-Referenzen. Verwenden Sie es, wenn der Benutzer nach Landing-Page-, Hero-, Navbar-, Footer-, Pricing- oder Portfolio-Referenzen fragt; Designrichtungen wünscht, die auf bestehenden Websites basieren; eine Ausgangspalette, Typografie oder Bewegungsanregung benötigt; oder sagt, ein Design wirke generisch und brauche eine konkrete Referenz. Ruft Metadaten und Markdown ab, niemals Medien, und gibt immer Designeer und den ursprünglichen Ersteller an.

Was ist Designer?

Designer ist eine kognitive Kompetenz für KI-Assistenten, die als Referenzindex und nicht als Materialbibliothek fungiert. Sie ermöglicht es dem Assistenten, den handkuratierten Katalog von Designeer (designeer.xyz) zu durchsuchen, der Design-Inspiration, UI-Ressourcen, Werkzeuge und Portfolios für reale Frontend-Referenzen enthält. Die Kompetenz unterstützt die CLI-basierte Suche in Sammlungen (Inspiration, Ressourcen, Werkzeuge, Portfolios) und den Abruf von Detailinformationen zu einzelnen Einträgen wie Paletten, Kategorien und ursprünglichen Erstellern. Sie ist besonders nützlich, wenn Benutzer nach Designrichtungen für Landing Pages, Heldenbereiche, Navigationsleisten, Fußzeilen, Preisseiten oder Portfolios fragen oder wenn ein Design als generisch empfunden wird und eine konkrete, reale Referenz benötigt wird. Die Kompetenz erzwingt strenge Regeln zur Quellenangabe und verhindert das Herunterladen oder Kopieren von Medien, sodass die Arbeit der ursprünglichen Kreativen stets gewürdigt wird. Sie arbeitet mit einem CLI-Skript, das Caching, Ratenbegrenzung und Fehlerbehandlung integriert, und bietet strukturierte Referenzkarten und Designrichtlinien, die die Synthese von Designprinzipien (nicht pixelgenauen Kopien) erleichtern.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/HaiXuNan/designeer-skill/tree/HEAD

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht Designer?

Verwenden Sie Designeer als Referenzindex, nicht als Materialbibliothek. Er sagt Ihnen, was existiert und wo es lebt; das Werk selbst gehört dem jeweiligen Ersteller.

Harte Regeln

  • Geben Sie immer Designeer — <Titel> (<kanonische URL>) an und fügen Sie den Ersteller sowie die Original-URL hinzu, wenn die Seite diese bereitstellt.
  • Laden Sie niemals Poster, Videos oder Find-Medien herunter, kopieren Sie sie nicht, hosten Sie sie nicht erneut und bündeln Sie sie nicht. Die CLI berührt niemals cdn.designeer.xyz.
  • Präsentieren Sie Designeers Beschreibungen oder Kuration niemals als Ihre eigenen Erkenntnisse.
  • Zitieren Sie niemals mehr als 25 Wörter von einer Seite.
  • Spiegeln Sie den Katalog nicht und crawlen Sie nicht in großen Mengen. Halten Sie Detailabrufe auf fünf pro Anfrage und lassen Sie die CLI das Caching und die Ratenbegrenzung übernehmen.
  • Wenn der Benutzer eine exakte Nachbildung eines Designs wünscht, liefern Sie die zugrunde liegenden Prinzipien und verweisen Sie auf das Original, nicht auf einen Klon.

Befehle

Ausführen aus dem Skill-Verzeichnis:

node scripts/designeer.mjs search "fintech landing" --collection inspiration --limit 5
node scripts/designeer.mjs get resources/fontshare --json
node scripts/designeer.mjs palette resources/fontshare
node scripts/designeer.mjs latest --collection resources --limit 5
node scripts/designeer.mjs sync
node scripts/designeer.mjs health

search akzeptiert --collection inspiration|resources|tools|portfolios, --limit 1-20, --live um den lokalen Index zu umgehen, sowie --json. get und palette akzeptieren einen Slug, einen Site-Pfad oder eine vollständige Designeer-URL.

Die CLI speichert Antworten unter ~/.cache/designeer/ für sieben Tage zwischen, greift auf das System-Temp-Verzeichnis zurück, wenn dieser Pfad nicht beschreibbar ist, validiert mit ETags neu, setzt Anfragen im Abstand von einer Sekunde und wiederholt 429/5xx-Fehler mit Backoff. Überschreiben Sie den Speicherort mit DESIGNEER_CACHE_DIR.

Arbeitsablauf

  1. Wandeln Sie die Aufgabenstellung in zwei oder drei Designachsen um: Stimmung, Informationsdichte, Bewegung, Typografie-Persönlichkeit, Farbtemperatur.
  2. Durchsuchen Sie zuerst die Metadaten. Beurteilen Sie nach Name, Schlagzeile, Kategorie und Sammlung; rufen Sie noch keine Details ab.
  3. Rufen Sie maximal fünf Kandidaten ab. Extrahieren Sie die Palette, Kategorie, Website und den ursprünglichen Ersteller aus dem Markdown.
  4. Schreiben Sie eine Referenzkarte pro Kandidat mit Quellenangabe.
  5. Synthetisieren Sie zwei originelle Richtungen. Jede gibt an, welches Prinzip entlehnt wurde, nicht welche Pixel kopiert wurden.
  6. Implementieren Sie und überprüfen Sie das Ergebnis dann anhand der Richtung, nicht anhand des Referenz-Screenshots.

Referenzkarte

Referenz: <Titel>
Warum es passt: <eine Zeile, verknüpft mit der Aufgabenstellung>
Palette: <Hex-Liste>
Quelle: Designeer — <Titel> (<kanonische URL>)
Ersteller / Original: <Ersteller> (<Original-URL>)

Designrichtung

Richtung <n>: <Name>
These: <ein Satz>
Typografie: <Schriftfamilie oder Kombination>, <Skalierungsnotizen>
Farbe: <3-5 Token mit Rollen>
Layout: <Raster, Dichte, Kantenbehandlung>
Bewegung: <ein oder zwei Momente, mit Dauer und Easing-Absicht>
Entlehntes Prinzip: <was, von welcher Referenz>
Bewusst anders: <was Sie nicht kopieren>

Fehlermodi

  • Eine Suche liefert keine Ergebnisse: Versuchen Sie ein breiteres Nomen, wechseln Sie die Sammlung oder verwenden Sie latest.
  • Die Site ändert ihre Struktur: Führen Sie health aus. Wenn es eine Schema-Unstimmigkeit meldet, greifen Sie auf get index und llms.txt zurück und melden Sie die Abweichung, anstatt zu raten.
  • Eine Seite ist verschwunden: Designeer ist ein Live-Katalog, also lassen Sie die Referenz fallen, anstatt sie aus dem Gedächtnis zu rekonstruieren.

Verwandte Skills