Web Design Engineervon ConardLi

Web Design Engineer Skill.

Legen Sie den visuellen Vertrag fest, bevor Sie die Oberfläche erweitern.

Frontend-Design
Prototyping
Designsysteme

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · Web Design EngineerSKILL.md

Aufgabe Frontend-Design Ergebnis • Ein visuelles HTML/CSS/JavaScript- oder React-Artefakt • Eine dokumentierte Einschätzung der visuellen Richtung und der Design-Token-Entscheidungen • Ein ansehbarer früher Entwurf, gefolgt von fertigen Zuständen und Interaktionen Vor dem Start Benötigt einen codefähigen Agenten und eine im Browser renderbare Frontend-Umgebung. Ausgewählte Muster können React, Babel, Diagramme oder andere Bibliotheken nutzen; für die Browser-Abnahme ist ein geeignetes Browser-Werkzeug erforderlich.

Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Web Design Engineer

Eine kontextorientierte Design-Engineering-Methode mit Anforderungen an Assets, Design-Kalibrierung, frühen Entwürfen, Erhaltungsmodi sowie getrennten Pfaden für Kritik und Browser-QA.

Workflow auf Basis der QuelleKein Ausführungs-Benchmark

Die Arbeitsweise

Web Design Engineer ist ein Browser-Artefakt-Workflow für Seiten, Dashboards, Prototypen, Foliensätze und Visualisierungen. Statt jede Anfrage als neue Landingpage zu behandeln, bestimmt er zuerst Artefakt, Zielgruppe und Modus für bestehende Arbeit. Ein Produkt zu erweitern, die Verträge eines Redesigns zu erhalten und eine visuelle Richtung neu aufzubauen sind unterschiedliche Aufgaben mit unterschiedlichen Befugnissen.

Die Design-Einschätzung nutzt fünf anpassbare Dimensionen: Variation, Bewegung, Informationsdichte, Asset-Abhängigkeit und Markentreue. Sie fließen in ein deklariertes System und einen frühen ansehbaren Entwurf ein, bevor die detaillierte Umsetzung beginnt. Bei Markenprojekten zählen echte Logos, Produktfotos und Oberflächenaufnahmen mehr als eine Farbpalette allein. Der Skill trennt außerdem eine leichte Selbstprüfung von der ausführbaren Browser-Abnahme, die laut Quelle einer ausdrücklichen QA-Anfrage vorbehalten ist.

Erwartete Ergebnisse

Ein visuelles HTML/CSS/JavaScript- oder React-Artefakt
Eine dokumentierte Einschätzung der visuellen Richtung und der Design-Token-Entscheidungen
Ein ansehbarer früher Entwurf, gefolgt von fertigen Zuständen und Interaktionen

Beispiel-Brief ansehen

Vom Brief zur Prüfung

01
Bestehenden Kontext lesen
Prüfen Sie den gelieferten Quellcode, Screenshots, Marken-Assets und Rahmenbedingungen. Ordnen Sie die Arbeit ein: Erweiterung, erhaltendes Redesign oder umfassendere Überarbeitung.
02
Design-Vertrag deklarieren
Erläutern Sie visuelle Richtung, Zielgruppe, Dichte, Bewegung und Assets und legen Sie dann Typografie, Abstände, Palette, Flächen und Interaktionsbehandlung fest. Warten Sie, bis die Nutzerin oder der Nutzer dieses Designsystem freigibt, bevor Sie den ersten Code schreiben.
03
Ansehbaren Entwurf zeigen
Testen Sie die Richtung mit zentralen Layouts und ehrlichen Platzhaltern. Warten Sie auf die separate Freigabe dieses frühen Entwurfs, bevor Sie jede Komponente oder jeden Interaktionszustand ausfüllen.
04
Bauen und prüfen
Vervollständigen Sie die freigegebenen Interaktionen und Zustände. Führen Sie die Selbstprüfung aus der Quelle durch; wird eine Browser-Abnahme verlangt, erheben Sie tatsächliche Belege zu Viewports und Interaktionen separat.

02 Einsatzbereiche

Wann er sich eignet

Benötigt einen codefähigen Agenten und eine im Browser renderbare Frontend-Umgebung. Ausgewählte Muster können React, Babel, Diagramme oder andere Bibliotheken nutzen; für die Browser-Abnahme ist ein geeignetes Browser-Werkzeug erforderlich.

Gut geeignet

Erweiterungen bestehender ProdukteNützlich, wenn ein neuer Screen zum Produkt passen und umgebende Routen, Formulare und Interaktionserwartungen erhalten soll.
Erkundung von DesignrichtungenPasst zu einem vagen visuellen Briefing, das wirklich unterschiedliche Richtungen oder anpassbare Varianten braucht, bevor sich das Team auf eine Komposition festlegt.

Zu prüfende Grenzen

Visueller Frontend-UmfangBackend-APIs, Kommandozeilenwerkzeuge und Datenverarbeitung liegen außerhalb des vorgesehenen Ergebnisses des Skills. Eigene Workflows für Artikel und erzählgeführte Präsentationen sind ebenfalls getrennt.
Qualität ist kein TestergebnisEine Design-Kritik oder Quellenprüfung belegt kein responsives Verhalten in einem laufenden Browser. Fordern Sie eine ausführbare Abnahme an, wenn dieser Nachweis nötig ist.

Diese Eingaben mitbringen

Artefakt und ZielgruppeNennen Sie den Screen oder die Erfahrung, die entstehen soll, wer sie nutzt und welche Anzeigegrößen oder Präsentationsbedingungen wichtig sind.
Bestehende VerträgeLiefern Sie Code, Designsystem-Referenzen und geschütztes Verhalten. Geben Sie an, welche Teile sich ändern dürfen und welche erkennbar bleiben müssen.
Echte Inhalte und AssetsStellen Sie freigegebene Texte, echte Produktbilder, Logos und Daten bereit. Kennzeichnen Sie Fehlendes, statt Testimonials oder Kennzahlen zu erfinden.

03 Wichtige Entscheidungen

Entscheidende Weichenstellungen

Erhalt als Designentscheidung
Der ausdrückliche Arbeitsmodus verhindert, dass ein ansprechendes Redesign stillschweigend nützliche Produktkonventionen ändert oder gültige Markenentscheidungen ersetzt.
Varianten jenseits von Umfärbungen
Das Kalibrierungsmodell erlaubt es, Dichte, Organisation und Interaktion unabhängig voneinander zu variieren, statt mehrere rein kosmetische Versionen desselben Layouts zu zeigen.

04 Beispielbriefing

Mit einem fokussierten Brief ausprobieren

Der folgende Beispiel-Brief wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn verwenden.

Einrichtung prüfen

Verwenden Sie den vollständigen Garden-Skill-Ordner, damit seine Design-Rezepte, das Erhaltungsprotokoll und optionale Abnahme-Referenzen verfügbar sind.

Upstream-Quelldatei

https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-design-engineer/SKILL.md

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Rahmenbedingungen dieses Briefs an, bevor Sie den Skill ausführen.

Beispiel-Brief

Nutze Web Design Engineer, um unsere bestehende Analytics-Oberfläche um einen Screen für gespeicherte Berichte zu erweitern. Erhalte Navigation, Abstands-Tokens und Tabellenkonventionen. Lies die gelieferten Komponenten und Screenshots, schlage das Designsystem vor und warte vor dem Codieren auf meine Freigabe. Zeige dann einen ansehbaren Entwurf mit Plänen für Lade- und Leerzustand. Nachdem ich diesen Entwurf freigegeben habe, schließe die Umsetzung ab und führe die Browser-Abnahme in den gelieferten Desktop- und Mobilgrößen durch. Erfinde keine Nutzungsstatistiken für Berichte.

Ergebnis prüfen

Vergleichen Sie das tatsächliche Ergebnis mit diesen beobachtbaren Kriterien.

Der dokumentierte Arbeitsmodus entspricht den tatsächlich an der bestehenden Oberfläche vorgenommenen Änderungen.
Die fertige Ansicht enthält die für den Brief relevanten Interaktionszustände.
Jede Behauptung einer Browser-Abnahme wird von tatsächlich getesteten Viewports und Ergebnissen begleitet.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass externe Werkzeuge, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Schnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quelleninhaber: ConardLi
Repository: ConardLi/garden-skills
Skill-Datei: skills/web-design-engineer/SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · aaf9a82f5efd

Redaktionelle Quellenzusammenfassung

Eine kontextorientierte Design-Engineering-Methode mit Anforderungen an Assets, Design-Kalibrierung, frühen Entwürfen, Erhaltungsmodi sowie getrennten Pfaden für Kritik und Browser-QA.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Entsteht immer ein React-Projekt?

Nein. HTML ist das Ausgabemedium, doch die Quelle deckt neben React-orientierten Prototypen und visuellen Artefakten auch reines HTML/CSS/JavaScript ab.

Ersetzt er ein bestehendes Designsystem?

Nicht automatisch. Der Workflow unterscheidet Erweiterung, erhaltendes Redesign und Überarbeitung; diese Wahl sollte vor dem Bearbeiten geklärt sein.

Enthält jeder Build automatisierte Browser-Tests?

Die Quelle verlangt für jede Arbeit eine leichte Selbstprüfung, doch das ausführbare Abnahme-Harness wird nur durch eine ausdrückliche Anfrage zu Browser, Responsivität oder QA ausgelöst.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Brief, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchsuchen