Lokalisierter Leseleitfaden

frontend-designZweck, Verwendung und Quelle

Entwickeln Sie unverwechselbare, produktionsreife Frontend-Oberflächen mit hoher Designqualität. Nutzen Sie diese Fähigkeit, wenn der Benutzer die Erstellung von Webkomponenten, Seiten, Artefakten, Postern oder Anwendungen wünscht (Beispiele hierfür sind Websites, Landingpages, Dashboards, React-Komponenten).HTML/CSSLayouts oder wannstyling/beautifying(Beliebige Web-UI). Generiert kreativen, eleganten Code und ein UI-Design, das generische KI-Ästhetik vermeidet.

Quelle abgerufen: 2026-10-29

Quell-Repository: vercel-labs/open-agents
SKILL.md: .agents/skills/frontend-design/SKILL.md
Repository-Sterne: 5,871
Repository zuletzt aktualisiert: 2026-08-29
Fähigkeitskategorien: Design
Letzte Datenerfassung: 2026-10-31 10:38 UTC+08:00

Lizenz: MIT

Original SKILL.md

Die Workflow-Auszüge dienen als Lesehilfe und sind keine ausführbaren Anweisungen von Codez. Für die Erstellung dieser Seite wurde keine Drittanbieter-Skill verwendet.

Die folgenden Abschnitte zu Zweck und Arbeitsablauf sind vorgelagertes Material, das zur besseren Lesbarkeit aufbereitet und übersetzt wurde. Sie unterscheiden sich von der separat gekennzeichneten redaktionellen Analyse von Codez.

Was diese Fähigkeit bewirkt

Wie der vorgelagerte Workflow funktioniert

Überblick

Diese Fähigkeit ermöglicht die Entwicklung unverwechselbarer, produktionsreifer Frontend-Oberflächen, die generische, unpersönliche KI-Ästhetik vermeiden. Implementieren Sie funktionsfähigen Code mit besonderem Augenmerk auf ästhetische Details und kreative Entscheidungen. Der Benutzer definiert die Frontend-Anforderungen: eine Komponente, Seite, Anwendung oder Oberfläche, die entwickelt werden soll. Diese Anforderungen können Kontextinformationen zu Zweck, Zielgruppe oder technischen Einschränkungen enthalten.

Aufwärtspassage · L6 ↗

Design Thinking

Bevor Sie mit dem Programmieren beginnen, sollten Sie den Kontext verstehen und sich auf eine klare ästhetische Richtung festlegen: Zweck: Welches Problem löst diese Benutzeroberfläche? Wer nutzt sie?

Aufwärtspassage · L10 ↗

Richtlinien für die Frontend-Ästhetik

Typografie: Wählen Sie schöne, einzigartige und interessante Schriftarten. Vermeiden Sie Standardschriften wie Arial und Inter; entscheiden Sie sich stattdessen für ausdrucksstarke Schriften, die die Ästhetik des Frontends aufwerten – unerwartete, charaktervolle Schriftarten. Kombinieren Sie eine markante Display-Schrift mit einer eleganten Fließtextschrift. Farbe & Design: Achten Sie auf ein stimmiges Erscheinungsbild. Verwenden Sie CSS-Variablen für Konsistenz. Kräftige Farben mit markanten Akzenten wirken besser als zurückhaltende, gleichmäßig verteilte Farbpaletten.

Aufwärtspassage · L26 ↗

Anforderungen und Einrichtung

Aus dieser Datei wurde kein Abschnitt mit kurzen Anforderungen ausgewählt. Dies bedeutet nicht, dass die Fertigkeit keine Abhängigkeiten hat. Überprüfen Sie die Anweisungen zur Repository-Einrichtung und die referenzierten Dateien.

Grenzwerte und Qualitätskontrollen

Aus dieser Datei wurde kein separater Grenzwertabschnitt ausgewählt. Dies bedeutet nicht, dass die Anwendung für jede Eingabe oder Umgebung geeignet ist. Überprüfen Sie den vollständigen Quellcode und validieren Sie Ihr Ergebnis selbst.

Beginnen Sie mit einem sicheren Testlauf

Prüfen Sie den unterstützten Host und die Installationsanweisungen für das Repository. Halten Sie das Skill-Verzeichnis und die darin enthaltenen Skripte, Assets und Dokumentationen zusammen;SKILL.mdEine Einzelperson kann Abhängigkeiten außer Acht lassen.
Geben Sie dem Agenten Ihre tatsächlichen Eingaben, die gewünschten Ausgaben und die Akzeptanzkriterien an. Aufrufsyntax und verfügbare Tools hängen vom Hostsystem ab; diese Website geht nicht von einem universellen Installationsbefehl aus.
Testen Sie den Quellworkflow in einem temporären Projekt oder auf einer Kopie. Überprüfen Sie Vorgänge, die Dateien, Remote-Dienste oder abrechnungsfähige Ressourcen ändern, bevor Sie diese zulassen.
Überprüfen Sie die Ausgabe anhand der Quellqualitätsprüfungen und Ihrer eigenen Anforderungen. Ein erfolgreicher Trigger oder eine hohe Anzahl von Sternen im Repository garantiert kein korrektes Ergebnis.

Spezifikation des Kompetenzformats und des Verzeichnisses ↗

Lesen Sie mehr dazu in der Quelle.

Übersetzung und Umfang

Dieser Leseleitfaden wählt Passagen aus dem markierten stromaufwärts gelegenen Abschnitt aus.SKILL.mdDie Übersetzung wurde unterstützt. Es handelt sich weder um ein vollständiges Handbuch noch um eine Garantie für geprüfte Kompatibilität. Lesen Sie vor der Verwendung das Original und die darin referenzierten Dateien.

Diese Einleitung bezieht sich auf die unten angepinnte Version; die aktuelle Repository-Aktivität und der Erfassungszeitpunkt werden separat angezeigt.

Angeheftete Quelle: Lesen Sie das Original ↗
Quelle abgerufen: 2026-10-29T09:32:23Z
Source-Commit: cf865e94de7729751c747171785b6ce57e7b178c
Quelle SHA-256: 1bb3263d490c2585bf64a4e399ab28650a5034d7705abdbbe82a5a9dce1e6873

Zurück zum vollständigen Kompetenzkatalog