BuildHIPM
HIPM
HIPM is a hybrid project management framework for AI projects that I co-developed. I also designed its website and built the AI generators that produce its artefacts. The site is built like an embossed plate: an SVG phase wheel in which Do and Review share one sector, a gate track with a double lane, and the whole process model as typed data behind both. All of it in Next.js, React and Framer Motion.
Phase 1 of 5 · ends at the Blue Gate
Start
Check whether there is something to plan
Key question Should this project be carried out at all?
Hybrid Intelligent Project Management
- Phases
- 5
- Gates
- 4
- Phase steps
- 27
- Feedback paths from Review to Do
- 5
- Roles
- 3
StackNext.js 16React 19Framer MotionTailwind CSS 4Anthropic SDKSupabase@react-pdf/renderer
The model
The framework is typed data.
Five phases, four gates, 27 steps and three roles live in one model. The wheel, the gate track and the detail windows all read from it.
I moved the process model out of the components and into src/data/framework: phases, gates, steps, role contributions and the ways back each have their own file and share one set of types.
A validator runs whenever the model is imported and throws if it is inconsistent, so a broken model stops the build. Among other things it checks that there are exactly five phases and four gates, that every phase has three role contributions, and that the Artificial Master has decision authority in no phase.
if (phasen.length !== 5) {
fehler.push(`Erwartet 5 Phasen, gefunden ${phasen.length}`);
}
if (tore.length !== 4) {
fehler.push(`Erwartet 4 Tore, gefunden ${tore.length}`);
}
// …
if (r.length !== 3) {
fehler.push(`Phase "${p.name}" hat ${r.length} Rollenbeiträge, erwartet 3`);
}
if (r.some((x) => x.rolle === "artificial-master" && x.entscheidet)) {
fehler.push(
`Phase "${p.name}": Artificial Master hat in keiner Phase Entscheidungsbefugnis`,
);
}
// Kein NODE_ENV-Guard: Next entfernt den Zweig beim Build als toten Code,
// und dann liefe der Prüfer nur im Dev-Server. Die Laufzeitkosten sind
// eine Handvoll Schleifen über statische Daten.
validateFramework(frameworkPhases, frameworkGates);
START
5steps
Sequential
4 documents · ISO 21500 Initiating
PLAN
5steps
Sequential
5 documents · ISO 21500 Planning
DO
6steps
Cyclic
5 documents · ISO 21500 Implementing
REVIEW
6steps
Control loop, parallel to DO
4 documents · ISO 21500 Controlling
GOAL
5steps
Sequential
5 documents · ISO 21500 Closing
Counted on this page from the ported model: steps, character, documents and ISO 21500 process group per phase.
The wheel
Four sectors for five phases.
Do and Review run in the same period. So they share one angle of the wheel and lie on top of each other radially.
The wheel is plain SVG, animated with Framer Motion. Do is the outer band of the shared sector. Review is the inner band, drawn as a control loop with four stations (Messen, Bewerten, Entscheiden, Wirken) and a dot that runs along its track. A click turns the phase to the top and opens its window; the digit in the segment morphs into the window's header through a shared layoutId.
Below 768 px the site swaps the wheel for a vertical timeline with Review indented under Do. That is the version a phone shows here too.
Fahre über eine Phase für ihre Kernfrage
Prüfen, ob es etwas zu planen gibt
Aus einem Auftrag wird ein Bauplan
Liefern und melden
Phase 4 läuft parallel — kein eigener Abschnitt
Messen, bewerten, steuern
Übergeben, abschließen, lernen
const SECTOR_COUNT = 4;
const GAP_DEG = 6;
const SECTOR_DEG = (360 - GAP_DEG * SECTOR_COUNT) / SECTOR_COUNT; // 84
const OUTER_R = 190;
const INNER_R = 90;
const SPLIT_INNER_TOP = 130; // Unterkante ORANGE
const SPLIT_INNER_BOT = 118; // Oberkante ROT
/**
* Vier Winkelsektoren für fünf Phasen: DO und REVIEW teilen sich denselben
* Winkelbereich — gleicher Zeitraum — und liegen radial übereinander —
* andere Tätigkeit.
*/
const sektorPhasen: PhaseName[] = ["start", "plan", "do", "goal"];
/** Sektor, in dem eine Phase sichtbar wird — REVIEW liegt im DO-Sektor. */
function sektorFor(name: PhaseName): Sektor {
const key: PhaseName = name === "review" ? "do" : name;
return sektoren[sektorPhasen.indexOf(key)];
}
Digits Framer can measure
Each digit sits in a foreignObject. Framer measures SVG nodes as an empty box, so the morph needs an HTML element inside the wheel.
Light from above
The relief filter computes its offsets against the rotation of the ring. The light edge stays on top whichever phase is turned up.
Reduced motion
The wheel stays where it is and the running dot is left out. Track and stations remain, so nothing is lost.
The gates
Four gates, one double track.
Every phase runs up to its gate. Do and Review run side by side and end at the same one.
The track draws each phase as a stretch in front of its gate: Start ends at the Blue Gate, Plan at the Green, Do and Review together at the Orange, Goal at the Purple. Between Green and Orange the line forks into two lanes with four hand-over arrows between them.
The 3 dashed arcs under the track are jumps back to an earlier gate. The 5 feedback paths from Review to Do stay inside the double lane; hover the Review lane to list them.tap the Review gate to list them. A click on a gate opens its question, its criteria and what Hold and No-Go mean there.
Fahre über ein Tor für seine Frage
Soll dieses Projekt durchgeführt werden?
Prüfkriterien
- 1Vollständigkeit. Alle vier Dokumente liegen mit gefüllten Pflichtangaben vor. Begründete Fehlanzeigen sind zulässig.
- 2Zielqualität. SMART vollständig, CLEAR bewertet, PURE ohne offenen Einwand unter Ethical.
- 3Wirtschaftlichkeit. Der erwartete Nutzen steht in vertretbarem Verhältnis zur Budgetspanne, die Finanzierungsherkunft ist geklärt.
- 4Machbarkeit. Personal und Sachmittel sind im Zeitraum verfügbar, die Qualifikation ist vorhanden, aufbaubar oder beschaffbar.
- 5Risikotragfähigkeit. Die nach Maßnahmen verbleibenden Klasse-C-Risiken sind für die Organisation tragbar.
- 6Strategischer Fit. Das Vorhaben passt zur Ausrichtung, oder es liegt eine begründete Ausnahme vor.
Hold
Eine benannte Voraussetzung fehlt. Nur zulässig mit drei Angaben: was fehlt, wer es beschafft, bis wann erneut entschieden wird. Ohne diese drei Angaben ist es ein verdecktes No-Go.
No-Go
Das Vorhaben wird nicht durchgeführt. Kein Scheitern der Phase, sondern ihr Erfolg — sie hat mit begrenztem Aufwand eine Fehlinvestition verhindert.
Ausschlusskriterium
Ein offener Einwand unter Ethical aus der PURE-Prüfung ist ein Ausschlusskriterium und nicht durch andere Kriterien aufwiegbar.
Ist der Plan tragfähig genug, um mit der Umsetzung zu beginnen?
Prüfkriterien
- 1Vollständigkeit. Alle Ergebnisse aus grün.1 bis grün.5 liegen vor, die Prüfkriterien der einzelnen Schritte sind erfüllt.
- 2Schlüssigkeit des Vorgehens. Jeder Projektanteil ist begründet zugeordnet, die Schnittstellen sind ausgestaltet — insbesondere die Festlegungszeitpunkte.
- 3Belastbarkeit der Planung. Aufwände sind von den Verantwortlichen geschätzt und mit Annahmen dokumentiert.
- 4Ressourcendeckung. Jedes Arbeitspaket ist namentlich zugeordnet, die 75-Prozent-Grenze ist eingehalten, Verfügbarkeitszusagen liegen mit Umfang und Zeitraum vor.
- 5Kostendeckung. Die Kostenplanung liegt innerhalb der Budgetspanne, eine Kostenreserve ist gebildet.
- 6Risikotragfähigkeit. Präventive Maßnahmen sind als Arbeit eingeplant, jeder Auslöser hat einen benannten Beobachter.
- 7Steuerbarkeit. Messregeln, Kennzahlen, Berichtstakt, Änderungsprozess und Eskalationsschwellen sind festgelegt.
Hold
Der Regelfall bei unzureichender Planungsreife. Die Planung wird nachgebessert, nicht das Projekt in Frage gestellt. Typische Anlässe: fehlende Verfügbarkeitszusagen, unbelastbare Schätzungen, ungeklärte Schnittstellen.
No-Go
Selten und inhaltlich anders als in START: nicht „die Planung trägt nicht“, sondern „die Grundannahmen sind nicht haltbar“. Vorher ist stets zu prüfen, ob eine Umfangsreduzierung entlang der Prioritätsbänder das Vorhaben tragfähig macht.
DO
produziert und meldet
laufen parallel, ein gemeinsames Tor
Ist das Ergebnis so weit, dass es übergeben werden kann?
Prüfkriterien
- 1Erfüllung der Must-Anforderungen. Jede Must-Anforderung ist umgesetzt und abgenommen. Das einzige Kriterium ohne Ermessensspielraum.
- 2Stand der Should- und Could-Anforderungen. Nicht umgesetzte Anforderungen sind kein Mangel, sondern das Ergebnis der Priorisierung. Der Sponsor entscheidet über Entfall oder Folgevorhaben.
- 3Mängelstand. Kein blockierender Mangel ist offen. Wesentliche Mängel sind mit Termin und Verantwortlichem erfasst.
- 4Abnahmen. Jedes Arbeitspaket und jeder abgearbeitete Backlog-Eintrag ist gegen Abnahmekriterien und Definition of Done abgenommen.
- 5Schnittstellen. Alle Übergaben zwischen klassischen und iterativen Anteilen haben stattgefunden.
- 6Rahmenlage. Termin, Kosten und Risiko bei Abschluss, einschließlich verbleibender Klasse-C-Risiken und des Verbrauchs von Puffer und Reserve.
Hold
Der Regelfall bei unvollständiger Umsetzung. Besondere Folge: Die Fortsetzung verbraucht Kapazität und Budget, die für GOAL vorgesehen waren.
No-Go
Die seltenste und schwerwiegendste Entscheidung — Abbruch, obwohl erhebliche Mittel verbraucht sind. Das Vorhaben geht dennoch nach GOAL, zum geordneten Abschluss und zu den Lessons Learned.
Ausschlusskriterium
Eine offene Must-Anforderung schließt ein Go aus.
Ist das Projekt vollständig abgeschlossen?
Prüfkriterien
- 1Gesamtabnahme. Die schriftliche Abnahme liegt vor, mit benannten Vorbehalten.
- 2Übergabe. Die Übergabe ist erfolgt und vom Betriebsverantwortlichen bestätigt.
- 3Abschluss. Kosten, Verträge und Ressourcen sind abgeschlossen, das Risikoregister hat je Eintrag einen Endzustand.
- 4Erkenntnisse. Die Erkenntnisse sind ausgewertet und nach festem Raster in die Wissensbasis eingespeist.
Hold
Einer der vier Prüfpunkte ist offen. Die Entlastung wird vertagt, bis er erfüllt ist.
No-Go
An diesem Tor nicht vorgesehen. Eine verweigerte Gesamtabnahme führt zurück nach orange.7, nicht zu einem No-Go.
{
id: "orange.7",
label: "Orange Gate",
gehoertZu: ["do", "review"],
frage: "Ist das Ergebnis so weit, dass es übergeben werden kann?",
// …
},
// Eine Phase besitzt ein Tor nur, wenn sie der erste Eintrag in gehoertZu ist.
// orange.7 hat gehoertZu ["do", "review"] — DO besitzt es, REVIEW teilt es sich
// nur. Ein includes() würde hier orange.7 auch für REVIEW liefern und damit
// genau die Kopplung verdecken, die das Modell abbilden soll.
const gate = frameworkGates.find((g) => g.gehoertZu[0] === phase.name);
The log
Built, measured, changed.
Review in HIPM is a control loop: measure, assess, decide, act. The repository went through the same loop. These are its larger turns, each with its commits.
12 Mar 2026
The wheel in React Three Fiber
I built the wheel in R3F first: a scene with 3D segment meshes, holo materials, camera, lights and bloom, with a glass text panel next to it.
f9bafe9 · d05acb8 · a1db236
10 Apr 2026
A second 3D scene, reverted the same day
A larger scene with post-processing, a particle system and gate shields went onto the landing page and came off again on the same day.
a46d0f3 · 791cc41 · e4c5fdb
8 Aug 2026
Back to SVG, three.js removed
I went back to the SVG wheel and took the R3F files and the three.js dependencies out of the project. The wheel that is live today is SVG and Framer Motion only.
6dfa52f · 29b76bf
8 Aug 2026
Generators switched off
Before the launch the generator pages and their API routes were closed in the middleware. The focus went to the framework page.
7332727
26 to 28 Aug 2026
The process model moves into data
A reference model with a validator, the 27 steps and the role contributions per phase. On top of it the wheel got its split sector and the gate track its double lane.
b0d5a77 · a1c2ec2 · 98e8341 · dfb11f4
3 and 4 Oct 2026
New mark, Archivo Expanded, embossed plate
A new logo, Archivo at 125 % width for headings in place of Playfair, and the page as an embossed plate: grain on the ground, a light edge on top of every surface, a shadow edge below, embossed type.
44571e7 · 60679cd
The generators
Generators that ask back.
Four generators cover the documents of the Start phase. Each runs in three steps: the AI drafts, the human steers, the AI finalises.
Projektsteckbrief, Stakeholder-Analyse, Risiko-Übersicht and Kommunikationsplan are wired to Claude through the Anthropic SDK and stream into the browser. The first step returns a draft plus follow-up questions, which every prompt caps at five MUST and three SHOULD. The last step revises the draft against the answers; for the Projektsteckbrief it also checks consistency and rates maturity (Reifegrad).
The system prompt makes the model a challenger: it structures what the human delivers, finds gaps and contradictions, and makes the gaps visible.
Status
The generators are in the repository and switched off on the public site since 8 August 2026: the middleware sends /generatoren to the start page and answers the generator API with 404.
export const SCHRITT_1_SYSTEM = `Du bist der Artificial Master im HIPM-Framework (Hybrid Intelligent Project Management).
Deine Aufgabe: Aus unstrukturierten Projekt-Informationen einen detaillierten Projektsteckbrief-ENTWURF generieren.
Du bist ein Challenger — kein Schreiber:
- Strukturiere, was der Mensch liefert
- Finde Lücken und Widersprüche
- Stelle unbequeme Rückfragen
- Schließe KEINE Lücken selbst — mache sie sichtbar
// …
Projektsteckbrief
Vollständiger Steckbrief nach HIPM-Standard
KI DENKT
Generiert Entwurf + Rückfragen
MENSCH LENKT
Beantworte Rückfragen, korrigiere
KI FINALISIERT
Überarbeitung + Konsistenzprüfung + Reifegrad
Gespeicherte Pläne (1)
HIPM_Steckbrief_V002
10.03.2026, 18:45
Model
Claude Sonnet 4.5 via
@anthropic-ai/sdk, streamed to the browser as server-sent events. In step three the draft goes in as a cached prefix.Storage
Supabase holds the accounts, the saved plans and the drafts. A draft is saved while the answer streams, at most every three seconds, and restored when you come back.
In and out
Input can come from a text, Markdown, CSV, PDF or DOCX file, or from a saved plan of a generator further up the chain. Plans export as PDF, SVG or Markdown.
The LLM challenges, it doesn't write
Left alone, the model fills gaps with plausible but unchecked text. Telling it plainly that it isn't a writer forces the follow-up questions that make the output worth trusting.
Next in Build
Agent World