badmuriss/incredibly-pretty-websites

Unglaublich schöne Websites

Ein zentraler Wahrheitsgeber für die visuellen und technischen Entscheidungen hinter einer Website, die wie von einem echten Produktteam ausgeliefert aussieht – nicht wie von einem Sprachmodell, das „modern und sauber“ erraten hat.

Koordination mit $refero-design

Wenn $refero-design verfügbar ist, lade es zuerst und lass es die visuelle Recherche, das Refero-Tool-Routing, die Synthese, den Referenz-Lock und das Entscheidungsprotokoll besitzen. Verwende dieses Skill nach diesem Lock, um die Implementierungs-Constraints zu besitzen: Umfang des Bestandssystems, Oberflächenmodus, Framework-Entscheidungen, räumliche und Interaktions-Handwerkskunst, reaktionsfähiges Verhalten, Anti-Slop-Prüfungen und gerenderte Validierung.

Die Reihenfolge ist festgelegt:

1. $refero-design recherchiert Stile, Bildschirme und Abläufe proportional zur Aufgabe.
2. $refero-design wählt eine primäre Richtung aus und zeichnet begrenzte sekundäre Einflüsse auf.
3. Dieses Skill übersetzt den genehmigten Lock in einen Richtungsvertrag und die Produktion-UI.
4. Dieses Skill validiert das gerenderte Ergebnis gegen den Lock und die unterstützten Plattformen.

Führe beide Skills nicht als konkurrierende Geschmacksautoritäten aus. Refero liefert Produkt- und visuelle Beweise. Dieses Skill liefert die Disziplin der Frontend-Implementierung. Wenn Refero MCP nicht verfügbar ist, verwendet $refero-design seinen gebündelten Fallback, dann fährt dieses Skill mit dem resultierenden Lock fort.

Das Standard-Framework ist React (Vite / Next / vite-react-ssg). Astro, Vue und Vanilla CSS/JS sind ebenfalls erstklassig; framework-spezifische Redewendungen befinden sich in framework-adapters.md. Wenn nichts angegeben ist, nimm React an. Wenn der Bestand Astro ist oder die Aufgabenbeschreibung EmDash erfordert, behalte das serverseitige Rendering bei und verwende standardmäßig Astro-Komponenten, füge Framework-Inseln nur dort hinzu, wo Interaktion wirklich benötigt wird.

So wird es verwendet

0. Lese direction-workflow.md. Kläre die Wahrheit des Bestandssystems, setze dann CHANGE_SCOPE und SURFACE_MODE.
1. Recherchiere proportional zum Umfang. Vollständige Recherche ist für world obligatorisch; local erbt die umgebende Oberfläche.
2. Verwende das Projekttyp-Preset (Abschnitt 1), um die Bereichsbegrenzung und die technischen Kosten zu kalibrieren, nicht um die Ästhetik zu wählen.
3. Leite die Richtung aus den Beweisen ab. Verwende Vibe- und Layout-Archetypen als Vokabular und Herausforderer, niemals als erforderliches Menü.
4. Halte den Richtungsvertrag vor dem Code fest, erstelle dann jeden Abschnitt neu.
5. Wende die technischen Referenzen für Abstände, Bewegung, Zustände, Reaktionsfähigkeit und Barrierefreiheit an.
6. Führe eine Selbstprüfung gegen Abschnitt 14 und die KI-Signale in Abschnitt 13 durch, schließe dann die begrenzten visuellen Durchgänge ab.

Referenzdateien:

• direction-workflow.md — Zielkontext, CHANGE_SCOPE, SURFACE_MODE, Richtungsvertrag, Comps-Gate, begrenzter Abschluss
• foundations.md — maßgebliche Grenzen für Helden-Typografie, Viewport-Höhe, Bewegungseigenschaften, Augenbrauen und Priorität des Bestandssystems
• spatial-design.md — 4-Punkt-Skala, Hierarchie, Container-Queries
• motion-design.md — Easing, Dauern, reduzierte Bewegung, ein Katalog von Übergangsmustern
• interaction-design.md — die 8 Zustände, focus-visible, Popover, Modale
• laws-of-ux.md — Kompositionsheuristiken mit benannter Forschung: Hick, Miller, Fitts, Von Restorff, Peak-End, Jakob, kognitive Belastung
• form-validation.md — Validierungszeitpunkt, die Eingabe-Zustandsmaschine, :user-invalid, Fehlerzusammenfassungen, Schema als plattformübergreifender Vertrag
• responsive-design.md — Mobile-First, Zeigerabfragen, Safe-Area, srcset
• framework-adapters.md — React / Vue / Vanilla-Äquivalente für Bewegung, Zustand, Hydration
• component-libs.md — (nur React) animierte Komponenten zum Kopieren/Einfügen: Magic UI, React Bits, animierte Lucide-Icons über die shadcn-Registry
• scroll-motion.md — (Tier 3) GSAP ScrollTrigger + Lenis Smooth-Scroll, mit Leistungs- und Barrierefreiheits-Schutzmaßnahmen
• design-references.md — (Recherche, kostenlos) die No-Refero-Rechercheschicht: Echte Tokens einer Live-Site lesen, DESIGN.md-Pakete, kostenlose Galerien, öffentliche Designsysteme und ein Segment → Referenz-Bank
• media-pipeline.md — Kostenlose Stockfotografie (Pexels/Unsplash/Pixabay/Public Domain, mit den quellspezifischen Hosting-Regeln) + Magnifics lizenzierter Katalog über REST + generierte Standbilder über zwei Peer-Strecken ($image-gen / Magnific MCP), Alpha-Cutout-Routen, + (Tier 3, kostenbegrenzt) Bild → Video über Magnific, mit einem <video>-Rezept
• style-interview.md — (Interview-Modus) Wann man den Benutzer nach der Richtung fragen sollte, das Drehbuch der Runde, wie man Kandidaten aus der Recherche erstellt, anstatt die Archetypliste als Menü anzubieten
• redesign.md : (Redesign-Modus) Scannen, Diagnostizieren, Beheben; Moduserkennung (Greenfield / Preserve / Overhaul); was sich niemals leise ändert
• conversion-diagnosis.md — (Landingpages) das Pre-Text-Auslieferungsgate plus die zehnschichtige Akquisitions- und Conversion-Diagnose

SEO, Barrierefreiheitswerte und Core Web Vitals werden hier nicht geprüft. Dieses Skill erstellt; die Überprüfung einer Live-URL gehört zum site-audit-Skill, das die On-Page-SEO-Regeln (Titel, Meta, Canonical, OG, Schema, Robots, Sitemap), die AEO/GEO-Ebene, den axe-core-Durchlauf und das CWV-Budget besitzt. Baue bis zu §14s Pre-Flight, weise dann site-audit auf die bereitgestellte URL an.

Eine Live-Landingpage wird vor dem Umschreiben ihres Textes diagnostiziert. Lese conversion-diagnosis.md, öffne die bereitgestellte Seite in einem echten Benutzer-Browserprofil und einem gerenderten Googlebot-Profil und stelle fest, ob beide eine funktionierende Seite erhalten. Ein defektes Skript, ein langsamer erster Bildschirm, ein blockierter Crawler, ein toter CTA oder ein unbenutzbares Formular haben Vorrang vor Textverfeinerung. SEO verdient den Besuch; das gelieferte Erlebnis muss ihn in einen Lead verwandeln.

---

Zwei Modi: Autonom (Standard) vs. Interview

Autonom (Standard): Arbeite mit dem Kontext, den du bereits hast, plus vernünftige Annahmen aus dem Preset. Frage den Benutzer nichts. Fehlt ein Detail? Nimm den wahrscheinlichsten Wert an, notiere die Annahme in einer Zeile und mach weiter. Dies ist der einzig sichere Modus, wenn kein Mensch im Kreislauf ist.

Interview: Wird ausgelöst, wenn der Aufruf explizit danach fragt (--interview, "Modo entrevista", "frag mich nach dem Stil"), oder wenn CHANGE_SCOPE=world, die Sitzung besucht wird und der Benutzer keine Referenz und keine Marke angeheftet hat. Es läuft in zwei Schritten ab: Sammle die Aufgabenbeschreibung (Segment/Produkt, Zielgruppe, Ziel, Ton, Einwand, Einschränkungen, Seiten, die sie bereits mögen), dann recherchiere zuerst und komme mit zwei oder drei konkreten Richtungen zur Auswahl zurück — Leinwand, Typografie, Akzentrolle, Medienstrategie, charakteristisches Element und das reale Produkt, von dem jede stammt. Der Punkt ist eine Seite mit dem Gesicht des Benutzers, nicht mit einem kompetenten Standard.

Beide Modi führen die Recherche aus Abschnitt 0 durch, und beide enden mit demselben Referenz-Lock und Richtungsvertrag. Der einzige Unterschied ist, wer die Geschmacksentscheidung trifft. Vollständiges Protokoll, Frageskript, die Anti-Menü-Regel und die Rundenlimits: style-interview.md.

Eine bestehende Seite neu gestalten, anstatt sie neu zu bauen? Siehe redesign.md für den Redesign-Modus (Scannen, Diagnostizieren, Beheben) und die Regeln für Preserve vs. Overhaul. Beide oben genannten Modi gelten weiterhin; ein Redesign schützt lediglich das, was die Live-Seite bereits verdient.

---

0. ZUERST RECHERCHIEREN — proportional zum Änderungsumfang

Nicht verhandelbar für CHANGE_SCOPE=world. Eine vollständig definierte Marke entschuldigt nicht, die strukturelle Recherche für eine neue oder ersetzte Welt zu überspringen. Für surface recherchiere vergleichbare Strukturen und Abläufe, während du das Bestandssystem beibehältst. Für local ist die umgebende Oberfläche der primäre Beweis; recherchiere nur das, was sie nicht beantworten kann. Siehe direction-workflow.md.

Jede visuelle Entscheidung beginnt mit Beweisen dafür, was echte Produkte tatsächlich ausgeliefert haben, nicht mit der Erinnerung des Modells an „guten Geschmack". Modelle sind stark in Code und Logik und schwach in Produktgeschmack, also verankere den Geschmack an echten Referenzen.

Wo recherchieren

Empfohlen Premium — Refero (refero.design). Wenn die mcp__refero__*-Werkzeuge verfügbar sind, verwende sie zuerst. Drei Ebenen:

• Stile (visuelle Richtung, hier starten): refero_search_styles(query) → refero_get_style(...).
• Bildschirme (konkrete UI): refero_search_screens(query, platform:"web"|"ios") → refero_get_screen(...), refero_get_similar_screens(...), refero_get_screen_image(...).
• Abläufe (mehrschrittige Reisen — Onboarding/Checkout): refero_search_flows(...) → refero_get_flow(...).
• Bildschirme verwenden UUIDs, Abläufe numerische IDs. Paginiere nur mit page. get_screen_image kostet einen Vision-Aufruf — verwende es nur, wenn du Pixel inspizieren musst.

Kostenloser Pfad (kein Refero) — design-references.md. Refero macht diesen Schritt schnell; es ist nicht das, was ihn möglich macht. Der kostenlose Pfad erzeugt denselben Referenz-Lock aus derselben Klasse von Beweisen, und die Datei enthält das gesamte Adressbuch: wie man die echten Tokens einer Live-Site mit curl/WebFetch liest (der stärkste Beweis, den es gibt, besser als jeder Screenshot), die Open-Source- DESIGN.md-Pakete (Erstanbieter bei VoltAgent/official-design-md, 70+ reverse-engineered Marken bei VoltAgent/awesome-design-md), die verifiziert kostenlosen Galerien (siteinspire, httpster, minimal.gallery, onepagelove-Abschnitte, dark.design, navbar.gallery, footer.design), die öffentlichen Designsysteme und eine Segment → echte Produkte zum Studieren-Bank, damit du nie von einer leeren Abfrage startest.

Kurzversion, falls du nichts anderes liest: Wähle zwei oder drei echte Produkte im Segment aus, öffne sie, extrahiere ihren Typografie-Stapel und ihre CSS-Custom-Properties, benenne, was jedes gut macht, und protokolliere es. Schließe niemals ein Merkmal fest, das du nicht tatsächlich angesehen hast.

Der Workflow

1. Kontext + kurze Aufgabenbeschreibung: Kläre die Wahrheit des Bestandssystems, CHANGE_SCOPE, SURFACE_MODE, was / für wen / Plattform / Ziel / Ton / Einwand / Einschränkung. (Autonom: ableiten. Interview: fragen.)
2. Stile zuerst: Zwei oder drei Suchen aus verschiedenen Blickwinkeln — eine ästhetisch, eine Domäne/Segment, eine starke Referenzmarke. Öffne eine bis drei starke Richtungen.
3. Bildschirme/Abläufe, wenn du konkrete Bildschirmstruktur oder Ablauflogik benötigst. Für SURFACE_MODE=persuade muss das Pixelziel selbst eine überzeugende Marketingfläche mit einem sichtbaren fokalen Medium sein. Legal-/AGB-Seiten, Dokumentationen, Verzeichnisse, Änderungsprotokolle, Archivindizes, Dashboards und textlastige redaktionelle Seiten sind Gegenbeispiele, niemals der primäre Bildschirm-Lock. Benenne das fokale Medium des Ziels und einen unterstützenden visuellen Moment vor dem Codieren. Wenn der inspizierte Bildschirm wegen Fotografie, Illustration, Produktbildern oder Bewegung funktioniert, behalte diese Medienrolle bei. Das Ersetzen durch Typografie, Regeln, Metadaten oder leere Karten ist Referenzdrift.
4. Synthetisieren — nicht mitteln. Wähle eine dominante primäre Richtung und bewahre ihre charakteristischen Merkmale. Sekundäre Referenzen leihen jeweils ein Detail. Niemals den lauwarmen Durchschnitt von allem: Wenn eine Referenz dunkel, eine mit Serifen und eine sauer ist, ist die Antwort nicht höfliche-weiße + gebildete-Serifen.
5. Referenz-Lock + Entscheidungsprotokoll + Richtungsvertrag vor dem Codieren:
   • Referenz-Lock: die primäre Richtung + drei bis fünf zu bewahrende Merkmale (Leinwand, Typografie, Akzent, Layout, Dichte, Medien) + was von Sekundären auszuleihen ist + Rollenregeln (nur CTA, nur Code, nur dekorativ) + Medienstrategie (echt / generiert / Stock / Platzhalter).
   • Entscheidungsprotokoll: eine Entscheidung | Quelle | Rolle/Regel | Warum-Tabelle. Jede größere visuelle Wahl geht auf eine Referenz, eine Kundeneinschränkung, die visuelle Wahrheit des Bestandssystems oder eine Handwerksregel in diesem Skill zurück. Keine Quelle bedeutet, es wird nicht ausgeliefert.
   • Richtungsvertrag: die fünf kurzen Blöcke in direction-workflow.md. Der Abschlussdurchlauf überprüft das Rendering gegen sie.
6. Implementiere unter Verwendung der Presets (Abschnitt 1), der Stufen (PREMIUM_TECH_TIER) und der Anti-Slop-Regeln (Abschnitt 13).

Was was überschreibt (Recherche vs. dieses Skill)

HART — Produktwahrheit, Barrierefreiheit und das Bestandssystem gewinnen:

• Im local- und surface-Umfang schlagen etablierte Marken-Tokens und Komponentenkonventionen die Geschmacksstandards dieses Skills. Ersetze keine bestehende Schriftart, lila Markenfarbe, Lucide-System, Radius oder Komponentensprache, es sei denn, der Benutzer autorisiert ein Redesign oder bittet darum, dieses Signal zu entfernen. Siehe foundations.md.
• Barrierefreiheit, semantische Korrektheit, funktionierendes Verhalten, echte Assets und explizite Benutzereinschränkungen gewinnen immer. Behebe einen Kontrastfehler, ohne ihn als Erlaubnis zu verwenden, das Produkt neu zu gestalten.
• Im world-Umfang gelten die Inhalts- und Geschmacks-Signale für jede neue Wahl: übermäßiger Gebrauch von Em-Dash, dekorative schwebende Pillen, reflexartiges KI-Lila, Standard-Schriftarten ohne Grund, gefälschte KI-Personen in Testimonials und Symbole in dekorativen Boxen.
• Klone nicht einen Stil direkt; behalte die Token-Rollen intakt (ein Nur-CTA-Akzent bleibt Nur-CTA).

WEICH — eine echte Referenz gewinnt (Struktur und Layout):

• Seitenstruktur, Abschnittsreihenfolge und -anzahl, Fußzeilenform, Heldenform, Layoutvariation, Dichte: von der Recherche geleitet, nicht von einer festen Vorlage. Die strukturellen Regeln in diesem Skill sind vernünftige Standardeinstellungen, kein Gesetz — wenn die Referenzen für den Fall eine andere, gute Struktur zeigen, folge den Referenzen.
• Struktur ist nur „falsch", wenn sie Benutzerfreundlichkeit, Conversion oder Reaktionsfähigkeit bricht — nicht, weil sie von den Standardeinstellungen dieses Skills abweicht.

0.1 — Visu

…