Dooping Design Book: Modular Design System and Pattern Guide for Admin Systems

Repositorykielchang/dooping-design-bookTool

Dooping Design Book is an open-source design language, token collection, and component reference extracted from real-world internal backend systems. It decouples design tokens, copyable React components, and documented operational patterns to ensure reusable, domain-agnostic UI development.

Key points

  1. Three-layer architecture with intentionally decreasing dependency: npm-installed tokens (@dooping/tokens), React components via shadcn-style registry JSON, and documentation-only operational patterns.
  2. Core rationale: Design tokens rarely change and act as the single hard dependency, whereas UI components are copied and adapted within each project.
  3. Strict inclusion criteria: A de-domainization gate verified by automated tests, system generality, and the 'Rule of Three' to eliminate speculative abstractions.
  4. Technology stack: TypeScript, React, Tailwind CSS presets, Storybook, Docusaurus documentation, and npm workspaces.
  5. Built-in quality gates: Automated guard tests covering boundaries, tokens, color contrast/color blindness across six themes and two modes, alongside AI integration via llms.txt.

Why it matters

Monolithic component libraries often struggle in enterprise backend development because rigid UI packages make local customizations painful. Dooping Design Book addresses this by treating tokens as the only dependency while distributing component source code directly to projects.

Analysis

The project is tailored for frontend engineers and design engineers building complex internal tools and admin consoles. While public adoption is still developing (33 stars), its technical maturity is high, demonstrated by formalized Architecture Decision Records (ADRs), comprehensive guard tests, and dedicated Claude Code integration.

Mentioned links

Found in

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.

  • Repository:shadcn-ui/lint

    shadcn/lint: Agent-First Linter for Tailwind Design Systems

    shadcn/lint is a linter designed for Tailwind CSS (v4) that enforces design system boundaries with error messages tailored for AI coding agents. Instead of generic type errors, it provides actionable suggestions based on components, variants, and themes.

    2.2kstarsTypeScript

    AI & LLMs· Tool

  • Link:Bidyut Kundu

    Opensource UI: Free Copy-and-Paste Components for React and Next.js

    Opensource UI provides an open-source collection of React and Next.js components designed to be copied directly into your own codebase. Beyond standard interface elements like buttons and forms, the library features detailed hardware mockups, browser chrome, and interactive widgets.

    Web development· Resource

  • Repository:VoltAgent/awesome-design-md

    Awesome DESIGN.md: Markdown Design System Profiles for AI Coding Agents

    The awesome-design-md repository curates ready-to-use DESIGN.md files derived from well-known brand design systems. These plain-text Markdown files provide AI coding agents with design tokens, patterns, and style rules for generating visually coherent UIs.

    118.6kstars

    AI & LLMs· Resource

  • Repository:shadcn-labs/pdfcn

    pdfcn: shadcn-Style React Components for PDF Generation

    pdfcn is an open-source component library for generating PDFs in React. Built on Takumi and Forme, it adopts the copy-paste philosophy and CLI registry workflow of shadcn/ui.

    1kstarsTypeScript

    Web development· Tool

  • Link:Powerformer, Inc.

    OpenDesign: Local Open-Source Alternative to Claude Design

    OpenDesign is an open-source, local-first AI design workspace released under the Apache-2.0 licence, positioned as an alternative to proprietary cloud platforms like Claude Design. It connects existing local coding agents into a structured design engine for generating prototypes, dashboards, slides, and HTML video.

    AI & LLMs· Tool

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.