Next.js CRM Dashboard Built with Claude Fable 5.1 and Design Skills

X postMarcelDemo

Marcel (@marcelkargul) demonstrated a CRM dashboard built in Next.js over roughly two days. The interface was manually designed in Figma first, with Claude Fable 5.1 and two specialized agent skills assisting the development implementation.

Key points

  1. The CRM dashboard was built in Next.js within approximately two days.
  2. The layout was designed manually in Figma before Claude Fable 5.1 assisted with the code implementation.
  3. The workflow used two skills: better-ui by Jakub Krehel and emil-design-eng by Emil Kowalski.
  4. better-ui provides precise rules for UI polish, such as optical alignment and concentric border radii.
  5. emil-design-eng incorporates design engineering principles focused on micro-interactions and tactile UI quality.

Why it matters

Combining human design in Figma with targeted AI skills illustrates how domain-specific style rules can help developers generate refined frontend code much faster.

Analysis

The project highlights a clear division of responsibilities: instead of relying on an LLM for aesthetic choices, the design was manually crafted in Figma, while Claude Fable 5.1 and curated skill guidelines handled the implementation and interaction details.

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

3.3k likes86 replies7.9k bookmarks731.4k views

View on X
More posts in the thread (3)
  1. t.co/aY8FnJvfnZ
  2. @ZazenCodes actually we designed it in figma manually:)
  3. @shubhamrajelli @ZazenCodes for dev implementation
Selected replies (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 🤡

Mentioned links

Links and tools from this entry

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • X post:▫️Jubayer

    OpsLoop Dashboard Built in Next.js Using Opus 5.5 and Design Skills

    Developer Jubayer showcases an OpsLoop dashboard created within a single day using Next.js. The project was implemented using Opus 5.5 augmented with dedicated design engineering skills from skills.sh.

    614bookmarks22.8kviews

    AI & LLMs· Demo

  • Repository:jakubkrehel/skills

    jakubkrehel/skills: Agent Skills for UI and Design Engineering

    jakubkrehel/skills is a curated collection of agent skills designed to equip AI assistants such as Claude Code with best practices for interface design, typography, accessibility, and UI engineering.

    5.8kstarsMarkdown

    AI & LLMs· Tool

  • Link:shadcncraft

    Sales & Marketing Dashboard by shadcncraft

    shadcncraft has released a complete sales and marketing dashboard application built with Next.js, React, and shadcn/ui, featuring a 1:1 match with Figma. The package includes 23 reusable dashboard blocks covering metrics, funnels, and pipelines, alongside AI guideline integration via the Model Context Protocol (MCP).

    AI & LLMs· Resource

  • X post:Kiyotaka

    Top 5 UI Skills for Design Engineers Using AI Agents

    Kiyotaka (@SubhanHQ) highlights five curated skill rulebooks designed to enhance how AI coding agents handle UI craft, animation, accessibility, and visual polish.

    986bookmarks39.5kviews

    AI & LLMs· Resource

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

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

Parts of this content were created with the assistance of AI.