Voyage 5 · the newcomerVoyage 5 · der Neuling

"I have an idea for a web app — what should I do?"

„Ich habe eine Idee für eine Web-App — was soll ich tun?"

You are not a developer, and you do not need to become one today. You need three things set up — two accounts and one app — one honest habit, and a first hour that ends with something you can look at.

Du bist kein Entwickler, und du musst heute auch keiner werden. Du brauchst drei Dinge eingerichtet — zwei Konten und eine App — eine ehrliche Gewohnheit und eine erste Stunde, an deren Ende etwas steht, das du dir anschauen kannst.

·

Who sails here

Wer hier segelt

You have an idea. That is the whole entry requirement, and it is lower than it sounds. You do not need to know who exactly would use it, what they would see, or what should happen when they click — not even that. You will be guided there: one plain question at a time, then something to look at, then the question of whether it is right. Half-formed answers are enough to begin with, and "I don't know yet" is a legitimate one — it is an answer the work is designed to produce, not a ticket you pay at the door.

Du hast eine Idee. Das ist die ganze Eintrittsbedingung, und sie liegt niedriger, als es klingt. Du musst nicht wissen, wer es genau benutzen würde, was diese Person sehen würde oder was beim Klicken passieren soll — nicht einmal das. Du wirst dorthin geführt: eine einfache Frage nach der anderen, dann etwas zum Anschauen, dann die Frage, ob es stimmt. Halbfertige Antworten reichen für den Anfang, und „weiß ich noch nicht" ist eine legitime — sie ist ein Ergebnis der Arbeit, kein Eintritts­geld, das du vorher zahlst.

What you do not have is a toolbelt: no editor, no terminal, no idea what "deploy" means. That is the half that can be automated. Looking at what comes back and saying whether it matches what you meant is the half that cannot — and that half you already have.

Was du nicht hast, ist ein Werkzeuggürtel: kein Editor, kein Terminal, keine Ahnung, was „deploy" heißt. Das ist die Hälfte, die sich automatisieren lässt. Anzuschauen, was zurückkommt, und zu sagen, ob es dem entspricht, was du gemeint hast — das ist die Hälfte, die es nicht kann. Und die hast du schon.

And here is the shape of the whole thing, said once so the rest feels smaller: once those two accounts and Claude Code exist, almost everything else is done for you — from plain words. Giving your idea a home, connecting it to GitHub, bringing the kit aboard, building the first screen: you ask, in a sentence, and your co-worker does the mechanical part. You never open a terminal and never touch version control by hand. What stays yours is the part no tool can take: saying what you want, looking at what comes back and saying "that's not what I meant," and asking to save the good moments. The toolbelt is automated; the judgement is yours.

Und so sieht das Ganze aus, einmal gesagt, damit der Rest kleiner wirkt: Sobald diese zwei Konten und Claude Code da sind, wird fast alles Weitere für dich erledigt — aus einfachen Worten. Deiner Idee ein Zuhause geben, es mit GitHub verbinden, das Kit an Bord holen, den ersten Screen bauen: du bittest darum, in einem Satz, und dein Mitarbeiter erledigt den mechanischen Teil. Du öffnest nie ein Terminal und fasst die Versionsverwaltung nie von Hand an. Deins bleibt der Teil, den kein Werkzeug abnehmen kann: sagen, was du willst, anschauen, was zurückkommt, und „das habe ich nicht gemeint" sagen, und die guten Momente sichern. Der Werkzeuggürtel ist automatisiert, das Urteil ist deins.

One belief sits underneath everything on this page, and it is worth saying before day one: complex work with AI should feel like navigation on a readable map, not guesswork across disconnected tools. You will never be asked to hold the whole voyage in your head. The map holds it; you read it. And where this page cannot avoid a technical word, the small glossary at the end explains it in plain language.

Unter allem auf dieser Seite liegt eine Überzeugung, und sie gehört vor den ersten Tag: komplexe Arbeit mit KI soll sich anfühlen wie Navigation auf einer lesbaren Karte, nicht wie Rätselraten über getrennte Werkzeuge hinweg. Niemand verlangt, dass du die ganze Reise im Kopf behältst. Die Karte hält sie; du liest sie. Und wo diese Seite ein technisches Wort nicht vermeiden kann, erklärt es das kleine Glossar am Ende in einfacher Sprache.

1

Day one: three things to set up — and nothing more

Tag eins: drei Dinge zum Einrichten — und nicht mehr

Set up, in this order:

Richte ein, in dieser Reihenfolge:

  • A Claude account (claude.ai) — the Pro plan is the sensible start: it carries the desktop app, Claude Code, and enough capacity to actually work. Signing up is an email address and a confirmation, nothing more. This is your co-worker.
  • A GitHub account (github.com) — the free plan is fine, and the sign-up is the same three minutes: email, password, confirm. This is not "for programmers": it is the safe, versioned home your idea lives in, so no conversation, crash, or bad afternoon can ever lose your work.
  • Then the app, not a third account — install the Claude desktop app and sign in with the account you just made; Claude Code lives inside it. This is where you talk, and where the work lands as real files. For visual work there is also Claude Design in the browser — same account, nothing new to register.
  • Ein Claude-Konto (claude.ai) — der Pro-Plan ist der vernünftige Start: er bringt die Desktop-App, Claude Code und genug Kapazität, um wirklich zu arbeiten. Das Anmelden ist eine E-Mail-Adresse und eine Bestätigung, mehr nicht. Das ist dein Mitarbeiter.
  • Ein GitHub-Konto (github.com) — der kostenlose Plan reicht, und die Anmeldung sind dieselben drei Minuten: E-Mail, Passwort, bestätigen. Das ist nichts „für Programmierer": es ist das sichere, versionierte Zuhause deiner Idee — kein Gespräch, kein Absturz, kein schlechter Nachmittag kann deine Arbeit je verlieren.
  • Dann die App, kein drittes Konto — installiere die Claude-Desktop-App und melde dich mit dem eben angelegten Konto an; Claude Code lebt darin. Hier redest du, und hier landet die Arbeit als echte Dateien. Für visuelle Arbeit gibt es zusätzlich Claude Design im Browser — gleiches Konto, nichts Neues zu registrieren.

Deliberately NOT on the day-one list: an editor like VS Code. It is free, it is excellent, and you will likely want it in week two or three — the moment you catch yourself wanting to read the files yourself. Starting with it on day one just adds a cockpit before you know what the levers do. Add tools when you feel their absence, not before.

Absichtlich NICHT auf der Tag-eins-Liste: ein Editor wie VS Code. Er ist kostenlos, er ist ausgezeichnet, und du wirst ihn vermutlich in Woche zwei oder drei wollen — in dem Moment, in dem du dich dabei ertappst, die Dateien selbst lesen zu wollen. Am ersten Tag damit zu starten stellt nur ein Cockpit hin, bevor du weißt, was die Hebel tun. Nimm Werkzeug dazu, wenn du sein Fehlen spürst — nicht vorher.

2

Your idea gets a home before it gets features

Deine Idee bekommt ein Zuhause, bevor sie Features bekommt

Before anything gets built — and before the kit is even aboard — your idea needs a home. Your first request is not "build my app". It is: "Create a repository for my idea, connect it to my GitHub account, and write my idea into it — in my own words." That single step changes everything after it: every version of every file is kept, every change can be undone, and your idea exists somewhere sturdier than a chat window.

Bevor irgendetwas gebaut wird — und bevor das Kit überhaupt an Bord ist — braucht deine Idee ein Zuhause. Deine erste Bitte ist nicht „bau meine App". Sie lautet: „Lege ein Repository für meine Idee an, verbinde es mit meinem GitHub-Konto und schreibe meine Idee hinein — in meinen eigenen Worten." Dieser eine Schritt verändert alles danach: jede Version jeder Datei bleibt erhalten, jede Änderung lässt sich zurücknehmen, und deine Idee existiert an einem Ort, der stabiler ist als ein Chat-Fenster.

your idea, your words a repository every version kept features, later
Home first, features second — the order that makes everything undoable.
Erst das Zuhause, dann die Features — die Reihenfolge, die alles rücknehmbar macht.

3

The kit comes aboard: learned into your repo

Das Kit kommt an Bord: in dein Repo gelernt

Now your co-worker gets its education — and that, too, is one sentence you say, not a skill you learn: "Learn the sp-ai-kit into this repository." That is the way of working — the map, the tour, the working rhythm. What actually happens when you say it: your AI fetches the kit from GitHub, copies it into your repository, and keeps a record of where every piece came from — so your project owns its own copy and nothing depends on staying online. From then on, bringing in anything else is the same plain sentence: "learn X."

Jetzt bekommt dein Mitarbeiter seine Ausbildung — und auch das ist ein Satz, den du sagst, keine Fähigkeit, die du lernst: „Lerne das sp-ai-kit in dieses Repository." Das ist die Arbeitsweise — die Karte, die Tour, der Arbeitsrhythmus. Was tatsächlich passiert, wenn du das sagst: deine KI holt das Kit von GitHub, kopiert es in dein Repository und führt Buch darüber, woher jedes Stück stammt — so besitzt dein Projekt seine eigene Kopie, und nichts hängt davon ab, online zu bleiben. Von da an ist alles Weitere derselbe einfache Satz: „lerne X."

your repo the home learn sp-ai-kit the way of working your copy provenance kept
One spoken sentence learns the way of working into your repo: your AI fetches it, copies it in, and remembers where it came from.
Ein gesprochener Satz lernt die Arbeitsweise in dein Repo: deine KI holt sie, kopiert sie hinein und merkt sich, woher sie stammt.

Why bring it aboard before building anything? Because everything on the rest of this page — the named actions that state their terms, the bell, the tour — lives inside what was just learned. An unlearned AI improvises; a learned one navigates.

Warum es an Bord holen, bevor irgendetwas gebaut wird? Weil alles Weitere auf dieser Seite — die benannten Aktionen, die ihre Bedingungen nennen, die Glocke, die Tour — in dem existiert, was gerade gelernt wurde. Eine ungelernte KI improvisiert; eine gelernte navigiert.

With the kit aboard, you could already start building — describe a screen, look at it, commit; that is the very next section. But there is a more comfortable way, and it is worth knowing it exists. The assistants live in a second place, sp-it-domain, and you bring them in with the same one sentence — "learn sp-it-domain." An assistant gives your idea a working surface: you describe it once as a model, and the screens, the storage, the steps are produced from that — with worked examples to start from — instead of you shaping every piece by hand. The kit alone already works; the assistants make it comfortable.

Mit dem Kit an Bord könntest du schon anfangen zu bauen — einen Screen beschreiben, ihn anschauen, committen; das ist gleich der nächste Abschnitt. Aber es gibt einen bequemeren Weg, und es lohnt sich zu wissen, dass es ihn gibt. Die Assistenten wohnen an einem zweiten Ort, sp-it-domain, und du holst sie mit demselben einen Satz — „lerne sp-it-domain." Ein Assistent gibt deiner Idee eine Arbeitsfläche: du beschreibst sie einmal als Modell, und die Screens, die Speicherung, die Schritte werden daraus erzeugt — mit ausgearbeiteten Beispielen zum Loslegen — statt dass du jedes Stück von Hand formst. Das Kit allein funktioniert schon; die Assistenten machen es bequem.

One practical note, so nothing ambushes you later. For the kit itself you install nothing beyond the app from day one. The assistants need exactly one thing: Node, version 24 or newer — a single install from nodejs.org. The database comes with it; there is nothing separate to install, nothing to compile, and no build step. Node installs the same way on Windows and on a Mac — one download from nodejs.org. Starting the assistant is one command: start-assistant.ps1 on Windows, or ./start-assistant.sh on a Mac or Linux. It creates its own storage file on the first run and opens in your browser.

Eine praktische Anmerkung, damit dich später nichts überfällt. Für das Kit selbst installierst du nichts über die App von Tag eins hinaus. Die Assistenten brauchen genau eine Sache: Node, Version 24 oder neuer — eine einzige Installation von nodejs.org. Die Datenbank bringt Node schon mit; es gibt nichts separat zu installieren, nichts zu kompilieren und keinen Build-Schritt. Node installiert sich unter Windows und auf dem Mac gleich — ein Download von nodejs.org. Den Assistenten startest du mit einem Befehl: start-assistant.ps1 unter Windows, oder ./start-assistant.sh auf dem Mac oder unter Linux. Er legt seine Speicherdatei beim ersten Start selbst an und öffnet sich in deinem Browser.

4

The first hour

Die erste Stunde

Describe one small piece — the smallest thing you could look at and judge: "the page where a visitor sees the offers", nothing more. Ask for it as something you can open and click. Then do the most valuable thing a non-developer can do: look at it and say "that's not what I meant" — early, cheaply, in your own words. Ask for a save ("commit this") at every point you would be sad to lose. That sentence and that habit are the whole method in miniature.

Beschreibe ein kleines Stück — das kleinste Ding, das du anschauen und beurteilen könntest: „die Seite, auf der ein Besucher die Angebote sieht", mehr nicht. Bitte darum, es als etwas zu bekommen, das du öffnen und anklicken kannst. Dann tu das Wertvollste, was jemand ohne Entwickler-Hintergrund tun kann: schau es an und sag „das habe ich nicht gemeint" — früh, günstig, in deinen eigenen Worten. Bitte an jedem Punkt, dessen Verlust dich traurig machen würde, um ein Sichern („commit das"). Dieser Satz und diese Gewohnheit sind die ganze Methode im Kleinen.

And a reassurance for everything after the first hour: you never memorize magic here. There are no incantations to learn, no secret phrasing that makes things work. Every action you can invoke tells you its intention, hints at what you should contribute, and says what it derives on its own — you read, you decide, you press. The context does the rest.

Und eine Beruhigung für alles nach der ersten Stunde: du lernst hier keine Zaubersprüche auswendig. Es gibt keine Beschwörungsformeln, keine geheime Formulierung, die Dinge zum Funktionieren bringt. Jede Aktion, die du auslösen kannst, nennt dir ihre Absicht, gibt dir einen Hinweis, was du beitragen solltest, und sagt, was sie selbst ableitet — du liest, du entscheidest, du drückst. Den Rest erledigt der Kontext.

So how do you actually drive the kit? Not by memorising commands. You say what you want in plain words, and the kit maps it onto one of its named actions. Worth trying once, early: ask it to analyse your idea. (In Claude Code that action is written /sp-analyze; other assistants spell it their own way — the action is the thing, not the spelling.) Watch what it does: it turns your loose description into a written problem statement inside your repository, and asks you about the parts you left open. And when you have no idea what you may ask for at all, there is a help screen — /sp-help — listing the available actions and what each one is for. Reading it once is the closest thing to a manual you will need.

Wie steuerst du das Kit nun tatsächlich? Nicht, indem du Befehle auswendig lernst. Du sagst in einfachen Worten, was du willst, und das Kit ordnet es einer seiner benannten Aktionen zu. Einmal früh auszuprobieren lohnt sich: bitte es, deine Idee zu analysieren. (In Claude Code schreibt sich diese Aktion /sp-analyze; andere Assistenten buchstabieren sie anders — die Aktion ist die Sache, nicht die Schreibweise.) Schau zu, was passiert: es macht aus deiner losen Beschreibung eine geschriebene Problemstellung in deinem Repository und fragt dich nach den Stellen, die du offen gelassen hast. Und wenn du gar nicht weißt, worum du überhaupt bitten kannst, gibt es einen Hilfe-Bildschirm — /sp-help — der die verfügbaren Aktionen auflistet und wofür jede da ist. Ihn einmal zu lesen ist das Nächste an einem Handbuch, das du brauchen wirst.

5

Habits that save you

Gewohnheiten, die dich retten

  • Everything in files. What lives only in a conversation is already half-lost. Ask for decisions, plans and descriptions to be written into the repository.
  • Commit early, commit often. Versions are your undo button for whole afternoons.
  • Ask for explanations in your words. "Explain what you just did as if I run a shop, not a server" is a completely legitimate request — and how you learn without a course.
  • Ask what is NOT done. An honest answer to that question is worth more than any demo. If a tool cannot name its gaps, that is the answer.
  • Alles in Dateien. Was nur in einem Gespräch lebt, ist schon halb verloren. Bitte darum, Entscheidungen, Pläne und Beschreibungen ins Repository zu schreiben.
  • Früh committen, oft committen. Versionen sind dein Rückgängig-Knopf für ganze Nachmittage.
  • Bitte um Erklärungen in deinen Worten. „Erklär mir, was du gerade getan hast, als würde ich einen Laden führen, keinen Server" ist eine völlig legitime Bitte — und die Art, wie du ohne Kurs lernst.
  • Frag, was NICHT fertig ist. Eine ehrliche Antwort auf diese Frage ist mehr wert als jede Demo. Wenn ein Werkzeug seine Lücken nicht nennen kann, ist das die Antwort.

One more, for the bad afternoon. There will be a moment when you feel lost — too many threads open, no memory of what was agreed. This place keeps a bell for exactly that moment. Ringing it adds no new instructions; it re-minds and re-focuses on what was agreed before the storm. It is the capstone of the principles page — the thing to reach for when you no longer know where you are.

Noch eine, für den schlechten Nachmittag. Es wird einen Moment geben, in dem du dich verloren fühlst — zu viele offene Fäden, keine Erinnerung, was vereinbart war. Dieser Ort hält für genau diesen Moment eine Glocke bereit. Sie zu läuten fügt keine neuen Anweisungen hinzu; es er-innert und re-fokussiert auf das, was vor dem Sturm vereinbart war. Sie ist der Schlussstein der Prinzipien-Seite — das, wonach du greifst, wenn du nicht mehr weißt, wo du bist.

6

When to add more tools

Wann mehr Werkzeug dazukommt

Signals that it is time, each with its remedy: you keep wanting to read the files yourself → install VS Code (free) and open your repository in it — Claude Code works right inside it. You want to shape screens visually → Claude Design in the browser. People should try your app from their own devices → ask for the simplest way to put it online, and let the answer be explained to you first. Every upgrade is a response to a felt limit — never homework.

Signale, dass es so weit ist, jedes mit seinem Mittel: du willst die Dateien immer wieder selbst lesen → installiere VS Code (kostenlos) und öffne dein Repository darin — Claude Code arbeitet direkt darin. Du willst Screens visuell gestalten → Claude Design im Browser. Andere sollen deine App von ihren eigenen Geräten ausprobieren → bitte um den einfachsten Weg, sie online zu stellen, und lass dir die Antwort erst erklären. Jedes Upgrade ist eine Antwort auf eine gespürte Grenze — nie eine Hausaufgabe.

7

A small glossary — the words this page could not avoid

Ein kleines Glossar — die Wörter, die diese Seite nicht vermeiden konnte

  • Repository — the versioned folder your project lives in. Think of it as a house with a complete photo album: every room, every day, since day one.
  • Commit — one saved snapshot in that album, with a short note on what changed. "Commit this" simply means "keep this state, so we can come back to it."
  • Clone / fetch — making a full local copy of a repository (or getting its latest state). Your AI does this for you; you just name the repository.
  • Version history — the album itself: the ordered list of all commits. It is why nothing here is ever truly lost.
  • Model — the one written description of what your app contains and does. Everything else — screens, storage, tests — is produced from it.
  • Prototype — a clickable early version of your idea, built to be judged and corrected, not to be perfect.
  • Assistant — the working surface of this estate: the place where your idea's steps, screens and actions live and run.
  • Deploy / online — moving your app from your machine to a place where other people can reach it with a normal link.
  • Repository — der versionierte Ordner, in dem dein Projekt lebt. Stell es dir vor wie ein Haus mit lückenlosem Fotoalbum: jeder Raum, jeder Tag, seit Tag eins.
  • Commit — ein gespeicherter Schnappschuss in diesem Album, mit einer kurzen Notiz, was sich geändert hat. „Commit das" heißt einfach: „behalte diesen Stand, damit wir zurückkönnen."
  • Clone / holen — eine vollständige lokale Kopie eines Repositories anlegen (oder seinen neuesten Stand holen). Deine KI erledigt das; du nennst nur das Repository.
  • Versionshistorie — das Album selbst: die geordnete Liste aller Commits. Sie ist der Grund, warum hier nie etwas wirklich verloren geht.
  • Modell — die eine geschriebene Beschreibung dessen, was deine App enthält und tut. Alles andere — Screens, Speicherung, Tests — wird daraus erzeugt.
  • Prototyp — eine anklickbare frühe Version deiner Idee, gebaut, um beurteilt und korrigiert zu werden, nicht um perfekt zu sein.
  • Assistent — die Arbeitsfläche dieses Bestands: der Ort, an dem die Schritte, Screens und Aktionen deiner Idee leben und laufen.
  • Deploy / online — deine App von deinem Rechner an einen Ort bringen, den andere über einen normalen Link erreichen.

Eight words is the whole entry fee. Everything else on this page is plain language on purpose — and where it is not, that is a defect worth reporting.

Acht Wörter sind der ganze Eintrittspreis. Alles andere auf dieser Seite ist mit Absicht einfache Sprache — und wo nicht, ist das ein Defekt, den du melden darfst.

8

Come aboard

Komm an Bord

When your idea has a home and a first clickable piece, there is a route through the rest of this estate. Take the guided tour first — nine stops that walk from the vision and the mission through the working rhythm called PICARD, the map, and the co-authoring deck — and then the voyages, one per traveller. Among those, the customer's voyage is your natural next read (it is about exactly your sentence — "that's not what I meant"), and the principles tell you what this place will not bend. The other travellers: the architect, management, the sceptic.

Wenn deine Idee ein Zuhause und ein erstes anklickbares Stück hat, gibt es eine Route durch den Rest dieses Bestands. Nimm zuerst die geführte Tour — neun Stationen von der Vision und der Mission über den Arbeitsrhythmus namens PICARD, die Karte und das Co-Authoring-Deck — und danach die Voyages, eine pro Reisendem. Darunter ist die Voyage des Kunden dein natürlicher nächster Text (sie handelt von genau deinem Satz — „das habe ich nicht gemeint"), und die Prinzipien sagen dir, was dieser Ort nicht verbiegen wird. Die anderen Reisenden: der Architekt, Management, der Skeptiker.

the guided tour 1 2 3 4 5 you are here
The route: the guided tour first — nine stops — then the voyages. You are standing in the fifth.
Die Route: zuerst die geführte Tour — neun Stationen — dann die Voyages. Du stehst in der fünften.