CRM-Dashboard in Next.js mit Claude Fable 5.1 und Design-Skills

X-PostMarcelDemo

Marcel (@marcelkargul) präsentiert ein CRM-Dashboard in Next.js, das innerhalb von rund zwei Tagen umgesetzt wurde. Das Design entstand zuvor manuell in Figma, während die technische Implementierung mithilfe von Claude Fable 5.1 und zwei Agent-Skills erfolgte.

Das Wichtigste

  1. Das vollständige CRM-Dashboard wurde in ca. zwei Tagen mit Next.js realisiert.
  2. Das Interface wurde vorab manuell in Figma entworfen; das KI-Modell Claude Fable 5.1 übernahm die Unterstützung bei der Code-Umsetzung.
  3. Für das Frontend-Feintuning wurden die Skills better-ui von Jakub Krehel und emil-design-eng von Emil Kowalski eingebunden.
  4. better-ui liefert exakte Werte und Regeln für UI-Polish wie optische Ausrichtung und konzentrische Border-Radien.
  5. emil-design-eng steuert Design-Engineering-Prinzipien und Interaktionsstandards für UI-Details bei.

Warum das relevant ist

Der Ansatz zeigt, wie Entwickler vorgefertigte Designvorgaben aus Figma durch spezialisierte Regelwerke in KI-Agenten zügig und detailgetreu in lauffähigen Next.js-Code übertragen können.

Einordnung

Das Beispiel trennt bewusst Design und Implementierung: Das Design wird nicht der KI überlassen, sondern manuell erarbeitet. Claude Fable 5.1 agiert als Entwicklungswerkzeug, das durch spezifische Skill-Pakete für UI-Polish und Design Engineering konsistente visuelle Vorgaben erhält.

Original-Post

Marcel

@marcelkargul · 14. September 2026

built the full CRM dashboard in Next.js in around 2 days 😍 with the help of Claude Fable 5.1 with two of the best skills: t.co/63PuTFrun1 t.co/zhluCSlE9B see it live: t.co/kXAERU2r2X t.co/6UORn93bVK t.co/X7LC9c05a6

3251 Likes86 Antworten7889 Lesezeichen731.424 Aufrufe

Auf X ansehen
Weitere Posts im Thread (3)
  1. t.co/aY8FnJvfnZ
  2. @ZazenCodes actually we designed it in figma manually:)
  3. @shubhamrajelli @ZazenCodes for dev implementation
Ausgewählte Antworten (5)
  • @pierbapt @marcelkargul Make it open source!
  • @bygregorr @marcelkargul the emilkowalski skill carrying most of the visual weight here, or do both actually compound? curious if jakubkrehel's better-ui adds much on top or if you could swap it for anything decent
  • @MatiVivorita @marcelkargul My team last year managed to create a CRM in just one week. It was impressive, and everyone in the company was thrilled to witness the progress during a meeting. After that, I spent three months meticulously fixing the wiring of the app to ensure that it functioned as intended.
  • @cviklihamar @marcelkargul why did it took 2 days? sounds pretty lot 🤯
  • @JackLevy1234 @jayzhoupro @marcelkargul ChatGPT ahh reply 🤡

Erwähnte Links

Links und Tools aus diesem Beitrag

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. September 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • X-Post:▫️Jubayer

    OpsLoop-Dashboard in Next.js mit Opus 5.5 und Design-Skills umgesetzt

    Entwickler Jubayer demonstriert ein innerhalb eines Tages erstelltes Dashboard in Next.js. Für die Umsetzung nutzte er das KI-Modell Opus 5.5 in Kombination mit spezialisierten Design- und UI-Skills von skills.sh.

    614Lesezeichen22.827Aufrufe

    KI & AI· Demo

  • Repository:jakubkrehel/skills

    jakubkrehel/skills: Agent-Skills für UI- und Design-Engineering

    jakubkrehel/skills ist eine kuratierte Sammlung modularer Agent-Skills, die KI-Assistenten wie Claude Code fundiertes Wissen über Interface-Design, Typografie, Barrierefreiheit und UI-Engineering bereitstellen.

    5773SterneMarkdown

    KI & AI· Tool

  • Link:shadcncraft

    Sales & Marketing Dashboard von shadcncraft

    shadcncraft präsentiert ein umfassendes Sales- und Marketing-Dashboard, das mit Next.js, React und shadcn/ui entwickelt wurde und 1:1 auf Figma-Vorlagen abgestimmt ist. Das Paket umfasst 23 wiederverwendbare Dashboard-Blöcke für Metriken, Trichter und Pipelines sowie Anbindungen an Design-Richtlinien via Model Context Protocol (MCP).

    KI & AI· Sammlung

  • X-Post:Kiyotaka

    Fünf UI-Skills für Design Engineers mit KI-Coding-Agenten

    Kiyotaka (@SubhanHQ) empfiehlt fünf spezialisierte Regelwerke („Skills“) für KI-Agenten, die Frontend-Entwicklern bei UI-Polishing, Animationen, Barrierefreiheit und visueller Präzision helfen.

    986Lesezeichen39.486Aufrufe

    KI & AI· Sammlung

Zurück zur Wissensbasis

Lassen Sie uns über Ihr Projekt sprechen

Kontakt aufnehmen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.