Communitygithub.com

Silicon Oberflächenbau

Eine Website- oder App-Oberfläche aus der Produktrichtung bauen und mit dem Auge prüfen, inklusive responsivem Layout, Zuständen und vorhandenen Komponenten.

Was ist Silicon Oberflächenbau?

Silicon interface build ist der Bauschritt von Silicon Design. Der Agent liest DESIGN.md, die bestehende Oberfläche, Komponenten, Medien und echten Text und baut dann einen stellvertretenden Ausschnitt der Website oder App: für wen, welche Aufgabe, welche Hauptinformation, welche nächste Aktion. Die Änderung bleibt im gefragten Umfang, nutzt das Material des Produkts und kennzeichnet Erfundenes. Testimonials, Kundenlogos und Kennzahlen werden nicht erfunden. Fertig ist der Schritt nicht, wenn der Code eine Liste abhakt, sondern wenn der gebaute Bildschirm angesehen wurde.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/drevendev/Silicon-Design/tree/master/skills/silicon-interface-build

In Ihrer bevorzugten KI fragen

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

Dokumentation

Silicon-Interface-Build

Gestaltungsabsicht in funktionierendes Verhalten überführen. Prüfen Sie die DESIGN.md des Produkts, das Framework, die aktuelle Benutzeroberfläche, Komponenten, Assets und Inhalte vor der Bearbeitung. Halten Sie Änderungen innerhalb des angeforderten Umfangs. Bei einer kleinen Korrektur folgen Sie der bestehenden Richtung; bei fehlender Richtung für einen größeren Build legen Sie eine prägnante, provisorische Richtung aus der Aufgabenstellung fest.

Repräsentativen Teilbereich umsetzen

Identifizieren Sie die Person, die Aufgabe, die primäre Information und die nächste Aktion. Verwenden Sie repräsentative Inhalte aus dem Produkt; kennzeichnen Sie fiktive Daten und Prototyp-Aktionen. Erfinden Sie keine Testimonials, Kundenlogos, Messwerte oder erfolgreiche Integrationen.

Wählen Sie die Struktur nach Inhalt: Prosa zum Lesen, Zeilen oder Tabellen zum Vergleichen, Karten für unabhängige Objekte. Eine Website sollte ihr Versprechen und ihre Belege verständlich machen; eine App sollte die Arbeit und den Zustand offenlegen, die eine Aktion unterstützen. Bewahren Sie zuverlässige Komponentensemantik und passen Sie das visuelle System an.

Implementieren Sie einen vollständigen Ablauf mit einem Fehlerzustand, bevor Sie das Styling über das gesamte Produkt verteilen. Fügen Sie relevantes Lade-, Leer-, Fehler-, Nicht-verfügbar- und Erfolgsfeedback ein. Bewahren Sie nützliche Eingaben bei behebbaren Fehlern und erklären Sie nicht verfügbare Aktionen. Verwenden Sie semantische Steuerelemente und beständige Labels.

Etablieren Sie kohärente Rollen für Schrift, Farbe und Abstände. Verwenden Sie Assets für einen bestimmten Informations- oder Identitätszweck, mit geeigneten Rechten und Textalternativen. Halten Sie kritische Inhalte unabhängig von dekorativer Bewegung und Audio.

Führen Sie die gewählte Richtung über den ersten Bildschirm hinaus in die Aufgabe, einen Fehlerzustand und ein Ergebnis, sofern im Umfang enthalten. Fügen Sie ein produktspezifisches Detail in Wortlaut, visuellen Beziehungen oder Verhalten ein. Bewahren Sie den Kontext, erklären Sie, warum eine Sammlung leer ist, und halten Sie wiederholte Aktionen effizient. Beenden Sie das Verpacken, die optische Ausrichtung, Beschneidungen, Symboldicke, Einheiten und Feedback als separaten handwerklichen Durchgang. Fügen Sie keine Funktionen außerhalb des Umfangs hinzu, nur um einen einprägsamen Moment zu erzeugen.

Ergebnis überprüfen

Öffnen Sie die tatsächliche Implementierung in einem Browser, wenn verfügbar. Überprüfen Sie schmale, mittlere und breite Layouts, inhaltliche Extreme und unterstützte Themes/Sprachen. Beheben Sie Überlauf, schwache Hierarchie, unschöne Umbrüche und unvollständige Zustände vor der Mikro-Politur.

Testen Sie die Tastaturnavigation, den Fokus und einen vollständigen Aufgaben-/Wiederherstellungspfad. Überprüfen Sie relevante Kontrastpaare, Textvergrößerung und Verhalten bei reduzierter Bewegung. Unterscheiden Sie Viewport-Größenänderung von tatsächlichem Browser-Zoom und Screenshots von Eingabetests. Führen Sie Projektprüfungen durch, die für die Änderung angemessen sind; fügen Sie keine Tests hinzu, die lediglich Styling-Entscheidungen wiederholen.

Wenn kein Browser/Laufzeit verfügbar ist, führen Sie nützliche Quellcode-Prüfungen durch und berichten Sie explizit, dass das gerenderte Verhalten unbestätigt bleibt. Ersetzen Sie keine Nachweise durch die Behauptung, dass die Benutzeroberfläche korrekt aussieht.

Bewerten Sie Bedienung und Charakter getrennt. Zeigen Sie auf, was das Ergebnis spezifisch und kohärent macht, überprüfen Sie sowohl das Innere als auch die Einleitung, und gehen Sie wiederholte Nutzung für wiederkehrende Unterbrechungen durch. Ein bestandener Build- oder Kontrasttest beantwortet diese Designfragen nicht. Behandeln Sie emotionale Effekte und Einprägsamkeit als Hypothesen, es sei denn, tatsächliche Beobachtungen des Publikums stützen sie.

Liefern Sie den implementierten Ablauf, die geänderten Oberflächen, gerenderte Nachweise (sofern verfügbar), durchgeführte Prüfungen und verbleibende Einschränkungen. Fahren Sie mit der Behebung beobachteter Probleme innerhalb des Umfangs fort, bis der Ablauf seine Kriterien erfüllt.

Optionale Vertiefung: Silicon Design Review Checkliste.

Verwandte Skills