Agent Skills für Branding

Branding-Skills decken die Arbeit ab, zu entscheiden, was eine Marke ist, und sie dann konsistent zu halten. Dazu gehören Markenstrategie – für wen sie da ist und was sie nicht sein will – sowie Identität, die Zeichen, die Menschen wiedererkennen; Stimme, wie sie klingt, wenn sie spricht; System, die Regeln, die spätere Arbeit wie dieselbe Marke aussehen lassen; Anwendung, die Identität auf realen Oberflächen; und Governance, wer sie ändern darf und was unverändert bleiben muss. Lies die Rangliste im Hinblick auf das Unterthema, das du tatsächlich brauchst. Wenn du die Positionierung noch definierst, beginne mit der Strategie. Wenn die Strategie steht und du Zeichen, Stimme oder Regeln brauchst, gehe direkt dorthin. Nutze die Liste, um Kandidaten zum benötigten Unterthema zu vergleichen, wähle dann einen aus und lade ihn.

4 zum Start24 beste Optionen

Hier anfangen.

A brand is strategy plus identity: who it is for, what it claims, how it looks and sounds, and how that system is applied.

Dies sind die relevantesten Ergebnisse. Öffne einen Skill, lies die Anleitung und prüfe die Eignung.

Who this is for, and what it refuses to be.The marks people recognize.How it sounds when it speaks.Rules so later work still looks like the same brand.The identity used on real surfaces.Who can change it, and what must stay still. Ein Teilproblem dieses Bereichs, für das es noch keine Skills gibt.

24 beste Optionen

  1. Rang 04
    Direkt

    brand-guidelines

    Offiziell

    Wendet Anthropics offizielle Markenfarben und Typografie auf jede Art von Artefakt an, das von einem Anthropic-Look-and-Feel profitieren könnte. Verwenden, wenn Markenfarben oder Styleguides, visuelle Formatierung oder Unternehmensdesignstandards zutreffen.

    • Identity
    • System
    Agent Skill ansehen
20 weitere Agent Skills anzeigen
  1. Rang 09
    Möglich

    design-system

    Token-Architektur, Komponentenspezifikationen und Slide-Generierung. Drei-Schichten-Tokens (primitive→semantic→component), CSS-Variablen, Abstands-/Typografie-Skalen, Komponentenspezifikationen, strategische Slide-Erstellung. Verwenden für Design-Tokens, systematisches Design, markenkonforme Präsentationen.

    • System
    35.435 · Beliebtheit
    Agent Skill ansehen
  2. Rang 10
    Möglich

    figma-create-design-system-rules

    Offiziell

    Generiert benutzerdefinierte Design-System-Regeln für die Codebasis des Nutzers. Verwenden, wenn der Nutzer sagt "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines" oder projektbezogene Konventionen für Figma-zu-Code-Workflows etablieren möchte. Erfordert eine Verbindung zum Figma MCP-Server.

    • System

    Voraussetzungen (angegeben): MCP server

    Agent Skill ansehen
  3. Rang 11
    Möglich

    figma-generate-design

    Offiziell

    Diese Skill zusammen mit figma-use verwenden, wenn die Aufgabe darin besteht, eine Anwendungsseite, Ansicht oder ein mehrteiliges Layout in Figma zu übertragen. Auslöser: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. Dies ist die bevorzugte Workflow-Skill, wann immer der Nutzer eine vollständige Seite, einen Screen oder eine Ansicht in Figma aus Code oder einer Beschreibung erstellen oder aktualisieren möchte. Entdeckt Design-System-Komponenten, Variablen und Styles über search_design_system, importiert sie und setzt Screens schrittweise Abschnitt für Abschnitt mit Design-System-Tokens statt hartcodierten Werten zusammen.

    Agent Skill ansehen
  4. Rang 12
    Möglich

    extract-design-system

    Extrahiert Design-Primitives von einer öffentlichen Website und generiert Starter-Token-Dateien für dein Projekt.

    129.921 · Beliebtheit
    Agent Skill ansehen
  5. Rang 13
    Möglich

    design-md

    Analysiert Stitch-Projekte und synthetisiert ein semantisches Designsystem in DESIGN.md-Dateien

    63.187 · Beliebtheit
    Agent Skill ansehen
  6. Rang 14
    Möglich

    figma

    Importiert Figma-Inhalte in eine HyperFrames-Komposition – gerenderte Assets, Brand Tokens, Komponenten, Storyboard-Abschnitte → rekonstruierte Motion (Frames werden als States gelesen, nicht als Slides) (REST/CLI), Connector-gestützte Motion, wenn verfügbar, und Shaders aus einem Connector oder nativen Export. Verwenden, wenn der Nutzer…

    • Identity
    232.154 · Beliebtheit
    Agent Skill ansehen
  7. Rang 15
    Möglich

    hyperframes-creative

    Nicht-animierte Creative Direction für HyperFrames-Videos. Für Design-Spec-Handling (frame.md / design.md), Paletten, Typografie, Narration, Beat-Planung, audio-reaktive Visuals, Kompositionsmuster und Brand-/Style-Entscheidungen. Für atomare Motion-Patterns und Scene-Blueprints…

    682.929 · Beliebtheit
    Agent Skill ansehen
  8. Rang 16
    Möglich

    design-taste-frontend

    Anti-Slop-Frontend-Skill für Landing Pages, Portfolios und Redesigns. Der Agent liest das Briefing, leitet die richtige Designrichtung ab und liefert Interfaces, die nicht wie Templates wirken. Echte Designsysteme, wenn anwendbar, Audit-first bei Redesigns, strikter Pre-Flight-Check.

    • Brand strategy
    • Identity
    579.632 · Beliebtheit
    Agent Skill ansehen
  9. Rang 17
    Möglich

    redesign-existing-projects

    Bringt bestehende Websites und Apps auf Premium-Qualität. Auditiert das aktuelle Design, identifiziert generische KI-Muster und wendet High-End-Designstandards an, ohne die Funktionalität zu brechen. Funktioniert mit jedem CSS-Framework oder Vanilla CSS.

    418.259 · Beliebtheit
    Agent Skill ansehen
  10. Rang 18
    Möglich

    ui-ux-pro-max

    UI/UX-Design-Intelligenz für Web, Mobile und Desktop. Diese Skill sollte beim Entwerfen, Erstellen, Überprüfen oder Beheben von Interfaces verwendet werden, einschließlich Seiten, Komponenten, Design-Systemen, Barrierefreiheit, Interaktion, responsivem Layout, Typografie, Farbe, Diagrammen und stack-spezifischer UI-Umsetzung.…

    386.243 · Beliebtheit
    Agent Skill ansehen
  11. Rang 19
    Möglich

    gpt-taste

    Elite UX/UI & Advanced GSAP Motion Engineer. Erzwingt Python-gesteuerte echte Randomisierung für Layoutvarianz, strikte AIDA-Seitenstruktur, breite redaktionelle Typografie (verbietet 6-zeilige Umbrüche), lückenlose Bento-Grids, strikte GSAP ScrollTriggers (Pinning, Stacking, Scrubbing), Inline-Mikrobilder und massives…

    364.217 · Beliebtheit
    Agent Skill ansehen
  12. Rang 20
    Möglich

    stitch-design-taste

    Semantic Design System Skill für Google Stitch. Generiert agent-freundliche DESIGN.md-Dateien, die Premium- und Anti-Generic-UI-Standards durchsetzen — strikte Typografie, kalibrierte Farbe, asymmetrische Layouts, permanente Mikro-Bewegung und hardwarebeschleunigte Performance.

    360.899 · Beliebtheit
    Agent Skill ansehen
  13. Rang 21
    Möglich

    impeccable

    Verwenden, wenn der Nutzer eine Frontend-Oberfläche entwerfen, neu gestalten, formen, kritisieren, prüfen, verfeinern, klären, verdichten, härten, optimieren, anpassen, animieren, einfärben, extrahieren oder anderweitig verbessern möchte. Deckt Websites, Landing Pages, Dashboards, Produkt-UI, App-Shells, Komponenten, Formulare, Einstellungen, Onboarding ab,…

    Voraussetzungen (angegeben): Node.js

    319.215 · Beliebtheit
    Agent Skill ansehen
  14. Rang 22
    Möglich

    tailwind-design-system

    Skalierbare Designsysteme mit Tailwind CSS v4, Design-Tokens, Komponentenbibliotheken und responsiven Mustern erstellen. Verwenden beim Erstellen von Komponentenbibliotheken, Implementieren von Designsystemen oder Standardisieren von UI-Mustern.

    • System
    67.572 · Beliebtheit
    Agent Skill ansehen
  15. Rang 23
    Möglich

    firecrawl-website-design-clone

    Extrahiert das Design-System jeder Website in eine agent-ready DESIGN.md anhand von Firecrawl-Scrape-Belegen. Verwenden, wenn der Nutzer Farben, Schriften, Abstände, Komponenten, Layoutmuster oder Marken-/UI-Hinweise von einer Website möchte, damit KI-Agents neue Websites erstellen, einen Look klonen oder Seiten inspiriert von dieser … bauen können.

    • Identity
    • System
    32.746 · Beliebtheit
    Agent Skill ansehen
  16. Rang 24
    Möglich

    penpot-audit-tokens

    Offiziell

    Prüfe ein Penpot-Design auf Design-System-/Token-GOVERNANCE-Probleme (abzugrenzen von Accessibility): hartkodierte Farben, wo ein Token existiert, Raster-abweichende Abstände, verwaiste/unaufgelöste/unbenutzte Tokens, doppelte Werte und losgelöste Teile, die Komponenteninstanzen sein sollten. Erstellt einen Schweregrad-Bericht und schlägt semantische Token-Austausche vor. Auslöser: 'audit tokens', 'find hardcoded colors', 'token governance', 'check design system consistency', 'find off-grid spacing', 'detect raw values', 'are we using tokens correctly'.

    Agent Skill ansehen
  17. Rang 25
    Möglich

    penpot-build-from-code

    Offiziell

    Übersetzt den Code einer bestehenden Anwendungsseite, View oder Komponente in einen Penpot-Screen, der an das bestehende Design-System gebunden ist — Code-Styles werden auf semantische Tokens abgebildet und Library-Komponenten statt roher Formen wiederverwendet. Verwenden, wenn der Nutzer echten Code/Markup hat und ihn in Penpot Abschnitt für Abschnitt systemkonform rekonstruieren möchte. Trigger: 'build this in Penpot from code', 'turn this React/HTML/CSS into a Penpot screen', 'recreate this view in Penpot', 'port this page to Penpot', 'translate this component to Penpot bound to our tokens', 'code to Penpot'.

    Agent Skill ansehen
  18. Rang 26
    Möglich

    penpot-build-screen

    Offiziell

    Entwirft produktionsreife Screens in Penpot aus einem Brief, wie ein Senior Visual Designer — unter Wiederverwendung des bestehenden Designsystems (Tokens + Komponenten) und Zusammenbau Abschnitt für Abschnitt, niemals in einem Durchgang. Verwenden, um einen Screen/eine Seite/eine Landing/ein Dashboard aus einer Beschreibung zu erstellen. NICHT zum Übersetzen von bestehendem Code (verwende penpot-build-from-code). Auslöser: 'design a dashboard', 'create a landing page', 'design this app screen', 'build a UI from this brief', 'design a settings page', 'mock up a screen in Penpot'.

    Agent Skill ansehen
  19. Rang 27
    Möglich

    penpot-design-md

    Offiziell

    Extrahiert eine DESIGN.md-Designdokumentationsdatei aus einer Penpot-Datei: eine portable Markdown-Spezifikation (YAML-Frontmatter mit Token-Maps für Farben/Typografie/Rounded/Spacing/Komponenten + Prosa-Abschnitte: Overview, Colors, Typography, Layout, Shapes, Components, Do's & Don'ts, Iteration Guide, Known Gaps) im design-md-Format, fundiert auf den echten Tokens, Library-Assets und gesampelten Komponentenstilen der Datei — niemals erfunden. Read-only auf dem Canvas; schreibt eine lokale Markdown-Datei. Trigger: 'generate DESIGN.md', 'create a design.md', 'document the design system as markdown', 'export design guidelines', 'extract design documentation', 'design system spec file', 'make a style guide file from this design'.

    Agent Skill ansehen
  20. Rang 28
    Möglich

    penpot-design-to-code-review

    Offiziell

    Prüfe ein Penpot-Design gegen seinen implementierten Code (eine Quellkomponente oder Storybook-Story) und gib einen strukturierten DRIFT-Bericht aus. Verwende dies, wenn ein Engineer bestätigen muss, dass der Build zum Design passt: HTML/CSS aus einer Auswahl extrahieren, seine Tokens/Struktur/Zustände auf die Code-Komponente abbilden, sie diffen und auflisten, was auf jeder Seite fehlt, mit Schweregrad und Abgleich. Fällt bei fehlender Code-Quelle sauber auf eine Design-System-Token-Prüfung zurück. Auslöser: 'design to code review', 'does my code match the design', 'design code parity', 'compare Penpot to my component', 'check this against Storybook', 'extract HTML/CSS from this selection', 'find design drift', 'design implementation diff'.

    Agent Skill ansehen
Was dieses Thema umfasst

Was dieses Thema umfasst

Jedes Unterthema bündelt Agent Skills für eine bestimmte Situation.

Brand strategy
Who this is for, and what it refuses to be.
Identity
The marks people recognize.
Voice
How it sounds when it speaks.
System
Rules so later work still looks like the same brand.
Application
The identity used on real surfaces.
Governance
Who can change it, and what must stay still.
Häufige Fragen

Häufige Fragen

Welche Arten von Skills gibt es im Thema Branding?
Sie fallen in Brand Strategy, Identity, Voice, System, Application und Governance. Strategy deckt ab, für wen die Marke da ist und was sie nicht sein will; der Rest deckt Marken, Klang, Regeln, reale Oberflächen und wer Dinge ändern darf.
Wie ist die gereihte Liste sortiert?
Die Reihenfolge richtet sich nach der beobachteten Suchnachfrage, wobei direkte Treffer zum Thema zuerst kommen und die Anzahl pro Herausgeber begrenzt ist. Nutze die Reihenfolge als Ausgangspunkt, nicht als Ersatz dafür, das benötigte Unterthema zu prüfen.
Sollte ich mit Strategie oder Identität beginnen?
Eine Marke ist Strategie plus Identität: für wen sie da ist, was sie behauptet, wie sie aussieht und klingt und wie dieses System angewendet wird. Ist die Positionierung ungeklärt, beginne mit der Strategie; ist sie geklärt, gehe zu Identität, Tonalität oder System.
Was deckt Governance ab?
Bei Governance geht es darum, wer die Marke ändern darf und was unverändert bleiben muss. Sie gehört ins selbe Thema, weil ein System nur hält, wenn Änderungen kontrolliert werden.

Agent Skill installieren

Agent Skills sind SKILL.md-Dateien. Die meisten Agenten erkennen sie, sobald sie im richtigen Skills-Verzeichnis liegen:

  • Claude Code — copy the SKILL.md for brandkit into ~/.claude/skills/brandkit/ for yourself, or .claude/skills/brandkit/ to share it with a project.
  • From the registry — run npx skills add leonxlnx/taste-skill@brandkit.
  • Or download brandkit from its source and place that SKILL.md in the directory above.

Wie auswählen Prüfe Quelle und Anleitung des Skills vor der Installation. Die Labels Official und Notable beschreiben die Herkunft eines Skills.