Stegreif · Bachelor Architektur · HS Mainz

Onboarding: Carbon to Silicon

Noch nie programmiert? GitHub völlig fremd? Kein Problem. Diese Seite führt Sie Schritt für Schritt – von null bis zu Ihrem eigenen, live laufenden Entwurfs-Werkzeug.

Wichtig vorab: Sie müssen nicht programmieren können. Ihre Aufgabe ist es, die Regeln zu definieren – den Code schreibt die KI. Sie sind der Architekt des Systems, nicht der Programmierer.
0 von 7 Schritten erledigt · Ihr Fortschritt wird lokal gespeichert
0Was Sie am Ende haben
Das große Bild in 60 Sekunden▶

Sie bauen kein fertiges Gebäude, sondern ein kleines Werkzeug: einen Konfigurator, der im Browser läuft und – nach Ihren Regeln – aus einem selbst definierten Baukasten („Kit of Parts") in Echtzeit ein 3D-Gebäude in einer vorgegebenen Baulücke erzeugt.

Die Idee Carbon → Silicon: Am Freitag entsteht Ihr Konzept analog, nur mit Kopf, Stift und Papier (Kohlenstoff). Danach setzen Sie es mithilfe von KI-Agenten in ein funktionierendes Werkzeug um (Silicium). Bewertet wird Ihre Haltung und Logik, nicht der Code.

Ihr Ablauf in einem Satz
Eigenes Repo aus der Vorlage → im Browser veröffentlichen (Pages) → mit der KI Ihren Konfigurator in die Vorlage hineinbauen → testen → abgeben.
1GitHub-Account anlegen
Ihr kostenloser Arbeitsplatz im Web▶

GitHub ist der Ort, an dem Ihr Projekt lebt. Account anlegen (kostenlos), E-Mail bestätigen – fertig.

GitHub-Account erstellen →
Tipp
Wählen Sie einen Benutzernamen, den Sie auch beruflich zeigen würden – er wird Teil Ihrer Projekt-URL.
2Eigenes Projekt aus der Vorlage
Ein Klick – „Use this template"▶

Sie starten nicht bei null: Es gibt eine fertige Vorlage (Repository) mit Szene, Baulücken-Kontext und Exportfunktion. Mit „Use this template" erzeugen Sie Ihre eigene Kopie.

Eigene Kopie erstellen → Vorlage ansehen
  • Repository-Name frei wählbar (z. B. c2s-nachname).
  • Sichtbarkeit: Public (nötig, damit Ihr Tool live laufen kann).
  • „Create repository" klicken.
3Live schalten mit GitHub Pages
Ihr Tool bekommt eine Web-Adresse▶

GitHub Pages macht aus Ihren Dateien eine echte Webseite, die jede:r im Browser öffnen kann.

  • In Ihrem Repository: Settings → Pages.
  • Source: „Deploy from a branch".
  • Branch: main, Ordner / (root) → Save.
  • Nach ca. 1–2 Minuten erscheint oben: „Your site is live at …" – das ist Ihre Tool-URL.
Wenn ein Fehler kommt
Direkt nach dem Aktivieren zeigt die Seite oft kurz einen Fehler (404). Einfach 1–2 Minuten warten und neu laden (Strg+F5).
4Den Scaffold verstehen
Was vorgegeben ist – und was Ihre Aufgabe ist▶

Die Datei index.html ist Ihr Werkzeug. Öffnen Sie Ihre Pages-URL: Sie sehen die Baulücke – zwei Nachbargebäude, dazwischen das blaue bebaubare Volumen und Regler für Breite, Tiefe und Höhe.

  • Vorgegeben & verbindlich (grau/blau): der Kontext – Brandwände, Nachbarn, Umgebung, Sonnenstand/Schatten und das blaue Volumen.
  • Ihre Aufgabe: im Code die Funktion buildKonfigurator() füllen – dort entsteht Ihr Gebäude aus Ihrem Kit of Parts nach Ihren Regeln. Die Stelle ist klar markiert: === HIER BEGINNT IHR KONFIGURATOR ===.
  • Außerdem: Das Tool zeigt rechts eine feste Auswertung (DIN 277, Kennwerte). Sie definieren zusätzlich ein eigenes vergleichendes Kriterium in eigenesKriterium() – quantifizierbar, reagiert live, in der Reflexion begründet.
Gut zu wissen
Der Platzhalter-Block im Tool ist Absicht – er zeigt, wo Ihr Entwurf hinkommt. Ihn ersetzen Sie. Die wichtigsten Umgebungsmaße (Straße, Innenhof) werden im Modell angezeigt; die Baulücke sitzt in einem geschlossenen Blockrand mit Innenhof.
Ausdrücklich erwünscht
Das UI dürfen Sie frei anpassen – zusätzliche Darstellungen und Auswertungen des Modells (Schnitte, Pläne, weitere Kennwerte …) sind gern gesehen.
5Mit der KI arbeiten
Ihr Regel-Blatt wird zu Code▶

Sie beschreiben Ihr Kit of Parts und Ihre Regeln – die KI schreibt den Code. Empfohlen ist ein starker Agent (Claude Pro / ChatGPT Plus); kostenlos geht es über die GWDG Academic Cloud (gute Code-Modelle: Qwen 3 Coder Next, GLM 5.3 Flash, DeepSeek V4 Flash).

GWDG Academic Cloud (kostenlos) →

Prompt-Baukasten – tragen Sie Ihre Regeln in Stichworten ein, dann kopieren Sie den fertigen Prompt:


        
      

      
Starker Carbon→Silicon-Zug
Bildfähige Modelle können ein Foto Ihres handgezeichneten Regelblatts einlesen. Laden Sie es hoch und lassen Sie die Regeln daraus ableiten.

      
Für Ambitionierte
Der Scaffold ist der empfohlene Standard – fortgeschrittene Teams dürfen aufwändigere Stacks nutzen, solange die Pflicht-Anforderungen erfüllt bleiben (siehe TECHNISCHE_ANFORDERUNGEN.md). Notieren Sie in der Reflexion das verwendete KI-Modell (optional: die Tokens).

      

    

  


  
  

    6Ändern & ansehen
Code einspielen, Tool neu laden▶
    

      
Den Code der KI bringen Sie so in Ihr Repository (ganz ohne Installation, direkt im Browser):

      
    
        
  • In Ihrem Repo auf index.html klicken → oben rechts das Stift-Symbol (Edit).
    • 
        
  • Alten Inhalt ersetzen, den neuen Code einfügen.
    • 
        
  • Unten „Commit changes" (= Speichern mit Versionseintrag).
    • 
        
  • Nach ~1 Minute Ihre Pages-URL neu laden – fertig.
    • 
      

      
Testen wie ein Profi
Rechtsklick → „Untersuchen" → Reiter Konsole. Rote Meldungen kopieren und der KI zeigen – sie behebt sie.

      

    

  


  
  

    7Abgabe
Was wann wohin▶
    

      
    
        
  • Offline-Artefakt (Fr, bis 20:00, auf OLAT): Foto/Scan Ihres handgezeichneten Regel-/Vokabularblatts als PDF – vor dem KI-Einsatz.
    • 
        
  • Montagsabgabe als ZIP auf OLAT (Mo, bis 12:00): eine Textdatei mit dem Repo-Link und die Reflexion zusammen in einer ZIP-Datei. Vorlagen liegen im Ordner vorlagen/.
    • 
        
  • Gemeinsame Präsentation am Dienstag, 12:00 (Zoom): Alle Ergebnisse werden vorgestellt, damit alle die Entwürfe sehen.
    • 
      

      
Erinnerung
Bewertet werden fünf Kriterien zu je 20 %: Konzept & Regelsystem, Carbon→Silicon-Kohärenz, Werkzeug (Funktion & Bedienbarkeit), Entwurfsqualität & eigenes Kriterium, Reflexion. Nicht der Code.

      

    

  


  
Glossar – die wichtigsten Begriffe

  
Repository („Repo")
Ihr Projektordner auf GitHub – alle Dateien plus ihr Änderungsverlauf.

  
Commit
Ein gespeicherter Stand mit kurzer Notiz, was Sie geändert haben. Wie ein Zwischenspeichern mit Logbuch.

  
Branch (main)
Ein Entwicklungsstrang. Sie arbeiten einfach im Hauptstrang main – mehr brauchen Sie nicht.

  
GitHub Pages
Verwandelt Ihre Dateien in eine echte, öffentliche Webseite unter einer eigenen Adresse.

  
index.html
Die Startdatei Ihrer Webseite – hier lebt Ihr Konfigurator.

  
three.js
Eine fertige Bibliothek, um 3D im Browser darzustellen. Sie ist bereits eingebunden.

  
CDN
Ein Web-Lieferdienst, über den Bibliotheken wie three.js geladen werden – nichts zu installieren.

  
.obj / .glTF
Dateiformate für 3D-Modelle. Über die Export-Buttons speichern Sie Ihr Ergebnis in diesen Formaten.

  
Konsole
Das Fehlerprotokoll des Browsers. Rote Zeilen zeigen, was im Code klemmt – ideal, um sie der KI zu zeigen.