projekt.studio-darugna.ch
Projekt.
Vorlagen und Ablagesystem des Studios. Hier startet jedes neue Projekt — mit der richtigen Vorlage, an den richtigen Orten. Alles andere ist Nachschlagewerk.
Das Büro in vier Bereichen
Jede Datei hat genau einen Heimat-Bereich. Wer das Prinzip kennt, findet alles — und legt nie doppelt ab. Klick auf einen Bereich führt zur Erklärung.
GDrive
Ablage & ArchivArbeitsdateien und Master: Fotos, PSD/AI, Dokumente, Korrespondenz. Nach Bereichen nummeriert, überall ein Archiv.
1 Büro · 2 Marketing · 4 Kontakte · 5 ProjekteSecond Brain
DenkraumObsidian: Projekt-Dokumentation, Bibliothek & Ressourcen, Entscheide, Pendenzen. Referenziert alles, dupliziert nichts.
02 Projekte · 03 Area · 04 RessourcenOnline
SchaufensterCode-Repos, GitHub und die live geschalteten Websites. Verlinkt im Hub studio-darugna.ch.
~/Developer · GitHub · SubdomainsTresor
Sensible DatenPasswortlisten, Verträge, Identität. Auf der Tafel sichtbar — der Inhalt bleibt bewusst offline und ausserhalb jedes Repos.
● bleibt offlineNachschlagewerk
Handbuch.
Die vier Bereiche des Büros und alle Vorlagen — erklärt: wofür, wann, wo.
Die vier Bereiche
I · Ablage & Archiv
GDrive
Der physische Aktenschrank des Büros. Hier liegen Arbeitsdateien und Master: Original-Fotos, PSD- und AI-Dateien, Schriften, Korrespondenz, gelieferte Unterlagen. Struktur: nummerierte Hauptbereiche, darunter Ordner nach der Konvention NN__Name, auf jeder Ebene ein 00__Archiv.
Gehört hierhin: alles Grosse, Originale, Binärdateien. Gehört nicht hierhin: Code, Notizen, Passwörter.
Meine Ablage: 1 Büro · 2 Marketing · 4 Kontakte · 5 Projekte
II · Denkraum
Second Brain — Obsidian
Das Gedächtnis des Büros. Projekt-Dokumentation nach der Projektvorlage (Kern 00–07 + Module), Bibliothek & Ressourcen, Tagebuch. Externe Dateien werden nur referenziert — die Wahrheit über ein Projekt steht hier, die Dateien selbst liegen in der GDrive.
Gehört hierhin: Entscheide, Pendenzen, Sessions, Wissen. Gehört nicht hierhin: grosse Binärdateien (nur via 07 Anhänge).
~/Second_Brain_Obsidian → 02 Projekte · 03 Area · 04 Ressourcen
III · Schaufenster
Online
Alles, was gebaut und gezeigt wird: Code-Repos in ~/Developer, gesichert auf GitHub, live geschaltet als Website. Jedes Repo ist selbständig baubar — ins Repo kommen nur weboptimierte Exporte aus der GDrive (Einbahnstrasse). Der Hub studio-darugna.ch verlinkt alle Webarbeiten: eigene Werkzeuge als Subdomain, fremde Domains als sichtbare Links.
Gehört hierhin: Code, Web-Exporte, Deployment. Gehört nicht hierhin: Master-Dateien, Zugangsdaten.
~/Developer → GitHub → Cloudflare Pages / cyon → Domain
IV · Sensible Daten
Tresor
Passwortlisten, Verträge, Ausweise, Bankunterlagen. Der Bereich ist auf der Tafel sichtbar, damit das System vollständig ist — sein Inhalt bleibt aber bewusst offline: nie in einem Repo, nie auf einer Website, nie in einem Claude-Brief. Auf dieser Seite wird er nur benannt, nie verlinkt.
Die Vorlagen
Jede Vorlage mit Zweck, Einsatzmoment und Ablageort. «Anmerkung» öffnet ein Notizfeld — bleibt lokal gespeichert.
Vorschlag · Entwurf v1
Ordnerstruktur.
Die drei Skelette für jedes Webprojekt — destilliert aus pets-da-rugna, der Architekturfotografie-Site und mario-hq. Details zur Benennung stehen im gleichnamigen Kapitel.
GDrive — Arbeitsdateien
Wird im Kontaktordner angelegt, mit Datumspräfix. Master und Originale bleiben hier; nichts davon geht direkt ins Repo.
JJ-MM-TT__Website/ ├── 00__Archiv/ ├── 01__Design/ │ ├── 00__Archiv/ │ ├── 01__Moodboard/ │ ├── 02__Wireframes/ │ └── 03__Screendesign/ ├── 02__Inspiration/ │ ├── 00__Archiv/ │ └── 01__Referenzen/ ← Screenshots anderer Websites ├── 03__Assets/ │ ├── 00__Archiv/ │ ├── 01__Bilder/ ← Master: Fotos, Originale │ ├── 02__Grafiken/ ← Logo, Icons, SVG-Quellen │ ├── 03__Schriften/ ← Lizenzen + Originaldateien │ └── 04__Videos/ optional └── 04__Inhalte/ ← Texte, Copy, gelieferte Unterlagen
Repo — Code (Starter «web-vorlage»)
Selbständig baubar: Wer nur das Repo hat, kann die Site deployen. Weboptimierte Exporte aus der GDrive landen in assets/ — Einbahnstrasse.
web-‹projekt›/ ├── index.html ├── impressum.html ├── datenschutz.html ├── css/ │ ├── styles.css ← Brand-Tokens (Farben/Fonts) ganz oben in :root │ └── fonts.css ├── js/ │ └── main.js ├── assets/ │ ├── img/ ← weboptimierte Exporte, deutsche Namen (hero.webp) │ └── fonts/ ← WOFF2 ├── favicon.svg ├── robots.txt ├── sitemap.xml ├── deploy.sh ← rsync → cyon (bei Subdomain-Hosting) ├── README.md ← Steckbrief + die drei Pfade + Deploy-Anleitung └── _pendenzen.md ← projektbezogene Code-Tasks (Konvention aus mario-hq)
Obsidian — Projektdoku
Kern 00–07 aus der Projektvorlage, Module fortlaufend ab 08. Anhänge vault-global in 07 Anhänge/ mit Datumspräfix, via Wikilink eingebettet.
03 Area/‹Kontakt›/Website ‹Domain›/ ├── 00 Meine Projektnotizen.md ├── 01 README.md ← Brief für Claude-Chats, die drei Pfade ├── 02 Grundlagen.md ← Single Source of Truth: Domain, Farben, Fakten ├── 03 Pendenzen.md ├── 04 Sessions.md ├── 05 Stakeholder.md ├── 06 Sitzungsvorbereitung.md ├── 07 Decisions.md ├── 08 Design.md ← Modul M-Design └── 09 Recherche.md optional — Modul M-Recherche
Konventionen
Benennung.
Ein Name sagt, was drin ist, wann es entstand und wo es hingehört. Diese Regeln gelten überall — wer sie kennt, braucht keine Suche.
GDrive
| Was | Regel | Beispiel |
|---|---|---|
| Ordner | Zweistellige Nummer + Doppel-Unterstrich, auf jeder Ebene ein Archiv | 03__Assets/01__Bilder |
| Datierte Ordner & Dateien | Datumspräfix Jahr-Monat-Tag, dann Beschreibung | 26-07-21__Website |
| Versionen von Dokumenten | v0.1, v0.2 … v1.0 = Erst-Freigabe | 26-07-21__Offerte-v0.2.pdf |
Repo (Code)
| Was | Regel | Beispiel |
|---|---|---|
| Repo-Name | Kleinbuchstaben, Bindestrich, Präfix web- bei Websites | web-martina |
| Ordner & Code-Dateien | Englisch, kleingeschrieben | assets/img · styles.css · main.js |
| Bilder im Repo | Deutsch, beschreibend, kebab-case, ohne Datum | hero.webp · portrait-atelier.jpg |
| Schriften | WOFF2, Name der Schrift | Manrope.woff2 |
Merksatz: Struktur spricht englisch (Web-Standard), Inhalt spricht deutsch (deine Welt).
Obsidian (Second Brain)
| Was | Regel | Beispiel |
|---|---|---|
| Projekt-Dateien | Kern 00–07 mit Leerzeichen (kein __), Module fortlaufend ab 08 | 01 README.md · 08 Design.md |
| Anhänge | Vault-global in 07 Anhänge/, mit Datumspräfix, via Wikilink eingebettet | 26-07-21__HQ-Skizze.jpeg |
| Datum in Dokumenten | ISO-Format Jahr-Monat-Tag | 2026-07-21 |
| Sprache | Schweizer Hochdeutsch, kein ß | «Mass» statt «Maß» |
Bewusster Unterschied: In der GDrive trennt der Doppel-Unterstrich (01__Design), im Vault das Leerzeichen (01 README) — Obsidian-Wikilinks bleiben so lesbar.
Webprojekt-Setup
Neues Projekt.
Formular ausfüllen, Ordner an- und abwählen, Brief erzeugen — und Claude Code legt im neuen Chat alles an drei Orten an (GDrive, Obsidian, Repo).
Eckdaten
Der Projektname bestimmt den Repo-Namen (web-<name>) und die Ordnernamen.
GDrive — Arbeitsdateien
Angelegt im Kontaktordner als JJ-MM-TT__Website/. Originale und Master bleiben hier — ins Repo kommen nur weboptimierte Exporte (Einbahnstrasse).
Obsidian — Projektdoku
Ort: 03 Area/<Kontakt>/Website <Domain>/
Repo & Deployment
Englische Strukturnamen (assets/, styles.css, main.js), deutsche Bildnamen. Basis ist das Starter-Repo web-vorlage.
Bild-Prompts
Prompter.
Bausteine antippen, der Prompt entsteht live. Fertigen Prompt — optional mit Bildern — in den Bildgenerator kopieren.
Einzelbild — oder eine Serie mit gemeinsamer DNA, nummerierten Prompt-Karten und Abhaken (W-Serie-Methodik). Video folgt als eigener Aufbau.
Bewährte Baustein-Kombinationen unter eigenem Namen — einmal speichern, immer wieder laden.
Was machst du gerade? Die Seite zeigt nur die passenden Bausteine — «Frei / Alles» blendet sämtliche ein.
Ergebnis
Serien-Werkstatt
Die Bausteine oben sind die Welt-DNA der Serie. Einmal senden, dann Bild für Bild abarbeiten — ein Chat pro Serie.
- Ein neuer Chat pro Serie — beste Konsistenz, kein Stil-Bluten.
- DNA senden, kurze Bestätigung abwarten.
- Karte für Karte: Prompt kopieren, senden, warten bis das Bild fertig ist (4-in-1 dauert Minuten — nicht doppelt senden).
- Bild unter dem Dateinamen der Karte speichern, abhaken.
- Für Varianten den Edit-Trick nutzen: exakt gleiche Ansicht, NUR eine Sache ändern.
Arbeitsstand
Pendenzen.
Die offenen Arbeiten am System. Abhaken, ergänzen — der Stand bleibt lokal gespeichert.
Wünsche & Änderungen
Was soll an dieser Seite oder am System anders werden? Notizen für dich selbst — Änderungen besprichst du am einfachsten direkt im Chat mit Claude.
Alle Eingaben werden lokal in diesem Browser gespeichert.