Cline-Tutorial für Einsteiger: Installation, erste Aufgabe, Plan/Act, Rules & MCP
Ein Schritt-für-Schritt-Cline-Tutorial mit 15 geprüften Screenshots: die VS-Code-Erweiterung installieren, mit einem kostenlosen Modell eine echte App bauen und dann Plan- und Act-Modi, Rules und MCP-Server meistern.
Kurz zusammengefasst
- Cline ist ein freier Open-Source-KI-Coding-Agent in VS Code — über den Extensions Marketplace installieren, mit Google oder GitHub anmelden und ohne API-Key loslegen.
- Die Stufe „Absolutely Free“ nutzt gehostete Modelle wie DeepSeek V4 Flash (1M Kontext) und GLM-5.3-Flash; dieser Walkthrough liefert in 15 Schritten eine funktionierende BMI-Rechner-App.
- Der Plan-Modus plant mit einem Reasoning-Modell, der Act-Modus programmiert mit einem schnellen Modell — die komplette Plan-Analyse der Demo kostete nur 0,0145 $.
- Weiter geht's mit eigenem Gemini-Key, Global- und Workspace-Rules sowie MCP-Servern wie GitHub und Context7 — die drei Säulen des idealen Cline-Setups.
I Found 2 Ways to Use Cline for FREE (Best Free AI Coding Agent)
Walkthrough-Video:HMA WebCode5:26
Ideal Setup for Cline
Faktenquelle:Cline3:47
Die Walkthrough-Bilder stammen aus der Free-Setup-Demo von HMA WebCode; die Plan/Act-Einstellungen, Rules- und MCP-Marketplace-Bilder stammen von den offiziellen Cline-Kanal-Kurzvideos, die auch die Faktenquelle für Modusverhalten, Rule-Geltungsbereich und das Drei-Säulen-Setup sind.
Screenshots gehören den jeweiligen Kanälen und werden mit Quellenangabe und Deep-Links verwendet; alle Schrittbeschreibungen sind eigene Texte.
Der Cline-Walkthrough in 15 Schritten
Cline installieren und den Gratis-Tarif freischalten
- 1
Die Cline-Erweiterung in VS Code installieren
Öffnen Sie in VS Code die Extensions-Ansicht, suchen Sie nach Cline und klicken Sie beim Eintrag des autonomen Coding-Agents von Cline Bot auf Install. Danach erscheint das Cline-Robotersymbol in der Aktivitätsleiste — ein Klick öffnet den Agent-Panel neben dem Editor.
Der Cline-Eintrag im VS-Code-Extensions-Marketplace, bereit zur Installation.Video bei 0:24 - 2
Festlegen, wie Sie Cline nutzen möchten
Beim ersten Öffnen fragt Cline, wie Sie es nutzen wollen, und bietet vier Wege: Absolutely Free (gehostete Gratis-Modelle), ClinePlans (Abo für Open-Weight-Modelle), Frontier Model (Abrechnung über Cline) und Bring my own API key. Einsteiger starten mit Absolutely Free — ohne API-Key und ohne Kreditkarte.
Clines Erststart-Bildschirm mit den vier Einrichtungsoptionen.Video bei 0:34 - 3
Anmelden und im Gratis-Tarif landen
Wählen Sie Absolutely Free, klicken Sie auf Log in to Cline und melden Sie sich mit Google oder GitHub an — dauert etwa zehn Sekunden und verlangt keine Zahlungsart. Sie landen auf dem Provider-Bildschirm mit Cline Usage-Billing, das die Gratis-Modelle bereitstellt.
Nach der Anmeldung zeigt Cline den Usage-Billing-Provider mit seinen Modell-Tabs.Video bei 1:46 - 4
Gratis-Modell und Reasoning Effort wählen
Öffnen Sie die Modellauswahl und wechseln Sie auf den Free-Tab: DeepSeek V4 Flash (1M Token Kontext), GLM-5.3-Flash, LongCat 2.0 und Laguna S 2.1 tragen alle das FREE-Tag. Nehmen Sie DeepSeek V4 Flash für schnelle Arbeit über mehrere Dateien und lassen Sie Reasoning Effort auf Medium — Low ist schneller, High denkt tiefer, verbraucht aber mehr Tokens.
Die Modell-ID deepseek/deepseek-v4-flash ausgewählt, Reasoning Effort auf Medium.Video bei 2:12
Die erste Aufgabe von Anfang bis Ende
- 5
Das leere Aufgabenfeld öffnen
Legen Sie in VS Code einen Projektordner an oder öffnen Sie einen, und klicken Sie auf das Cline-Symbol. Das Panel begrüßt Sie mit einer einfachen Frage — diese Eingabe ist der Startpunkt jeder Aufgabe. Die Auto-approve-Zeile und der Plan/Act-Schalter sitzen unten im Panel.
Clines Aufgabenpanel bereit für den ersten Prompt, mit Plan/Act in der Ecke.Video bei 2:36 - 6
Die erste Aufgabe senden
Schreiben Sie ein konkretes Ziel ins Aufgabenfeld, zum Beispiel: eine moderne BMI-Rechner-Web-App mit HTML, CSS und JavaScript, bei der der Nutzer Größe in Zentimetern und Gewicht in Kilogramm eingibt und die App den BMI mit Kategorie-Label zeigt. Konkrete Angaben zu Ein- und Ausgabe und Design liefern deutlich bessere Ergebnisse als Einzeiler.
Der BMI-Rechner-Prompt in Clines Aufgabenfeld.Video bei 2:58 - 7
Jede Aktion freigeben — oder automatisch
Cline arbeitet Schritt für Schritt: Es will einen Befehl ausführen, eine Datei anlegen oder eine weitere bearbeiten und zeigt vor jeder Änderung einen Diff. Geben Sie einzelne Aktionen frei oder aktivieren Sie Auto-approve für Read, Edit und Commands, damit es die Checkliste selbst abarbeitet — Checkpoints machen jeden Schritt sowieso rückgängig machbar.
Cline bittet um Freigabe für index.html und zeigt den CSS-Diff.Video bei 3:06 - 8
Die fertige App öffnen
Nach wenigen Minuten ist die Aufgabe mit einer Zusammenfassung und einem BMI-Calculation-Checkpoint-Eintrag fertig. Öffnen Sie die erzeugte index.html mit Live Server oder einem beliebigen statischen Server: 175 Zentimeter und 70 Kilogramm ergeben einen BMI von 22,9 — Normal. Eine komplette, funktionierende App ohne eine einzige selbst geschriebene Zeile.
Der fertige BMI-Rechner im Browser neben Clines Zusammenfassung in VS Code.Video bei 3:17
Plan- und Act-Modus ohne verschwendete Tokens
- 9
Plan- und Act-Modus kennenlernen
Der Schalter unten im Panel wechselt zwischen Plan und Act. Im Plan-Modus untersucht Cline nur: Es liest Dateien, stellt Fragen und schlägt einen Umsetzungsplan vor. Im Einstellungsdialog gibt es gleichnamige Tabs, damit Sie jedem Modus ein eigenes Modell zuweisen können — ein starkes Reasoning-Modell für Plan, ein schnelles Coding-Modell für Act.
Cline-Einstellungen mit den Tabs Plan Mode und Act Mode für modellspezifische Zuweisung.Video bei 0:48 - 10
Plan-Modus zuerst denken lassen
Reasoning-Modelle glänzen im Plan-Modus, denn eine Aufgabe zu durchdringen ist Analyse, keine Tipparbeit. Da noch nichts geschrieben ist, ist die komplette Untersuchung günstig — die DRY-Analyse der Demo kostete nur 0,0145 $. Beantworten Sie Clines Fragen während der Planung; jede Korrektur hier erspart späteres Umschreiben.
Eine Plan-Mode-Aufgabenkarte mit Analyse, Token-Zählern und 0,0145 $ API-Kosten.Video bei 1:10 - 11
In den Act-Modus wechseln und coden
Sobald der Plan passt, auf Act schalten — der Plan ist festgelegt und Cline bearbeitet Dateien. Coding-Modelle sind hierbei schneller und günstiger, genau davon profitiert die Trennung der Modi. Auf dem Fortsetzungsbildschirm zeigt Cline den Shortcut: Win+Shift+A wechselt zwischen den Modi.
Einstellungen mit ausgewähltem Act-Mode-Tab und einem Coding-Modell für die Ausführung.Video bei 1:28
Eigener Key, Rules und der MCP-Marketplace
- 12
Oder den eigenen Gratis-Key nutzen
Lieber eigenes Kontingent statt Clines geteiltem Gratis-Pool? Wählen Sie Bring my own API key, dann Google Gemini, und klicken Sie in Google AI Studio auf Get API key — der Gratis-Tarif braucht nur ein Google-Konto. Fügen Sie den Key in Clines API-Key-Feld ein, wählen Sie ein Gemini-Modell und speichern Sie — schon läuft alles über Ihr eigenes Kontingent.
Der Create-API-Key-Dialog in Google AI Studio erzeugt den Gratis-Gemini-Key.Video bei 3:54 - 13
Cline Ihre Standards beibringen: Rules
Rules sind dauerhafte Anweisungen, die Cline bei jeder Aufgabe liest. Öffnen Sie den Rules-Tab in den Panel-Einstellungen: Global Rules gelten für jedes Projekt auf Ihrem Rechner, Workspace Rules liegen als .clinerules-Dateien im aktuellen Repository und lassen sich committen und teilen. Ideal für Coding-Prinzipien, Sicherheitspraktiken, Dokumentationsrichtlinien und Stil.
Der Rules-Tab in Clines Einstellungen mit Global Rules und Workspace Rules.Video bei 1:06 - 14
Rules schreiben, die ein Modell befolgt
Vage Rules kontern — „optimiere Code, wo möglich“ gibt Cline Spielraum, Sie zu ignorieren. Schreiben Sie messbare Auslöser: Code optimieren, wenn Unit-Tests länger als 100 Millisekunden dauern; SOLID-Prinzipien bei Klassen nutzen; Inline-Kommentare ergänzen, wenn der Code Annahmen trifft. Pflegen Sie Rules als lebendiges Dokument und entfernen Sie Widersprüche.
Eine Rule-Datei mit drei konkreten, messbaren Regeln für jede Aufgabe.Video bei 1:45 - 15
Cline mit MCP-Servern erweitern
Das MCP-Marketplace-Symbol im Panel öffnet Server mit einem Klick, die Cline neue Fähigkeiten geben: GitHub für Repository-Operationen, Context7 für aktuelle Bibliotheksdokumentation, Perplexity und Sequential Thinking für Recherche und Planung. Server installieren, Tools genehmigen — und Cline ruft sie mitten in der Aufgabe auf. Die dritte Säule des idealen Setups.
Clines MCP-Servers-Marketplace mit der GitHub-Server-Karte und Install-Button.Video bei 2:44