SanyamPunia/verso

Was macht verso?

Wandle einen Teil einer bestehenden Benutzeroberfläche in eine Seite aus einem Arbeitsheft der Hochrenaissance um: Eisengallustinte, verblasst zu Brauntönen, auf Hadernpapier.

Die Referenzen sind fünf Blätter von Leonardo da Vinci: die anatomischen Notizen aus Windsor (RCIN 919070 verso), eine Seite des Codex Leicester, der Vitruvianische Mensch, eine Seite des Codex Arundel und eine Notizbuchseite des Codex Forster. Lies references/style.md vor der ersten Umwandlung in einer Sitzung. Es erklärt jeden physischen Fakt des Stils und die daraus folgende UI-Entscheidung. Die folgenden Entscheidungen ergeben nur damit Sinn.

Dateien in diesem Skill

• references/style.md die Recherche: Papier, Tinte, Handschrift, Komposition, Palette mit gemessenem Kontrast und eine Zuordnungstabelle von allgemeinen UI-Teilen zu Manuskriptteilen.
• assets/manuscript.css das Theme als einfaches CSS, begrenzt unter .ms-scope, mit vier Papier-Presets, die durch data-ms-paper gesetzt werden. Die Quelle der Wahrheit für jeden Wert.
• assets/defs.svg vier SVG-Filter (Feder, Freihandlinie, Deckelkante, Waschung). Einmal pro Dokument einbinden.
• assets/sketches.svg Federzeichnungen zum Platzieren auf einer Seite: eine Geometriekonstruktion, ein Mechanismus, eine Führungslinie, ein Tintenfleck, Lichtstrahlen mit Buchstabenpunkten, ein schraffierter Körper.
• examples/ zwei durchgeführte Umwandlungen, jeweils ein Vorher und ein Nachher: before.html und after.html (eine Einstellungskarte, windsor) und release-before.html und release-after.html (Release Notes, leicester). examples/index.html zeigt sie nebeneinander und wechselt das Preset. Lies die „after“-Dateien als den Standard, den eine fertige Umwandlung erfüllen muss.

Schritt 1: Den Bereich festlegen

Der Benutzer nennt einen Bereich: eine Datei, eine Komponente, eine Route, einen Selektor oder eine Beschreibung. Wandle diesen Bereich um und nichts anderes.

• Wenn kein Ziel angegeben wurde, frage danach. Style nicht die gesamte App auf gut Glück um.
• Finde das Wurzelelement des Bereichs. Alles, was das Theme tut, hängt an einer einzigen ms-scope-Klasse an diesem Wurzelelement, sodass der Rest der App unberührt bleibt.
• Wenn der Bereich von anderen Bildschirmen gemeinsam genutzt wird (ein Design-System-Button, ein Layout), sage dies und frage, ob der gemeinsame Teil umgewandelt oder eine lokale Kopie erstellt werden soll.

Schritt 2: Das Projekt lesen, bevor geschrieben wird

• Finde heraus, wie das Projekt Dinge stylt: Tailwind, CSS-Module, einfaches CSS, eine CSS-in-JS-Bibliothek, eine Komponentenbibliothek. Übertrage das Theme in dieses Idiom. Füge kein zweites Styling-System in ein Projekt ein, das bereits eines hat.
• Lese die Regeln des Projekts (CLAUDE.md, AGENTS.md oder ähnlich). Wenn es rohe Hex-Werte in Komponenten verbietet, füge zuerst die --ms-*-Werte als Tokens in sein einziges Stylesheet ein und verwende dann die Tokens. Wenn es eine Typenskala oder einen Schriftarten-Lader hat, füge die drei Schriftarten über diesen Lader hinzu (z. B. next/font/google in Next.js) und nicht über die @import-Zeile, die nur für einfaches HTML gedacht ist.
• Behalte die eigenen Primitiven des Projekts. Style seinen Button durch eine Variante oder eine Klasse um; ersetze ihn nicht durch einen rohen <button>.

Schritt 3: Die Primitiven einmal installieren

1. Tokens und Klassen. Binde assets/manuscript.css oder sein Äquivalent im Idiom des Projekts ein. In Tailwind v4 kommen die Tokens in @theme und die mehrschichtigen Teile (.ms-page::before, .ms-frame, .ms-cast, .ms-button) in @layer components, da Pseudo-Element-Stapel nicht in Utilities passen.
2. Filter. Binde assets/defs.svg einmal ein, innerhalb oder vor dem begrenzten Wurzelelement. In React erstelle daraus eine kleine Komponente. Ohne sie werden die Rahmen und Linien gerade dargestellt und die Deckelkante verschwindet, was ein stiller Fehler ist: Überprüfe dies.
3. Schriftarten. EB Garamond (Lesetext), IM Fell English (Titel), La Belle Aurore (Randnotizen). Lade nur die verwendeten Gewichte.

Schritt 4: Ein Preset auswählen

Wähle das Preset anhand der Form des Bereichs mit der Tabelle in Abschnitt 6 von references/style.md aus. Kurz:

• windsor für Formulare, Einstellungen und dichte Werkzeugpanels,
• leicester für Artikel, Dokumentationen, Release Notes, Hero-Bereiche und leere Zustände,
• arundel für Dashboards, Zeichenflächen und Tafeln mit vielen kleinen Teilen,
• forster für schmale Karten, Seitenleisten, Listen und mobile Bildschirme.

Setze es als data-ms-paper="..." auf das begrenzte Wurzelelement. windsor benötigt kein Attribut. Der Benutzer kann ein Preset oder einen Codex nennen, und das hat Vorrang. Ein Preset pro Oberfläche.

Schritt 5: Teil für Teil umwandeln

Arbeite dich mit der Zuordnungstabelle in references/style.md durch den Bereich. Die wichtigsten Regeln:

• Oberfläche. Das Wurzelelement des Bereichs wird zu .ms-page: Papier, Körnung, Sieb- und Ripplinien, Deckelkante. Innere weiße oder graue Hintergründe verschwinden. Verwende .ms-repair für höchstens einen helleren Fleck, wo ein Block getrennt werden muss.
• Karten. Eine Karte wird zu einem losen Federrahmen (.ms-frame) oder zu nichts. Die meisten Gruppen brauchen keinen Rahmen: Abstand und eine Handlinie trennen sie, wie auf dem Blatt. Verwende Rahmen für den einen oder zwei Blöcke, die umkästelte Notizen sind.
• Schatten. Jedes box-shadow und jede Erhebung wird zu einer Schraffur (.ms-cast) oder verschwindet. Es gibt keine weichen grauen Schatten in diesem Theme.
• Ecken. Ersetze Radien durch --ms-radius (einen handgezeichneten Radius) oder nichts.
• Farbe. Nur braune Tinte. Text in --ms-ink, sekundär in --ms-ink-2, Bildunterschriften in --ms-ink-3. Die Markenfarbe wird zu Sanguin, einmal pro Oberfläche verwendet: die primäre Aktion, Links und der Fokusring.
• Typografie. Fließtext in EB Garamond mit Mediävalziffern. Der Titel in IM Fell. Eine Abschnittsüberschrift in IM Fell kursiv mit einer doppelten Handlinie darunter. Setze Fließtext niemals in der Handschrift: Sie ist nur für kurze Notizen gedacht.
• Eingabefelder. Ein Eingabefeld ist eine Linie (.ms-input), ein Textbereich sind Linien, eine Checkbox ist ein Tintenquadrat mit einem Kreuz (.ms-check). Behalte das echte <input> und <label>; nur die Darstellung ändert sich.
• Badges und Tags werden zu eingekreisten Wörtern (.ms-circled).
• Listen von Werten, Statistiken und Tabellen werden zu einem Hauptbuch (.ms-ledger): Zeilen auf Handlinien, gepunktete Führungslinien zum Wert, Mediävalziffern.
• Symbole. Behalte die Symbole des Projekts. Setze sie in Tintenfarbe und durch den ms-ink-Filter. Tausche sie nicht gegen Emojis oder Glyphen aus.
• Bilder erhalten .ms-plate: Sepia, in das Papier eingeblendet.
• Diagramme werden zu Federlinien und schraffierten Flächen. Keine Farbverläufe. Benenne Punkte und Regionen mit kursiven Buchstaben (.ms-point), so wie es die Leicester-Diagramme tun.
• Fortschrittsbalken, Messgeräte und Schieberegler werden zur Vitruvianischen Skala (.ms-scale mit --value). Behalte die Rolle und die aria-Werte des Elements. Für ein natives <input type="range"> oder <progress> behalte das native Element und zeichne die Skala dahinter.
• Schrittnummern, Ränge und Indizes werden zu Abbildungsnummern im Rand (.ms-figno), wie in Forster.
• Ein geänderter Wert ist eine Korrektur: <del> mit Feder durchgestrichen, <ins> in der Handschrift. Nur wenn die UI bereits einen alten und einen neuen Wert anzeigt.
• Summen und Aufschlüsselungen können eine ausgearbeitete Summe sein (.ms-sum), wie in Arundel.
• Abschnitte in langen Texten beginnen mit einem schlichten Initial (.ms-initial) und enden mit einer abgegrenzten Linie (.ms-endrule), wie in Leicester.

Schritt 6: Als Arbeitsseite komponieren

Eine einfache Umwandlung eines Rasters von Karten in braune Karten ist der Fehlermodus. Gestalte den Bereich neu, sodass er wie ein Blatt aussieht, das gefüllt, nicht entworfen wurde:

• Verwende .ms-folio: die Hauptspalte und einen Rand. Verschiebe sekundäre Fakten, Hinweise und Hilfetexte als .ms-note in den Rand, mit einer Führungslinie, die auf ihr Thema zeigt, wo es hilft.
• Blöcke können in der Breite variieren. Platziere eine Skizze innerhalb des Textes, nicht in einem eigenen Bereich.
• Neige zwei oder drei kleine Blöcke mit .ms-tilt-l, .ms-tilt-r oder .ms-tilt-s. Neige niemals ein Formularfeld, eine Tabelle oder etwas, das mehr als etwa ein Drittel der Seite einnimmt.
• Füge eine Federzeichnung aus assets/sketches.svg hinzu, die zum Thema passt: den Mechanismus für Einstellungen oder Systeme, die Konstruktion für Layout, Daten oder Maße. Zeichne eine neue auf die gleiche Weise, wenn keine passt. Eine pro Oberfläche.
• Halte dich an das Dekorationsbudget für eine Oberfläche: eine Skizze (höchstens zwei), einen Fleck oder Klecks, eine Durchscheinung, zwei Spiegelblöcke. Eine Seite, die alle davon trägt, wirkt wie ein Kostüm. Die meisten Oberflächen benötigen zwei oder drei davon, nicht alle.
• Fülle echten leeren Raum mit höchstens zwei Blöcken dekorativer Spiegelschrift (.ms-mirror, aria-hidden="true"). Schreibe sie in Italienisch der Zeit (Notizen für sich selbst, Listen, Maße). Gib sie nicht als echtes Zitat aus.
• Die DOM-Reihenfolge bleibt die Lesereihenfolge. Das Layout kann Dinge visuell verschieben; die Quellreihenfolge muss für einen Screenreader und für Tab noch sinnvoll sein.

Schritt 7: Leitplanken

• Kontrast. Echter Text verwendet niemals --ms-wash. Miss alles Neue gegen das Papier: 4,5:1 für Text, 3:1 für eine aussagekräftige Grafik oder den Rand eines Bedienelements.
• Spiegeltext ist niemals Inhalt. Labels, Werte, Fehler und Anweisungen bleiben lesbar und richtig herum.
• Semantik bleibt erhalten. Gleiche Elemente, Rollen, Namen, Zustände und Handler. Eine umgewandelte Komponente muss sich genau wie zuvor verhalten.
• Bedienelemente bleiben erkennbar. Ein Button sieht immer noch klickbar aus, ein Feld sieht immer noch beschreibbar aus, der Fokus ist immer sichtbar (sanguiner Umriss).
• Bewegung. Die Bewegung des Themes ist Tinte: eine Skizze, die sich mit data-draw selbst zeichnet, ein Häkchen, das in einer Checkbox erscheint. Hover und Drücken sind eine Waschung, niemals eine Skalierung. Respektiere prefers-reduced-motion, was manuscript.css bereits tut.
• Kosten. Jedes gefilterte Element ist ein Filterdurchlauf. Halte Filter auf Pseudo-Elementen, Rahmen und Skizzen, nicht auf langen Listen von Zeilen oder scrollendem Inhalt. Wende ms-ink nicht auf Fließtext an.
• Keine institutionellen Zeichen. Kopiere keinen Bibliotheks- oder Sammlungsstempel, keine Museumsinventarnummer als Branding und nicht Leonardos Namen als Signatur. Die Seite ist in seiner Art, wird aber nicht als seine ausgegeben.
• Nur hell. Das Blatt ist ein Objekt, also invertiert es nicht im dunklen Modus. Wenn die App ein dunkles Theme hat, behält der begrenzte Bereich sein Papier.

Schritt 8: Überprüfen

1. Rendere den umgewandelten Bereich und mache einen Screenshot. Wenn ein Browser-Tool verfügbar ist (agent-browser, Playwright, der Vorschaubereich), verwende es. Sieh es dir an.
2. Überprüfe, ob die Rahmen und Linien wellig sind. Gerade bedeuten, dass die Definitionen nicht eingebunden sind oder die Filter-IDs kollidieren.
3. Tab durch den Bereich. Jedes Bedienelement wird in einer sinnvollen Reihenfolge erreicht und zeigt den Fokusring.
4. Überprüfe die Seite bei Telefonbreite. Das Folio fällt auf eine Spalte zusammen.
5. Führe die eigenen Prüfungen des Projekts aus (typecheck, lint, build), falls vorhanden.

Bericht

Wenn fertig, teile dem Benutzer in ein paar kurzen Zeilen mit:

• welcher Bereich geändert wurde und welche Dateien,
• welches Preset und warum es zum Bereich passt,
• was einmalig hinzugefügt wurde (Tokens, Schriftarten, Filter) und wo,
• welcher Teil unverändert blieb und warum,
• wie es zu sehen ist (die Route oder die zu öffnende Datei).