Design Showcase Websites (Websites als Design-Präsentation)

Design Showcase Websites

Verwandeln Sie spärliche Vorgaben und verstreutes Quellmaterial in eine Website, die spezifisch auf ihr Thema, ihre Zielgruppe, ihre Sprache und ihren Zweck zugeschnitten ist. Unterstützen Sie fokussierte Landing Pages, mehrseitige Websites und interaktive Webprodukte. Nutzen Sie dieses Skill als Workflow-Rückgrat; kombinieren Sie es mit allen Design-, Browser-, Bild-, Produktinterface- oder Framework-Skills, die der Benutzer ausdrücklich nennt.

Kernregeln

• Gestalten Sie ein Conversion-Erlebnis, keine Sammlung attraktiver Abschnitte.
• Leiten Sie die Identität aus dem Unternehmen, der Zielgruppe, dem Ort, dem Produkt und echten Bildern ab. Verwenden Sie nicht das visuelle Styling eines früheren Projekts wieder, es sei denn, der Benutzer wünscht dies.
• Trennen Sie verifizierte Fakten von kreativer Interpretation. Erfinden Sie niemals Adressen, Preise, Öffnungszeiten, Bewertungen, Kunden, Auszeichnungen, Funktionen oder Leistungsbehauptungen.
• Bewahren Sie die ursprünglichen Benutzer-Assets. Optimieren Sie Kopien innerhalb des Projekts und dokumentieren Sie generierte oder temporäre Bilder.
• Wählen Sie die Sprache basierend auf Zielgruppe und Vorgabe. Gehen Sie niemals ohne Belege von Koreanisch, Chinesisch, Englisch, Japanisch oder zweisprachigen Inhalten aus.
• Behandeln Sie lokalisierte Typografie, Zeilenumbrüche, Interpunktion, Leserichtung, Inhaltsdichte und kulturell vertraute Handlungen als Teil des Designs.
• Bevorzugen Sie eine starke künstlerische Richtung vor einem Collagen-Stil modischer Effekte.
• Wenn der Benutzer kreative Freiheit gewährt, schließen Sie auf eine begründete Richtung, anstatt ihn zu bitten, die Site für Sie zu entwerfen.
• Machen Sie den Prototypen wirklich klickbar und demonstrierbar, wenn eine Implementierung gewünscht wird. Hören Sie nicht bei einem schriftlichen Konzept auf, es sei denn, der Benutzer fragt nur nach einer Strategie.
• Halten Sie alle wesentlichen Informationen ohne Animation sichtbar und respektieren Sie die Präferenz für reduzierte Bewegung.

Wählen Sie den Engagement-Modus

1. Nur Konzept: Erstellen Sie Positionierung, Seitenfluss, visuelle Richtung und Beschreibungen der Schlüsselbildschirme. Nehmen Sie keine Änderungen an Dateien vor, es sei denn, Sie werden darum gebeten.
2. Prototyp: Bauen Sie eine reaktionsfähige, ausführbare einseitige oder mehrseitige Website mit funktionierenden primären Interaktionen und präsentationstauglichem Inhalt.
3. Redesign: Prüfen Sie zuerst die vorhandene Seite und das Repository, bewahren Sie funktionale Anforderungen und den aktuellen Stack, verbessern Sie dann die Benutzeroberfläche.
4. Polieren: Überprüfen Sie die Live- oder lokale Seite, identifizieren Sie die wirkungsvollsten Lücken, implementieren Sie gezielte Änderungen und verifizieren Sie erneut.
5. Webprodukt: Entwerfen Sie Aufgabenabläufe, Zustände, Navigation und Datenpräsentation; kombinieren Sie dieses Skill mit einem Produktinterface-Skill, wenn die Arbeit anwendungsintensiv ist.

Wenn kein Repository existiert, wählen Sie den einfachsten wartbaren Stack, der den Interaktionsanforderungen entspricht. Wenn ein Repository existiert, überprüfen Sie dessen Konventionen und verwenden Sie diese wieder.

Workflow

1. Rahmen Sie das Ergebnis ein

Klären Sie nur Entscheidungen, die das Ergebnis wesentlich verändern:

• Zielgruppe und Gebietsschema;
• Site-Typ, Inhaltsumfang und ob die Erfahrung einseitig, mehrseitig oder anwendungsähnlich ist;
• primäre und sekundäre Conversion-Aktionen;
• Lieferform und erforderliche Interaktionen;
• Quellmaterial und Nutzungsrechte;
• gewünschter erster Eindruck und inakzeptable Richtungen;
• Launch-Einschränkungen wie Stack, Route, Viewport oder Port.

Stellen Sie maximal drei kompakte Fragen auf einmal. Wenn der Benutzer kreative Freiheit gewährt und die Belege ausreichen, nennen Sie vernünftige Annahmen und fahren Sie fort.

Bei spärlichen Vorgaben, verlinkten Karten oder gemischten lokalen Assets lesen Sie zuerst discovery-and-research.md vor dem Sammeln von Inhalten.

Lesen Sie site-types-and-localization.md bei der Wahl der Informationsarchitektur, der Arbeit auf Chinesisch, Englisch, Japanisch, Koreanisch oder beim Aufbau einer mehrsprachigen Erfahrung.

2. Erstellen Sie ein Quellen-der-Wahrheit-Buch

Überprüfen Sie bereitgestellte Links, Karteneinträge, bestehende Websites, Dateien, Bilder und Videos. Notieren Sie:

• den verifizierten Wert;
• seine Quelle und das Datum der Verifizierung;
• ob es direkt veröffentlicht werden kann;
• alles, was eine Bestätigung des Eigentümers erfordert.

Halten Sie operative Fakten zentral in Daten- oder Inhaltsdateien, anstatt sie in Komponenten zu verstreuen. Kennzeichnen Sie Platzhalter explizit. Wenn öffentliche Informationen widersprüchlich sind, bevorzugen Sie die geschäftseigene oder aktuellste Quelle und markieren Sie den Konflikt.

3. Definieren Sie die Conversion-Story

Schreiben Sie diese, bevor Sie visuelle Effekte wählen:

• der eine Satz, den Besucher nach zehn Sekunden erinnern sollten;
• der primäre CTA und ein optionaler sekundärer CTA;
• eine Glaubensleiter vom ersten Eindruck zur Aktion;
• drei bis fünf bereits durch Belege gestützte Beweispunkte;
• die Mindestinformationen, um Zögern zu beseitigen.

Erstellen oder aktualisieren Sie PRODUCT.md in Implementierungsprojekten mit Zielgruppe, Zweck, Positionierung, Conversion, Belegen, Stimme, Anti-Referenzen und Barrierefreiheitserwartungen.

4. Etablieren Sie eine spezifische Kunstrichtung

Nennen Sie ein Konzept, das die Wahrheit der Kategorie mit einem emotionalen Versprechen und einem bewussten Kontrast verbindet. Beispiele für nützliche Kontraste sind: energetisch aber diszipliniert, lokal aber redaktionell, technisch aber menschlich, oder hochwertig aber einladend.

Stellen Sie Design-Drehregler vor der Implementierung ein:

• Design-Varianz, 1–10;
• Bewegungsintensität, 1–10;
• Informationsdichte, 1–10;
• Farbstrategie;
• Fotografiestrategie;
• Typografiestrategie.

Erstellen oder aktualisieren Sie DESIGN.md mit Konzept, Tokens, Typografie, Layout, Bildbehandlung, Bewegung und reaktivem Verhalten. Lesen Sie direction-and-structure.md bei der Auswahl des Konzepts, der Seitenarchitektur oder der Medienbehandlung.

Vermeiden Sie automatische visuelle Standardeinstellungen: generisches Schwarz-Neon-Fitness-Styling, generisches Beige-Restaurant-Styling, dekorative Glasplatten, zufällige Bento-Grids, leuchtende Effekte ohne Bedeutung, übermäßige Pillen, uniforme Karten und wiederholte Fade-up-Abschnitte.

5. Komponieren Sie die Seite um Entscheidungen herum

Wählen Sie die Informationsarchitektur basierend auf dem Zweck der Website. Bei mehrseitigen Arbeiten definieren Sie die kleinste vollständige Sitemap, globale Navigation, seitenbezogene Ziele und den seitenübergreifenden Conversion-Pfad, bevor Sie einzelne Abschnitte stylen. Bei Webprodukten priorisieren Sie die Aufgabenerfüllung und die Abdeckung von Zuständen gegenüber dem Marketing-Rhythmus.

Verwenden Sie nur die Abschnitte, die für die Entscheidung des Besuchers erforderlich sind. Ein üblicher Conversion-Seiten-Fluss ist:

1. Hero mit Versprechen und primärer Aktion;
2. sofortiger Beweis;
3. charakteristisches Angebot oder Produktwert;
4. Erfahrung, Prozess oder Unterscheidungsmerkmale;
5. praktische Details, die Einwände beseitigen;
6. Standort, Kontakt, Buchung, Kauf oder Anfrage;
7. entscheidender finaler CTA.

Variieren Sie die Komposition durch Größe, Rhythmus, Bildausschnitt, Weißraum und redaktionelle Ausrichtung – nicht durch willkürliche Komponentenvielfalt. Halten Sie auf Mobilgeräten die wertvollste Aktion in Reichweite, wenn angebracht, z. B. Anruf, Navigation, Buchung, Kauf, Anmeldung, Suche, Speichern oder Fortfahren.

6. Schreiben Sie Inhalte als Schnittstelle

• Schreiben Sie zuerst in der primären Sprache der Zielgruppe; fügen Sie andere Gebietsschemata nur hinzu, wenn erforderlich.
• Verwenden Sie kurze, direkte Überschriften, die zum visuellen Rhythmus passen.
• Ersetzen Sie generische Behauptungen durch belegte Details.
• Halten Sie CTA-Bezeichnungen wörtlich und kulturell vertraut.
• Testen Sie Zeilenumbrüche der Zielsprache bei echten Breiten; genehmigen Sie kein Layout mit englischen Platzhaltern.
• Testen Sie jedes unterstützte Gebietsschema unabhängig. Gehen Sie nicht davon aus, dass eine Übersetzung in die quellsprachliche Komponente passt.
• Verwenden Sie echte Inhalte anstelle von Lorem Ipsum.

7. Bauen Sie den Prototyp

• Verwenden Sie semantische Seitenstruktur und wiederverwendbare Tokens.
• Sorgen Sie dafür, dass Links, Anrufe, Navigation, Formulare, Menüs, Filter, Galerien und Modals auf dem im Prototyp implizierten Niveau funktionieren.
• Optimieren Sie große Bilder in geeignete Webformate und -größen; behalten Sie sinnvolle Brennpunkte bei.
• Verwenden Sie Bewegung, um Hierarchie zu verdeutlichen, räumliche Beziehungen aufzuzeigen oder den Markencharakter zu verstärken. Halten Sie sie sparsam und unterbrechbar.
• Stellen Sie Tastaturfokus, aussagekräftige Alt-Texte, ausreichenden Kontrast, 44px-Touch-Ziele und für die sicheren Bereiche optimierte mobile Steuerelemente bereit.
• Bewahren Sie wesentliche Inhalte, wenn JavaScript-Animationen nicht ausgeführt werden.

Lesen Sie prototype-and-qa.md vor der Implementierung oder der abschließenden Überprüfung.

8. Überprüfen Sie in einem echten Browser

Erklären Sie die Fertigstellung nicht allein aufgrund eines erfolgreichen Builds. Überprüfen Sie mindestens:

• breiter Desktop um 1440px;
• mittlere/Tablet-Breite;
• Mobil um 390px;
• schmales Mobil um 375px;
• einen Durchlauf mit reduzierter Bewegung oder Tastatur.

Überprüfen Sie den Hero und die gesamte Seite. Kontrollieren Sie den Zeilenumbruch der Zielsprache, Bildausschnitte, horizontalen Überlauf, sichere Bereiche, klebrige Steuerelemente, Konsolenfehler, Links, Formulare, Menüs, Fokusreihenfolge, Ladeverhalten und die Erreichbarkeit des finalen CTA. Beheben Sie entdeckte Probleme und wiederholen Sie die betroffene Prüfung.

Erwartete Übergabe

Für einen ausführbaren Prototyp liefern Sie:

• funktionierenden Quellcode und einen erfolgreichen Produktions-Build;
• eine lokale Vorschau oder einen klaren Ausführungsbefehl;
• PRODUCT.md und DESIGN.md, wenn das Projekt es rechtfertigt;
• eine Quellen-/Platzhalter-Notiz für operative Fakten und Medien;
• eine präzise Liste der implementierten Interaktionen und validierten Viewports;
• eine kurze Liste zur Bestätigung durch den Eigentümer für Fakten, die sich vor dem Launch ändern können.

Führen Sie die finale Antwort mit der Vorschau oder dem primären Artefakt an. Erwähnen Sie nur die wichtigsten Designentscheidungen und Validierungsergebnisse.

Qualitätstor

Übergeben Sie nicht, bis alle Punkte zutreffen:

• Spezifität: Die Site könnte nicht ohne Redesign für einen zufälligen Konkurrenten umetikettiert werden.
• Authentizität: Behauptungen und Medien sind echt, bezogen oder klar als vorläufig gekennzeichnet.
• Conversion: Die nächste Aktion ist innerhalb von Sekunden offensichtlich und bleibt auf Mobilgeräten einfach.
• Hierarchie: Eine Idee dominiert jeden Viewport; Typografie und Bilder unterstützen sie.
• Reaktionsfähigkeit: Kompositionen passen sich absichtsvoll an, anstatt nur zu stapeln.
• Zurückhaltung: Bewegung und Effekte haben eine Rolle; die Site fühlt sich nicht wie eine Effektdemo an.
• Inklusion: Tastatur, Kontrast, Touch-Ziele, reduzierte Bewegung und semantische Struktur sind abgedeckt.
• Zuverlässigkeit: Build, Konsole, Assets und kritische Interaktionen sind verifiziert.