Was macht julio-antislop-design?
Eine generierte Seite sieht aus wie der Durchschnitt aller gesehenen Seiten: Nichts ist falsch, nichts wurde entschieden. Dieses Skill ersetzt die Fehler durch Entscheidungen: Die Idee kommt vom Thema, die Richtung kommt von echten Referenzen und einem Ziehen außerhalb des Durchschnitts, ein Mindestmaß schützt Zugänglichkeit, Ehrlichkeit und Leistung, und wir prüfen, was wir getan haben, bevor wir ausliefern. Die Tics zu entfernen reicht nicht: Eine leere und saubere Seite ist auch ein Tic (references/originality.md).
1. Den Weg wählen
| Anforderung | Weg |
|---|---|
| Kleine Anfrage: eine Komponente, ein Abschnitt, eine Einstellung, eine Korrektur oder „mach schnell“ | Schnell (§3) |
| Neue Seite, neue Website, neuer Bildschirm, neues System | Komplett (§4) |
| Vorhandenes überarbeiten | Komplett, Variante Redesign (references/redesign.md) |
| Design prüfen | Raster aus references/critique.md und Liste aus references/tells.md, ohne Konstruktion |
2. Den Modus wählen
Jede Regel hängt davon ab, was der Besucher auf dieser Oberfläche erreichen muss, nicht vom Produkt.
| Modus | Der Besucher hat Erfolg, wenn… | Oberflächen |
|---|---|---|
| Überzeugen | er entscheidet und handelt | Landing, Marketing, Preise |
| Bedienen | er eine Aufgabe erledigt | App, Dashboard, Admin, Einstellungen |
| Lesen | er versteht | Doku, Artikel, Anleitungen, Hilfe |
| Erleben | er im Werk ist | Portfolio, Galerie, Schaufenster |
Zwei Oberflächen in einer Anfrage: Jede in ihrem Modus, Palette und Typografie werden gemeinsam genutzt.
Mit der Person vorangehen
Sie niemals schweigend warten lassen: Früh fragen, bei jeder Frage Vorschläge machen, zeigen, sobald etwas hält. Vier Termine auf dem kompletten Weg (Briefing-Blatt, erste drei Bildschirme, erste Version, Auslieferung), jeder mit einer empfohlenen Vorgehensweise; dazwischen nie mehr als etwa zehn Aktionen, ohne etwas zu zeigen. Details: references/intake.md, „Rhythmus“.
3. Schneller Weg
DESIGN.mdundPRODUCT.mdlesen, falls vorhanden, und einhalten. Höchstens eine Frage, nur wenn eine Tatsache blockiert.- Das Mindestmaß (§5) und die Standardwerte des Modus (
references/defaults-by-mode.md) anwenden; alles läuft über vorhandene Tokens oder eine kleine deklarierte Skala, falls keine vorhanden. node scripts/check-tokens.mjs <datei>undnode scripts/check-render.mjs <datei>ohne Fehler; die Aufnahmen bei 390 und 1440 px ansehen.- Bericht in 3 Zeilen: Was geändert wurde, bestandene Kontrollen, was nicht laufen konnte.
Kein vollständiges Framing, kein Ziehen, keine drei Helden. Wenn die Anfrage wächst (eine ganze Seite), zum kompletten Weg wechseln.
4. Kompletter Weg in 12 Schritten
Details zu jedem Schritt: references/process.md. Die Schritte 1 bis 8 erfolgen vor dem Code.
- Projekt lesen, den Modus, die tatsächlich verfügbaren Bilder.
- Auf einmal rahmen: Projekt, Geschmack (alles, was
DESIGN.mdfüllt), Material; höchstens 12 Fragen, dann ein einmal validiertes Briefing-Blatt. Nur eine explizite Delegation („carte blanche“) oder das Fehlen einer Person befreit vom Geschmack.references/intake.md. - Das Thema erfassen: 8 bis 12 kundeneigene Elemente; real, zeigbar, abwesend.
PRODUCT.md. - Das Argument schreiben: Eine Behauptung und ihr Beweis pro Abschnitt.
- Echte Referenzen sehen: 3 Seiten aus
references/site-models.md, darunter eine außerhalb der Branche;scripts/board.mjszum Erfassen. - Die Richtung ziehen:
node scripts/roll.mjs --mode <mode> --brief "…" --log direction-log.md(Archetyp, Karten, Farbe, Schriften, Risiken), dann 5 Richtungen, die 2 wahrscheinlichsten werden verworfen.references/originality.md. - Die Idee formulieren („[eine Sache des Themas] wird zu [einem Verfahren]“, Test des Mitbewerbers), die lebendige Sache,
DESIGN.md; erste drei Bildschirme mitscripts/explore.mjsvergleichen, einer wird gewählt. - Alle Texte schreiben vor dem Code; Überschriften maximal 2 Zeilen bei 320 px.
- Ohne Bewegung bauen: zuerst Tokens (Farben, Schriften, typografische Skala, Abstandsskala), dann Hero, Abschnitte, Grafiken (ohne Foto:
references/visuals.md, ein visueller Anker des Themas in den ersten beiden Bildschirmen), lebendige Sache. - Kontrollieren:
check-tokens.mjs(der Code),check-render.mjs --shots(die gerenderte Seite),npx impeccable detect, Performance; dann die Fertigstellung (references/finish.md) und die UX-Kontrolle der 30 Gesetze (references/ux-principles.md). - Von einem neuen Blick beurteilen lassen: Raster aus
references/critique.md, Achse Originalität und Test des Déjà-vu; korrigieren, höchstens drei Durchgänge. - Bewegung hinzufügen, erneut inspizieren, mit dem Bericht ausliefern.
5. Absolutes Mindestmaß (Plancher)
Es wird nie aufgehoben: weder durch Geschmack, noch durch das Briefing, noch durch eine externe Ressource.
- A1 Zugänglichkeit: WCAG 2.2 AA (Kontrast 4,5:1, 3:1 großer Text und Bedienelemente), sichtbarer Fokus, Tastatur, Ziele von 24 px (44 angestrebt auf Mobilgeräten), Überschriften ohne Sprünge, Alternativtexte, reduzierte Bewegung, Inhalt ohne JavaScript außerhalb von Bedienen.
- A2 Ehrlichkeit: Keine erfundenen Zahlen, Zitate, Bewertungen, Logos, Kunden oder Funktionen; Beispielinhalte sind im Bericht aufgelistet und einmal auf der Seite gekennzeichnet.
- A3 Nachvollziehbarkeit: Jede Schriftart, Komponente, jedes Bild und jede Referenz hat eine reale, überprüfte Quelle und eine Lizenz, die die Nutzung abdeckt.
- A4 Vertraulichkeit: Keine Daten, Mockups oder Aufnahmen eines Kunden an einen Drittanbieterdienst ohne schriftliche Zustimmung.
- A5 Leistung: LCP ≤ 2,5 s, INP ≤ 200 ms (TBT im Labor), CLS ≤ 0,1; sonst wird der Effekt zu einem Standbild.
references/performance.md. - A6 Technik: Farben, Schriften, Größen und Abstände ausschließlich in Tokens; niemals
transition: alloder Animation vonwidth,height,top,left; kein horizontales Scrollen von 320 bis 1920 px; Hero indvhodersvh; Container mit maximaler Breite. - A7 Briefing: Eine explizite Anweisung hat Vorrang vor den hebbaren Standardwerten, niemals vor A1 bis A6.
6. Hebbare Standardwerte, das Wesentliche
Jeder wird mit einem schriftlichen Grund gehebt, der sich auf die Idee oder das Briefing bezieht. Vollständige Tabelle: references/defaults-by-mode.md; veraltete Tics: references/tells.md.
- Kein Eyebrow, keine gesperrten Großbuchstaben, keine Nummerierung 01/02/03 ohne echte Reihenfolge.
- Kein lila Verlauf, kein Text im Verlauf, kein Leuchten, kein dekoratives Glas, keine Reihe identischer Karten mit Symbol-Titel-Text, kein Emoji als Symbol.
- Keine reflexive Schriftart ohne Markengrund (
references/typography.md); ohne bereitgestellte Schriftart 3 Paare vorschlagen (references/font-catalog.md). - Eine modulare typografische Skala und eine dreistufige Abstandsskala, nichts außerhalb (
references/spacing.md). - Ein Hintergrund, eine Tinte, ein Akzent, der Akzent etwa 4 Mal pro Bildschirm.
- Weder das zur Mode gewordene Korrektiv (Creme, Serif, Terrakotta) noch unsere eigene Konvergenz „clean anti-slop“ (
references/originality.md§1).
7. Wann was lesen
| Situation | Datei |
|---|---|
| Detaillierte 12 Schritte, Auslieferungsliste, Berichtsformat | references/process.md |
| Framing: Fragen, Geschmack, Material, Briefing-Blatt | references/intake.md |
| Regeln nach Modus | references/defaults-by-mode.md |
| Bestandsaufnahme, Idee, Bilder, Produkt ohne Foto | references/idea-and-direction.md |
| Grafiken ohne Foto, nach erreichter Note sortiert; Test des Themas ohne Text | references/visuals.md |
| Fertigstellung: von Prüfern festgestellte Mängel und deren Kontrollen | references/finish.md |
| Ziehen, Archetypen, Einschränkungen, Risiken, drei Helden, Déjà-vu | references/originality.md |
| Landing, Hero, Formulare, Glas, Produktillustration, Bento | references/persuade.md |
| Navigation und Footer (18 + 15 Modelle) | references/nav-footer.md |
| App, Dashboard, Diagramme, Formulare | references/operate.md |
| Doku, Artikel, Portfolio, Galerie | references/read-and-experience.md |
| Redesign | references/redesign.md |
| Palette | references/color.md |
| Schriftart und typografische Skala; vorzuschlagende Schriften | references/typography.md, references/font-catalog.md |
| Abstand und Rhythmus | references/spacing.md |
| Bewegung, Effekte, Video in Code | references/motion-and-video.md |
| Performance nach Modus | references/performance.md |
| Veraltete KI-Tics | references/tells.md |
| Die 30 UX-Gesetze, angewandt, und die UX-Kontrolle | references/ux-principles.md |
| Reale Beispielseiten; Galerien, Bibliotheken, Lizenzen | references/site-models.md, references/resources.md |
| Kritik durch einen neuen Blick | references/critique.md |
Nur das laden, was die Aufgabe benötigt.
8. Ausliefern
Nicht ausliefern, solange das Mindestmaß, check-tokens.mjs, check-render.mjs, der Detektor, die Aufnahmen, die Kritik (Originalität mindestens 4 von 5, kein bekannter Stil im Déjà-vu-Test) und das Richtungsprotokoll nicht bestanden sind. Vollständige Liste und Berichtsformat: references/process.md. Niemals eine Kontrolle deklarieren, die nicht gelaufen ist.