Communitygithub.com

AdamJ/trailpeakdesign

Nutze dieses Skill, um stark gebrandete Oberflächen und Assets für Trail Peak (Adam Jolicoeurs Portfolio + iOS + Design-System-Oberflächen) zu generieren – sowohl für die Produktion als auch für Wegwerf-Prototypen/Mockups. Enthält essentielle Designrichtlinien, Farben, Typografie, Schriftarten, Assets und UI-Kit-Komponenten für das Prototyping.

Was ist trailpeakdesign?

Dieser Skill versetzt einen KI-Agenten in die Lage, mit der Designsprache von Trail Peak von Adam Jolicoeur zu arbeiten. Er bietet eine vollständige Markenrichtlinie, einschließlich einer erdigen, warmen Farbpalette, CSS-Variablen für Farben, Typografie, Abstände, Radien und Schatten sowie spezifischen Schriftarten (Inter, Playfair Display, Fira Code, Pirata One). Der Skill enthält UI-Kit-Komponenten in JSX für die Marketing-Website sowie statische Assets wie Logos und Bilder. Er ist besonders nützlich für das schnelle Prototyping von HTML-Artefakten oder die Generierung von produktionsreifem Code für die Trail-Peak-Oberfläche, sei es für das Portfolio des Entwicklers, iOS oder das umfassendere Designsystem. Signatur-Moves wie zentrierte Diamond-Überschriften, flache Schatten ohne Unschärfe und spezifische Übergangs-CSS sind für eine konsistente Ästhetik kodifiziert.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add AdamJ/trailpeakdesign
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Lies die README.md-Datei innerhalb dieses Skills und erkunde die anderen verfügbaren Dateien.

Wenn du visuelle Artefakte (Folien, Mockups, Wegwerf-Prototypen usw.) erstellst, kopiere die Assets aus und erstelle statische HTML-Dateien, die der Benutzer ansehen kann. Wenn du an Produktionscode arbeitest, kannst du die Assets kopieren und die Regeln hier lesen, um ein Experte für das Design mit dieser Marke zu werden.

Wenn der Benutzer diesen Skill ohne weitere Anleitung aufruft, frage ihn, was er bauen oder designen möchte, stelle einige Fragen und agiere als erfahrener Designer, der je nach Bedarf HTML-Artefakte oder Produktionscode ausgibt.

Wichtige Dateien:

  • README.md – Markenkontext, Inhaltsgrundlagen, visuelle Grundlagen, Ikonografie
  • colors_and_type.css – CSS-Variablen für Farben, Typografie, Abstände, Radien, Schatten, Easing
  • fonts/ – Webschriften (Inter, Playfair Display, Fira Code, Pirata One)
  • assets/ – Logo + Bilder
  • preview/ – kleine Komponenten-/Token-Exemplare
  • ui_kits/marketing_site/ – JSX-Nachbildung der Portfolio-Website

Signature-Moves: erdig-warme Palette, flache 4–12px Offset-Schatten (KEIN Weichzeichner), 1px Rinden-Ränder, abgerundete 12–20px Ecken, Playfair Serif-Überschriften + Inter Fließtext + Fira Code Monospace + Pirata One Display, zentrierte Diamond-Abschnittsüberschriften, dezente cubic-bezier(.22,.61,.36,1) Übergänge. Phosphor Icons (Regular + Fill) über CDN.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community