Mit LLMs und Cursor ein Side Project fertigstellen

xguru · 2025-01-07T09:50:23+09:00

Seit etwa fünf Jahren in der Rolle eines Engineering Managers tätig, wodurch im Hauptjob deutlich seltener direkt Code geschrieben wird Auch außerhalb der Arbeit werden kontinuierlich persönliche Projekte umgesetzt, um das Programmiergefühl zu erhalten und die technischen Fähigkeiten zu schärfen Früher kamen Projekte wegen Zeitmangel oft nur langsam voran oder wurden vor der Fertigstellung abgebrochen 2024 hat sich jedoch die Gewohnheit entwickelt, benötigte Tools vergleichsweise schnell zu bauen, zu deployen und eine erste Version tatsächlich „fertigzustellen“ Beispiele für kürzlich abgeschlossene Side Projects jsonplayground.com : Ein JSON-Formatter, der zudem JQ-Funktionen direkt im Browser ausführt (mithilfe von WebAssembly), sodass keine Daten nach außen gesendet werden webtomarkdown.com : Konvertiert Dateien in Markdown oder extrahiert Teile von Websites als Markdown, damit sie als Kontext an ein LLM übergeben werden können Ein erster Entwurf zur Design-Verbesserung der Flugclub-Seite Evergreen Soaring Erstellung einer Chrome-Erweiterung, um die Beantwortung von Nachrichten an den Flugclub zu automatisieren fitinterval.com : Bietet eine Intervalltimer-Funktion für das Training Hintergrund zur Nutzung von LLMs und Cursor IDE LLMs steigern die Produktivität bei Side Projects erheblich Besonders mit Cursor IDE ist es bequem, LLMs für Coding-Aufgaben einzusetzen Dieser Beitrag teilt den gesamten Ablauf beim Erstellen eines neuen Projekts, damit Leser ihn selbst anwenden können Da LLMs nicht in allen Bereichen gleichermaßen nützlich sind, sollte man selbst ausprobieren, wofür sie sich am besten eignen Beispielprojekt: Website zur Gewohnheitsverfolgung Es besteht der Wunsch, die aktuell genutzte Habit-Tracking-App als Website nachzubauen Alle Daten werden lokal auf dem Gerät gespeichert, um die Privatsphäre der Nutzer zu berücksichtigen Beginn der Spezifikation Zuerst wird ChatGPT eine kurze Beschreibung gegeben, anschließend wird die Anwendungsspezifikation über Rückfragen weiter konkretisiert Sobald sie ausreichend konkret ist, wird darum gebeten, sie so aufzubereiten, dass „eine andere Person allein anhand dieser Spezifikation die gesamte App bauen könnte“ Die beabsichtigte Nutzung von TypeScript, React und Tailwind CSS wird ausdrücklich angegeben, damit eine technologiebezogene Spezifikation entsteht Die endgültige Spezifikation wird in SPEC.md gespeichert und im weiteren Entwicklungsprozess als Referenz genutzt Projekt-Bootstrap Mit Vite wird das Projektgerüst schnell aufgesetzt Die initiale Einrichtung erfolgt mit dem Befehl npm create vite@latest ., anschließend wird SPEC.md im Projektordner abgelegt In Composer von Cursor IDE wird die Agent-Funktion genutzt, um Tailwind-Konfiguration, Änderungen an Basisdateien usw. zu automatisieren So lassen sich ein erster Funktionsstand wie das geplante UX-Layout, die Nutzung von Local Storage und eine Markdown-Exportfunktion in kurzer Zeit umsetzen Iteratives Arbeiten in kleinen Einheiten Statt zu viele Funktionen auf einmal anzufordern, werden notwendige Verbesserungen aufgeteilt und das LLM schrittweise um Updates gebeten Zum Beispiel werden UX-Änderungen und Bugfixes klein getrennt und über den Chat- oder Composer-Modus angewiesen Bilder können an den Chat angehängt werden, um das gewünschte Design zu beschreiben und das LLM um eine Umsetzung im Code zu bitten Kontinuierliches Deployment einrichten Unter Bezug auf GitHub Actions wird eingestellt, dass bei Commits auf den main-Branch automatisch gebaut und anschließend auf GitHub Pages deployed wird In Cursor wird ein Beispiel für eine .yml-Datei aus einem anderen Repository als Link bereitgestellt, damit das LLM sich daran orientieren und die Deployment-Pipeline aufsetzen kann Zusammengefasste Tipps Projektüberblick und Details zunächst mit einem LLM strukturieren und anschließend für späteren Kontext speichern Tools oder Open-Source-Templates nutzen, um den Projekt-Bootstrap und die Struktur einzurichten Essenzielle Entwicklungstools und die Verzeichnisstruktur auf einmal bereitstellen und einem gut wartbaren Projektmuster folgen Mit Cursor Composer (Agent-Modus) das Projekt schnell starten Claude-3.5-Sonnet und o1 (Modell) gemischt einsetzen o1 für breit angelegte Entwurfsarbeit (ersten Draft) nutzen Etwa 80 % der konkreten Überarbeitungs- und Ergänzungsarbeit mit Claude-3.5-Sonnet erledigen Den passenden Modus wählen (Chat, Composer normal, Composer Agent) Chat: Wenn Änderungen an einer konkreten Stelle nötig sind und das Ergebnis jeder Änderung einzeln geprüft werden soll Composer (normal): Wenn Funktionen über mehrere Dateien hinweg ergänzt werden oder Multi-File-Änderungen nötig sind Composer (Agent): Noch nicht oft genutzt, aber hilfreich für automatisierte Aufgaben wie Befehle ausführen, Linting und wiederholte Korrekturen (wobei es besser ist, Arbeit weiterhin in kleine Einheiten aufzuteilen) Beim Bereitstellen von Kontext konkrete Dateien, Dokumente und Links mitgeben Falls nötig, im Chat-Modus den Zugriff auf die gesamte Codebasis erlauben, damit das LLM passende Stellen durchsuchen und kontextgerechte Vorschläge machen kann Projektdokumentation im Markdown-Format (SPEC.md usw.) speichern und als Kontext einbinden Die Datei .cursorrules im Projektordner verwenden Zum Beispiel anweisen, bestimmte Bibliotheken nicht zu verwenden oder stattdessen Tailwind bzw. die Komponentenbibliothek shadcn verbindlich zu nutzen Wenn solche Regeln vorab definiert und in Prompts berücksichtigt werden, lassen sich Ergebnisse bei den meisten Anfragen in die gewünschte Richtung lenken Mit einem ganzheitlichen Verständnis des Codes arbeiten Codequalität und Struktur beibehalten, damit das LLM nicht in Situationen gerät, in denen es nicht debuggen kann Die Arbeit weiterhin in kleine Einheiten aufteilen und bei Bedarf das LLM für Refactoring oder Modultrennung einsetzen Abschluss Wenn Projekte auf diese Weise schnell abgeschlossen und als deploybare Version bereitgestellt werden, ist ein Wiedereinstieg selbst nach einer Pause deutlich einfacher Die Gewohnheit, im Kleinen fertigzustellen, hilft dabei, Schwung zu behalten, und sorgt für Motivation, weil kleine Erfolge schnell sichtbar werden

(zohaib.me)

66 Punkte von xguru 2025-01-07 | 3 Kommentare | Auf WhatsApp teilen

Seit etwa fünf Jahren in der Rolle eines Engineering Managers tätig, wodurch im Hauptjob deutlich seltener direkt Code geschrieben wird
Auch außerhalb der Arbeit werden kontinuierlich persönliche Projekte umgesetzt, um das Programmiergefühl zu erhalten und die technischen Fähigkeiten zu schärfen
Früher kamen Projekte wegen Zeitmangel oft nur langsam voran oder wurden vor der Fertigstellung abgebrochen
2024 hat sich jedoch die Gewohnheit entwickelt, benötigte Tools vergleichsweise schnell zu bauen, zu deployen und eine erste Version tatsächlich „fertigzustellen“

Beispiele für kürzlich abgeschlossene Side Projects

jsonplayground.com : Ein JSON-Formatter, der zudem JQ-Funktionen direkt im Browser ausführt (mithilfe von WebAssembly), sodass keine Daten nach außen gesendet werden
webtomarkdown.com : Konvertiert Dateien in Markdown oder extrahiert Teile von Websites als Markdown, damit sie als Kontext an ein LLM übergeben werden können
Ein erster Entwurf zur Design-Verbesserung der Flugclub-Seite Evergreen Soaring
Erstellung einer Chrome-Erweiterung, um die Beantwortung von Nachrichten an den Flugclub zu automatisieren
fitinterval.com : Bietet eine Intervalltimer-Funktion für das Training

Hintergrund zur Nutzung von LLMs und Cursor IDE

LLMs steigern die Produktivität bei Side Projects erheblich
Besonders mit Cursor IDE ist es bequem, LLMs für Coding-Aufgaben einzusetzen
Dieser Beitrag teilt den gesamten Ablauf beim Erstellen eines neuen Projekts, damit Leser ihn selbst anwenden können
Da LLMs nicht in allen Bereichen gleichermaßen nützlich sind, sollte man selbst ausprobieren, wofür sie sich am besten eignen

Beispielprojekt: Website zur Gewohnheitsverfolgung

Es besteht der Wunsch, die aktuell genutzte Habit-Tracking-App als Website nachzubauen
Alle Daten werden lokal auf dem Gerät gespeichert, um die Privatsphäre der Nutzer zu berücksichtigen

Beginn der Spezifikation

Zuerst wird ChatGPT eine kurze Beschreibung gegeben, anschließend wird die Anwendungsspezifikation über Rückfragen weiter konkretisiert
Sobald sie ausreichend konkret ist, wird darum gebeten, sie so aufzubereiten, dass „eine andere Person allein anhand dieser Spezifikation die gesamte App bauen könnte“
Die beabsichtigte Nutzung von TypeScript, React und Tailwind CSS wird ausdrücklich angegeben, damit eine technologiebezogene Spezifikation entsteht
Die endgültige Spezifikation wird in SPEC.md gespeichert und im weiteren Entwicklungsprozess als Referenz genutzt

Projekt-Bootstrap

Mit Vite wird das Projektgerüst schnell aufgesetzt
Die initiale Einrichtung erfolgt mit dem Befehl npm create vite@latest ., anschließend wird SPEC.md im Projektordner abgelegt
In Composer von Cursor IDE wird die Agent-Funktion genutzt, um Tailwind-Konfiguration, Änderungen an Basisdateien usw. zu automatisieren
So lassen sich ein erster Funktionsstand wie das geplante UX-Layout, die Nutzung von Local Storage und eine Markdown-Exportfunktion in kurzer Zeit umsetzen

Iteratives Arbeiten in kleinen Einheiten

Statt zu viele Funktionen auf einmal anzufordern, werden notwendige Verbesserungen aufgeteilt und das LLM schrittweise um Updates gebeten
Zum Beispiel werden UX-Änderungen und Bugfixes klein getrennt und über den Chat- oder Composer-Modus angewiesen
Bilder können an den Chat angehängt werden, um das gewünschte Design zu beschreiben und das LLM um eine Umsetzung im Code zu bitten

Kontinuierliches Deployment einrichten

Unter Bezug auf GitHub Actions wird eingestellt, dass bei Commits auf den main-Branch automatisch gebaut und anschließend auf GitHub Pages deployed wird
In Cursor wird ein Beispiel für eine .yml-Datei aus einem anderen Repository als Link bereitgestellt, damit das LLM sich daran orientieren und die Deployment-Pipeline aufsetzen kann

Zusammengefasste Tipps

Projektüberblick und Details zunächst mit einem LLM strukturieren und anschließend für späteren Kontext speichern
Tools oder Open-Source-Templates nutzen, um den Projekt-Bootstrap und die Struktur einzurichten
- Essenzielle Entwicklungstools und die Verzeichnisstruktur auf einmal bereitstellen und einem gut wartbaren Projektmuster folgen
Mit Cursor Composer (Agent-Modus) das Projekt schnell starten
Claude-3.5-Sonnet und o1 (Modell) gemischt einsetzen
- o1 für breit angelegte Entwurfsarbeit (ersten Draft) nutzen
- Etwa 80 % der konkreten Überarbeitungs- und Ergänzungsarbeit mit Claude-3.5-Sonnet erledigen
Den passenden Modus wählen (Chat, Composer normal, Composer Agent)
- Chat: Wenn Änderungen an einer konkreten Stelle nötig sind und das Ergebnis jeder Änderung einzeln geprüft werden soll
- Composer (normal): Wenn Funktionen über mehrere Dateien hinweg ergänzt werden oder Multi-File-Änderungen nötig sind
- Composer (Agent): Noch nicht oft genutzt, aber hilfreich für automatisierte Aufgaben wie Befehle ausführen, Linting und wiederholte Korrekturen (wobei es besser ist, Arbeit weiterhin in kleine Einheiten aufzuteilen)
Beim Bereitstellen von Kontext konkrete Dateien, Dokumente und Links mitgeben
- Falls nötig, im Chat-Modus den Zugriff auf die gesamte Codebasis erlauben, damit das LLM passende Stellen durchsuchen und kontextgerechte Vorschläge machen kann
Projektdokumentation im Markdown-Format (SPEC.md usw.) speichern und als Kontext einbinden
Die Datei .cursorrules im Projektordner verwenden
- Zum Beispiel anweisen, bestimmte Bibliotheken nicht zu verwenden oder stattdessen Tailwind bzw. die Komponentenbibliothek shadcn verbindlich zu nutzen
- Wenn solche Regeln vorab definiert und in Prompts berücksichtigt werden, lassen sich Ergebnisse bei den meisten Anfragen in die gewünschte Richtung lenken
Mit einem ganzheitlichen Verständnis des Codes arbeiten
- Codequalität und Struktur beibehalten, damit das LLM nicht in Situationen gerät, in denen es nicht debuggen kann
- Die Arbeit weiterhin in kleine Einheiten aufteilen und bei Bedarf das LLM für Refactoring oder Modultrennung einsetzen

Abschluss

Wenn Projekte auf diese Weise schnell abgeschlossen und als deploybare Version bereitgestellt werden, ist ein Wiedereinstieg selbst nach einer Pause deutlich einfacher
Die Gewohnheit, im Kleinen fertigzustellen, hilft dabei, Schwung zu behalten, und sorgt für Motivation, weil kleine Erfolge schnell sichtbar werden

3 Kommentare

fbtmdxor 2025-01-08

Vielen Dank für die nützlichen Informationen!

ragingwind 2025-01-08

Die Versuche sehen sich alle ziemlich ähnlich.

netcleaner 2025-01-07

Ich habe vor Kurzem mit einer ähnlichen Methode wie oben ein kleines Projekt mit Cursor und einem LLM gebaut und war dabei enorm produktiv.
Ich habe mit dem LLM eine SPEC oder PRD erstellt, sie in Cursor als Kontext eingebunden, dann mit cursorrules Regeln für die zu verwendenden Technologien festgelegt und anschließend über Composer die Tasks einzeln ausführen lassen — so entstand konsistent guter Code.