Communitygithub.com

alty-oss/Design-Entwicklung

Wird verwendet, um eine unverwechselbare visuelle Richtung für eine neue Benutzeroberfläche oder ein bewusstes Redesign festzulegen.

Was ist Design-Entwicklung?

Diese AI-Agent-Fertigkeit (Skill) leitet einen systematischen, zweistufigen Designprozess zur Entwicklung unverwechselbarer visueller Richtungen für neue UI-Projekte oder gezielte Redesigns. Sie eignet sich ideal für Entwicklerteams, die mit Claude Code, Cursor oder ähnlichen KI-gestützten Tools arbeiten, um Designentscheidungen zu strukturieren und zu dokumentieren. Der Skill stellt sicher, dass zwei materiell unterschiedliche Designrichtungen auf Basis von Publikum, Inhalt und Aufgabenstellung vorgeschlagen werden. Er betont echte Inhalte, eine einprägsame expressive Komponente und eine strenge Hierarchie, anstatt nur Farbpaletten auszutauschen. Der Prozess dokumentiert die gewählte Richtung, die Begründung und den Entscheidungsstatus in einer `direction.md`-Datei und nutzt dabei Empfehlungen aus einer zugehörigen Frontend-Design-Anleitung. So wird eine fundierte Entscheidungsfindung mit explizitem Benutzerinput gefördert, selbst bei als Klischee geltenden Stilen.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alty-oss/dev-design/tree/HEAD/skills/art-direction

In Ihrer bevorzugten KI fragen

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

Dokumentation

Art Direction

Português (Brasil) Lies die enthaltene Frontend-Design-Anleitung, bevor du die Richtung wählst. Verwende deren spezifische visuelle Prinzipien zusammen mit dem Brief und den Projektbeschränkungen. Lies brief.md und bestehende Einschränkungen. Schlagen für neue Produkte/Redesigns zwei materiell unterschiedliche Richtungen vor, jede basierend auf Publikum, Inhalt und Aufgabe. Vergleiche Hierarchie, Komposition, Typografie und Betonung, nicht nur Farbpaletten-Austausch. Halte die gewählte Richtung, Begründung und den Entscheidungsstatus/die Quelle in direction.md fest. Wenn Entscheidungen delegiert wurden, wähle die beste Option aus und vermerke 'delegiert'. Ansonsten triff die materielle Entscheidung, bevor eine neue Richtung umgesetzt wird. Folge dem ursprünglichen Zwei-Stufen-Prozess:

  1. Plane 4–6 benannte Hex-Farben, Schriftarten und deren Rollen, Layout-Konzept und ASCII-Drahtmodell mit Ausrichtung sowie prägende Prinzipien.
  2. Vergleiche mit dem Brief und einem plausiblen ähnlichen Produkt. Überarbeite Entscheidungen, die bei nicht verwandten Themen identisch aussehen würden; dokumentiere die Änderung und den Grund. Explizite Benutzeranweisungen haben Vorrang, einschließlich Stile, die von der Quelle als Klischees genannt wurden. Ein Projekt mit einer bestehenden Identität verwendet diese normalerweise wieder. Verwende echte Inhalte. Konzentriere den Ausdruck auf ein einprägsames Element; unterstütze es mit einer disziplinierten Hierarchie. Erkläre fehlende Schriftarten/Assets und verwende einen bewussten Fallback, anstatt davon auszugehen, dass ein Dienst verfügbar ist.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Verwandte Skills