Communitygithub.com

jhd3197/AgentSite

Persönliches Portfolio oder Studio-Website – großer typografischer Einstieg, Projektübersicht, Fallstudien-Links, Kontakt.

Was ist AgentSite?

AgentSite ist ein KI-Agenten-Skill, der ein persönliches Portfolio oder eine Studio-Website erstellt, um beim Besucher den Eindruck zu hinterlassen: 'Mit dieser Person möchte ich zusammenarbeiten.' Der Skill priorisiert eine minimalistische, markante Typografie und eine klare Informationshierarchie, die die Persönlichkeit und Professionalität des Nutzers vermittelt. Er ist für KI-Agenten in Entwicklungsumgebungen wie Claude Code, Cursor und Codex konzipiert, bei denen Benutzer mit natürlicher Sprache Webentwicklung steuern. AgentSite generiert eine einschichtige Website mit Komponenten wie einem schlanken Navigationsmenü, einer typografischen Intro-Erklärung, einer Rasteransicht von Projekten, einer Über-mich-Sektion, einem Kunden-/Presselogoblock und Kontaktinformationen. Integrierte Qualitätsregeln erzwingen Designentscheidungen wie konsistente Schriftartenpaare, Platzhalter für reale Projektbilder und den Verzicht auf Carousels, Parallax-Effekte oder Autoplay-Videos, um eine saubere, schnelle und ehrliche Benutzererfahrung zu gewährleisten.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jhd3197/AgentSite/tree/HEAD/agentsite/skills/portfolio

In Ihrer bevorzugten KI fragen

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

Dokumentation

Portfolio-Seite

Eine persönliche oder Studio-Website, deren Aufgabe es ist, den Besucher dazu zu bringen zu sagen: „Mit dieser Person möchte ich zusammenarbeiten.“

Erforderliche Oberflächen

  1. Schlanke Navigation — Name/Wortmarke, 3–4 Links (Arbeiten / Über mich / Schreiben / Kontakt).
  2. Einstieg — Große typografische Aussage (clamp()-Display-Größe). Ein Satz darüber, wer man ist, was man macht und für wen, plus ein schmaler Metadatenstreifen (Standort, Verfügbarkeit, aktuelle Rolle).
  3. Projektübersicht — 4–9 Fallstudien-Karten. Jede Karte: Titelbild / farbiger Block, Projekttitel, einzeilige Rolle, Jahr. Hover-Zustand hebt sich dezent an. Klick führt zu einer (nachgestellten) Fallstudien-URL.
  4. Über mich — Kurzer Biografie-Absatz + Foto ODER Signatur.
  5. Ausgewählte Kunden / Presse — zurückhaltender Logo-Streifen ODER Liste. Diesen Abschnitt komplett weglassen, wenn kein echtes Material vorhanden ist.
  6. Kontakt — E-Mail (mailto), ggf. Twitter/LinkedIn, Kalenderbuchungs-Link.

Qualitätsregeln

  • Eine durchgängige Schriftsprache. Falls die Display-Schrift serifenbetont ist, ist der Fließtext serifenlos (oder umgekehrt).
  • Projektkarten: echte Namen + Rollen. Verwendet beschriftete Platzhalter („[Titelbild – durch Hero-Shot ersetzen]“) und keine Lorem-ipsum-Titel.
  • Keine Karussells. Kein Parallax. Kein Autoplay-Video.
  • Leere / „Bald mehr“-Zustände sind ehrlich. Füllt das Raster nicht mit fingierten Projekten.

Verwandte Skills