TuBrief
구독 채널
비디오
커뮤니티

So machst du aus dem Code von Claude einen echten Dienst

TuBrief 편집팀
2026년 6월 24일
0
Computing/Software

원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.

Deutsch한국어EnglishEspañol中文العربيةहिन्दीPortuguêsРусскийBahasa IndonesiaFrançais日本語

관련 영상

Unglaubliche Claude-Design-Skills für beeindruckende Websites14:14

Unglaubliche Claude-Design-Skills für beeindruckende Websites

AI LABS

커뮤니티의 다른 글

사내 시스템에 llm api 붙일 때 마주하는 현실적인 한계와 대응법

2026년 9월 13일

레거시 백엔드에 GPT-6 Astra 붙일 때 예산 승인과 보안 통과를 먼저 끝내는 법이 있습니다

2026년 9월 13일

에이전트끼리 대화하다 6천만 원 청구서가 나오는 이유

2026년 9월 13일

사내 RAG 벡터 검색에 Okta 권한 필터를 직접 거는 방법

2026년 9월 13일

브라우저 에이전트에게 내 구글 계정을 통째로 넘기면 안 되는 이유

2026년 9월 12일

Apple Won the AI Race

2026년 9월 12일

댓글 (0)

Log in to leave a comment

아직 작성된 글이 없습니다

© 2026 . All rights reserved.

TuBrief
구독 채널
비디오
커뮤니티
로그인

So machst du aus dem Code von Claude einen echten Dienst

Design-Fragmentierung verhindern

Die HTML-Datei, die Claude ausspuckt, sieht anfangs ganz gut aus. Aber sobald es mehr als 3 Seiten sind, wird die Bearbeitung zum Albtraum. Es ist Zeitverschwendung, 10 Dateien öffnen zu müssen, nur um die Schriftgröße einmal zu ändern. Trenne den Code.

  1. Erstelle einen Projektordner. Teile CSS in /assets/css, Bilder in /assets/img und Layouts in /components auf.
  2. Verwende für Dateinamen nur Kleinbuchstaben und Bindestriche, wie bei main-header.html. Das verringert die Wahrscheinlichkeit, dass Claude die Pfade verwechselt.
  3. Füge im oberen <head>-Bereich deines Haupt-HTMLs <link rel="stylesheet" href="/assets/css/global.css"> ein und verwalte die Styles zentral.

Auf diese Weise werden Änderungen sofort auf alle Seiten angewendet, selbst wenn du nur den Header bearbeitest. Du musst nicht jedes Mal Zeit damit verschwenden, jede Datei einzeln zu ändern.

Farbpalette mit CSS-Variablen fixieren

Gib Farbcodes nicht direkt in jeder Komponente ein. Wenn du die Button-Farbe ändern willst, müsstest du sonst tausende Zeilen durchsuchen. Verwende stattdessen CSS-Variablen.

  1. Öffne die Datei /assets/css/global.css.
  2. Definiere die 3 Hauptfarben, z. B. :root { --main-color: #000000; --sub-color: #ffffff; }.
  3. Verwende sie beim Schreiben von Styles so: background-color: var(--main-color);.

Wenn sich die Markenfarbe später ändert, bearbeite einfach eine Datei für 3 Sekunden. Die Farbe der Buttons auf allen Seiten ändert sich gleichzeitig. Das ist wesentlich effizienter, als das Design jedes Mal manuell anzupassen.

Sofortige Überprüfung in der lokalen Umgebung

Wenn du ständig den Code änderst, zum Browser zurückkehrst und die Seite neu lädst, verlierst du den Fokus. Installiere die Live Server-Erweiterung für VS Code.

  1. Installiere Live Server in VS Code und klicke unten auf die Schaltfläche "Go Live".
  2. Öffne die Seite im Browser, klicke mit der rechten Maustaste und wähle "Untersuchen", um die Entwicklertools zu öffnen.
  3. Ändere Abstände oder Schriftgrößen direkt im Tab "Elements". Übernimm die angepassten Werte einfach direkt in deine CSS-Datei.

Sieh Änderungen in Echtzeit, ohne ständig neu laden zu müssen. Die Zeit für Design-Anpassungen halbiert sich dadurch.

Claude Vorgaben erzwingen

Claude schreibt den Code jedes Mal anders, wenn man ihn darum bittet. Lege von Anfang an Regeln fest und kommuniziere diese. Erstelle eine Datei namens CLAUDE.md im Stammverzeichnis deines Projektordners.

  1. Schreibe in die CLAUDE.md Regeln für CSS-Variablen und die zu verwendende Ordnerstruktur.
  2. Definiere häufig verwendete Buttons oder Karten-Formate im XML-Format (z. B. <code>).
  3. Wenn du einen neuen Screen von Claude anforderst, füge einfach den Satz hinzu: "Befolge beim Schreiben die Regeln aus der CLAUDE.md".

Das verhindert erheblich, dass die KI den Code willkürlich verkompliziert.

Automatische Bereitstellung mit Vercel

Mach dir keine Gedanken über Serverkonfigurationen oder komplexe Umgebungen. Mit Vercel funktioniert die Website sofort, sobald du den Code hochlädst.

  1. Pushe deinen Code zu GitHub.
  2. Verbinde dein GitHub-Konto auf der Vercel-Website und erstelle ein Projekt.
  3. Jedes Mal, wenn du danach Code zu GitHub hochlädst, aktualisiert Vercel die Website innerhalb von 45 Sekunden.

Du musst den Server nicht selbst verwalten. Die Domain wird automatisch generiert, und wenn ein Problem auftritt, kannst du jederzeit auf eine frühere Version zurückgreifen. Lade deinen Code jetzt direkt hoch.