
Vorschaugalerie
Ähnliche Skills
Alle Skills ansehenDas bekommst du
- 22 verlinkte Seiten: Startseite, Projektübersicht, vier Case Studies, Services mit drei Detailseiten, About, Werdegang, ein Journal mit vier Artikeln, Kontakt, FAQ, Newsletter, Datenschutz und 404
- Der Doodle-Look: Headlines in Young Serif, Fließtext in Figtree, handschriftliche Notizen in Kalam, ein lila Porträt-Blob, Klebeband, Pfeile und Unterstreichungen, die sich einmal selbst einzeichnen
- Funktionierende Elemente: ein Preisrechner, Projektfilter mit Suche und Sortierung, Vorschau-Tabs in den Case Studies, ein Kundenstimmen-Karussell, FAQ-Tabs und validierte Formulare, alles in einer Offline-Datei
Passt gut für
- Frontend-Entwickler und Produktdesigner, die ein Portfolio mit Persönlichkeit statt eines dunklen Templates wollen
- Kleine Studios, Illustratoren und Indie-Produktmacher, die ihre Arbeit auf Case Studies, Services und Notizen abbilden können
- Freelancer, die Preise und Prozess von Anfang an zeigen und so passendere Anfragen bekommen wollen
Nicht geeignet für
- Seriöse oder förmliche Marken; die handgezeichneten Notizen und Pastellflächen sind bewusst verspielt
- Echten Nachrichtenversand: Kontakt- und Newsletter-Formular bestätigen auf der Seite und brauchen zum Versenden dein eigenes Backend
- Websites ohne Person im Mittelpunkt; der Hero ist um ein Porträt und eine Namenskarte herum gebaut
Corporate Design & MarkenidentitätWebdesign & digitale ErlebnissePortfolio-Website erstellenStil fixiertBearbeitbares ErgebnisDoodle-HeroHandnotizID-NotizPorträtbühne
Über diesen Skill

Mach aus deiner Arbeit ein Portfolio, das sich wie ein Skizzenbuch anfühlt: eine riesige kobaltblaue Serif-Headline auf warmem Creme, dein Porträt in einem lila Blob mit aufgeklebter ID-Notiz und handgezeichnete Pfeile, Blumen und Unterstreichungen, die fest ins Layout eingebunden sind. Die Beispiel-Website hat 22 verlinkte Seiten und kommt als eine Datei, die offline in jedem Browser öffnet.

Das bekommst du
- Eine Startseite mit About, Services, ausgewählten Arbeiten, Werdegang, Prozess, Toolkit, Kundenstimmen, Notizen und einem abschließenden Call to Action
- Case Studies mit gezeichneten Produktvorschauen in den Tabs Desktop, Mobil und Komponenten, dazu eine Projektübersicht mit Filtern, Suche und Sortierung
- Services mit Festpreis-Karten und einem Live-Rechner, der beim Auswählen eine Preisspanne aktualisiert
- About, Werdegang, ein Journal mit vollständigen Artikeln, FAQ, Newsletter, Datenschutz, Kontakt und eine gestaltete 404-Seite
- Young Serif, Figtree, Kalam und Geist Mono sind zusammen mit allen Bildern eingebettet, sodass die Seite keine Netzwerkanfragen stellt

So nutzt du es
- Gib deinen Namen, deine Rolle, Projekte, Services und Kontaktdaten an, dazu ein Porträt, falls du eins hast.
- Der Skill füllt jede Seite, entwirft fehlende Inhalte als plausible Platzhaltertexte und listet sie zur Bestätigung auf.
- Öffne die Datei, probier Preisrechner, Filter und Formulare aus und beschreibe Änderungen einfach in eigenen Worten.

Fotos und Illustrationen, die du nicht selbst lieferst, kommen vom Bildtool deines Agenten, für das eigene Nutzungskosten anfallen können.
Was du vorab brauchst
- Du bringst mit
- Dein Name, deine Rolle, dein Standort und eine kurze Vorstellung, dazu ein Porträt, falls du eins hast · Zwei bis sechs Projekte mit Briefing, wichtigen Entscheidungen und Ergebnis sowie deine Services mit Preisen · Optional: Werdegang, Toolkit, Kundenstimmen, Artikel und Kontaktdaten
- Abhängigkeiten
- Node.js 18 oder neuer auf dem Rechner deines Agenten, um das mitgelieferte Skript auszuführen, das die einzelne Offline-Datei baut · Internetzugang während des Builds, damit die Schriften einmal heruntergeladen und eingebettet werden können · Ein Bildtool in deinem Agenten für Porträt, Studio- und Kontextfotos sowie Journal-Illustrationen; optional, wenn du eigene lieferst
- Externe Kosten
- Fotos und Illustrationen, die du nicht selbst lieferst, werden mit dem Bildtool deines Agenten generiert, für das dessen Nutzungskosten anfallen können. Produktvorschauen werden im Code gezeichnet, und die fertige Seite stellt keine Netzwerkanfragen. Das Ansehen des Beispiels kostet nichts.
- Zuletzt getestet
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Nutzerbewertungen
Bewertungen werden geladen …









