BAD Stack

What is BAD Stack?

BAD Stack is a lightweight, modern front-end technology stack named after the initials of three tools:

Bootstrap - Beautiful, responsive UI design
Alpine.js - Reactive state management directly in HTML
Dexie.js - Powerful local database using IndexedDB

No build tools like Node.js or Vite are required. Just load from a CDN, and you can rapidly develop a local-first web application directly in the browser.

Why BAD Stack?

Beyond CLI / GUI / Web Apps:
Unlike CLI tools, it provides a rich UI without a terminal. Unlike GUI apps, it requires zero installation and is OS-independent. Unlike traditional Web apps, there's no backend to deploy—data stays private and offline in your browser.
The Ultimate Match for Generative AI:
AI coding agents often struggle to resolve complex Node.js dependency conflicts or environment-specific build errors. Because BAD Stack operates entirely within a single HTML file via CDN, it prevents AI from falling into "npm install hell." You get a completely working app in one shot, eliminating the ironic situation where humans must debug environment setups for AI-generated code.
Progressive Adoption:
Similar to "progressive disclosure" in UX design—which makes applications easier to learn and less prone to errors by revealing advanced features only when needed—the BAD Stack applies this principle to your architecture. You can start with a simple static UI using only Bootstrap. When temporary state management is needed, you drop in Alpine.js. Finally, for the advanced feature of permanent data storage, you introduce Dexie.js. This prevents overwhelming complexity at the start and keeps development smooth.

Why choose these three? (Technology Comparison)

B - Why Bootstrap? (Beautiful UI)

vs Tailwind CSS: Tailwind inherently requires a build step. Its CDN version dynamically generates CSS in the browser, which degrades performance. Bootstrap provides static, pre-compiled CSS that works instantly and safely.
vs Bulma: Bulma is elegant but CSS-only; you have to write custom JS for interactive elements like modals or dropdowns. Bootstrap includes these out of the box, plus it offers seamless integration with the comprehensive Bootstrap Icons.
vs Classless CSS (e.g., Pico CSS): Great for basic documents, but lacks the robust grid system and complex components needed for rich application UIs.

A - Why Alpine.js? (Architecture & Logic)

vs Vanilla JS / jQuery: Manually syncing the DOM with data state quickly leads to spaghetti code. Alpine.js brings Vue-like reactive, data-driven UI directly to your HTML with minimal overhead.
vs React / Vue / Svelte: These modern giants are designed around Node.js build processes. Running them via CDN often requires heavy in-browser transpilation. Alpine is explicitly built for zero-build, drop-in usage.
vs HTMX: HTMX is a powerful tool for fetching HTML from a backend server. This contradicts the entirely local-first, serverless philosophy of the BAD Stack.

D - Why Dexie.js? (Database)

vs LocalStorage: Easy to use, but strictly limited to ~5MB, stores only strings, and lacks indexing or querying capabilities.
vs Raw IndexedDB: A powerful built-in browser database, but its API is notoriously archaic, complex, and callback-heavy. Dexie.js elegantly wraps it into modern, Promise-based queries.
vs SQLite Wasm / Firebase: Running SQLite via Wasm involves a heavy file size and complex initialization. Firebase requires a backend and internet connection. Dexie.js offers the perfect local, offline-first database from a single CDN link.

AI Prompt Guidelines

Copy the prompt below and paste it into ChatGPT, Claude, or Gemini to perfectly generate a BAD Stack application.

“bad is good” — Despite the name, the development experience and performance are entirely GOOD.

¿Qué es BAD Stack?

BAD Stack es un stack tecnológico de front-end ligero y moderno, nombrado por las iniciales de tres herramientas:

Bootstrap - Diseño de interfaz de usuario hermoso y responsivo
Alpine.js - Gestión de estado reactivo directamente en HTML
Dexie.js - Potente base de datos local usando IndexedDB

No se requieren herramientas de compilación como Node.js o Vite. Solo cárgalo desde una CDN y podrás desarrollar rápidamente una aplicación web local-first directamente en el navegador.

¿Por qué BAD Stack?

Más allá de las aplicaciones CLI / GUI / Web:
A diferencia de las herramientas CLI, proporciona una interfaz de usuario rica sin necesidad de terminal. A diferencia de las aplicaciones GUI, no requiere instalación y es independiente del sistema operativo. A diferencia de las aplicaciones web tradicionales, no hay backend que implementar: los datos se mantienen privados y sin conexión en tu navegador.
La combinación definitiva para la IA generativa:
Los agentes de codificación de IA a menudo tienen dificultades para resolver conflictos de dependencias complejos de Node.js o errores de compilación específicos del entorno. Debido a que BAD Stack opera completamente dentro de un único archivo HTML a través de CDN, evita que la IA caiga en el "infierno de npm install". Obtienes una aplicación completamente funcional en un solo intento, eliminando la irónica situación en la que los humanos deben depurar las configuraciones del entorno para el código generado por IA.
Adopción progresiva:
Al igual que la "divulgación progresiva" en el diseño de UX, que hace que las aplicaciones sean más fáciles de aprender y menos propensas a errores al revelar funciones avanzadas solo cuando son necesarias, BAD Stack aplica este principio a tu arquitectura. Puedes comenzar con una interfaz de usuario estática simple usando solo Bootstrap. Cuando se necesita gestión de estado temporal, agregas Alpine.js. Finalmente, para la función avanzada de almacenamiento permanente de datos, introduces Dexie.js. Esto evita una complejidad abrumadora al principio y mantiene el desarrollo fluido.

¿Por qué elegir estas tres? (Comparación de tecnologías)

B - ¿Por qué Bootstrap? (Interfaz hermosa)

vs Tailwind CSS: Tailwind requiere inherentemente un paso de compilación. Su versión CDN genera CSS dinámicamente en el navegador, lo que degrada el rendimiento. Bootstrap proporciona CSS estático y precompilado que funciona al instante y de forma segura.
vs Bulma: Bulma es elegante pero solo tiene CSS; tienes que escribir JS personalizado para elementos interactivos como modales o menús desplegables. Bootstrap los incluye listos para usar, además de ofrecer una integración perfecta con los completos Bootstrap Icons.
vs Classless CSS (ej. Pico CSS): Excelente para documentos básicos, pero carece del robusto sistema de cuadrícula y los componentes complejos necesarios para interfaces de usuario ricas en aplicaciones.

A - ¿Por qué Alpine.js? (Arquitectura y Lógica)

vs Vanilla JS / jQuery: Sincronizar manualmente el DOM con el estado de los datos conduce rápidamente a un código espagueti. Alpine.js trae una interfaz de usuario reactiva y basada en datos similar a Vue directamente a tu HTML con una sobrecarga mínima.
vs React / Vue / Svelte: Estos gigantes modernos están diseñados en torno a procesos de compilación de Node.js. Ejecutarlos a través de CDN a menudo requiere una pesada transpilación en el navegador. Alpine está explícitamente diseñado para usarse sin compilación, simplemente soltándolo en el código.
vs HTMX: HTMX es una herramienta poderosa para obtener HTML desde un servidor backend. Esto contradice la filosofía completamente local-first y serverless de BAD Stack.

D - ¿Por qué Dexie.js? (Base de datos)

vs LocalStorage: Fácil de usar, pero estrictamente limitado a ~5MB, solo almacena cadenas y carece de capacidades de indexación o consulta.
vs IndexedDB puro: Una poderosa base de datos integrada en el navegador, pero su API es notoriamente arcaica, compleja y depende en gran medida de callbacks. Dexie.js lo envuelve elegantemente en consultas modernas basadas en Promesas.
vs SQLite Wasm / Firebase: Ejecutar SQLite a través de Wasm implica un tamaño de archivo pesado y una inicialización compleja. Firebase requiere un backend y conexión a internet. Dexie.js ofrece la base de datos local perfecta, con prioridad fuera de línea, desde un solo enlace CDN.

Guías de prompts para IA

Copia el prompt a continuación y pégalo en ChatGPT, Claude o Gemini para generar perfectamente una aplicación BAD Stack.

“bad is good” (lo malo es bueno) — A pesar del nombre, la experiencia de desarrollo y el rendimiento son completamente BUENOS.

Qu'est-ce que la BAD Stack ?

BAD Stack est une pile technologique front-end légère et moderne, nommée d'après les initiales de trois outils :

Bootstrap - Conception d'interface utilisateur magnifique et réactive
Alpine.js - Gestion d'état réactive directement en HTML
Dexie.js - Base de données locale puissante utilisant IndexedDB

Aucun outil de compilation comme Node.js ou Vite n'est requis. Il suffit de charger depuis un CDN, et vous pouvez développer rapidement une application web local-first directement dans le navigateur.

Pourquoi la BAD Stack ?

Au-delà des applications CLI / GUI / Web :
Contrairement aux outils CLI, elle offre une interface riche sans terminal. Contrairement aux applications GUI, elle ne nécessite aucune installation et est indépendante du système d'exploitation. Contrairement aux applications web traditionnelles, il n'y a pas de backend à déployer — les données restent privées et hors ligne dans votre navigateur.
Le choix ultime pour l'IA générative :
Les agents de codage IA ont souvent du mal à résoudre les conflits complexes de dépendances Node.js ou les erreurs de compilation spécifiques à l'environnement. Étant donné que la BAD Stack fonctionne entièrement dans un seul fichier HTML via CDN, elle évite à l'IA de tomber dans "l'enfer de npm install". Vous obtenez une application parfaitement fonctionnelle du premier coup, éliminant la situation ironique où les humains doivent déboguer les configurations d'environnement pour le code généré par l'IA.
Adoption progressive :
À l'instar de la "divulgation progressive" en design UX — qui rend les applications plus faciles à apprendre et moins sujettes aux erreurs en ne révélant les fonctionnalités avancées qu'en cas de besoin — la BAD Stack applique ce principe à votre architecture. Vous pouvez commencer avec une simple interface statique en utilisant uniquement Bootstrap. Lorsqu'une gestion d'état temporaire est nécessaire, vous ajoutez Alpine.js. Enfin, pour la fonctionnalité avancée de stockage permanent des données, vous introduisez Dexie.js. Cela évite une complexité écrasante au démarrage et maintient un développement fluide.

Pourquoi choisir ces trois technologies ? (Comparaison technologique)

B - Pourquoi Bootstrap ? (Belle interface utilisateur)

vs Tailwind CSS : Tailwind nécessite intrinsèquement une étape de compilation. Sa version CDN génère dynamiquement du CSS dans le navigateur, ce qui dégrade les performances. Bootstrap fournit un CSS statique et précompilé qui fonctionne instantanément et en toute sécurité.
vs Bulma : Bulma est élégant mais uniquement CSS ; vous devez écrire du JS personnalisé pour les éléments interactifs comme les modales ou les menus déroulants. Bootstrap les inclut nativement, et offre une intégration transparente avec la vaste bibliothèque Bootstrap Icons.
vs Classless CSS (ex: Pico CSS) : Idéal pour des documents basiques, mais manque du système de grille robuste et des composants complexes nécessaires aux interfaces d'applications riches.

A - Pourquoi Alpine.js ? (Architecture et logique)

vs Vanilla JS / jQuery : Synchroniser manuellement le DOM avec l'état des données conduit rapidement à du code spaghetti. Alpine.js apporte une interface réactive basée sur les données (similaire à Vue) directement dans votre HTML avec un minimum d'efforts.
vs React / Vue / Svelte : Ces géants modernes sont conçus autour des processus de compilation Node.js. Les exécuter via CDN nécessite souvent une lourde transpilation dans le navigateur. Alpine est explicitement conçu pour une utilisation sans compilation, "clé en main".
vs HTMX : HTMX est un outil puissant pour récupérer du HTML depuis un serveur backend. Cela contredit la philosophie entièrement "local-first" et sans serveur de la BAD Stack.

D - Pourquoi Dexie.js ? (Base de données)

vs LocalStorage : Facile à utiliser, mais strictement limité à ~5Mo, ne stocke que des chaînes de caractères, et manque de capacités d'indexation ou de requêtes.
vs IndexedDB natif : Une puissante base de données intégrée au navigateur, mais son API est notoirement archaïque, complexe et fortement basée sur les callbacks. Dexie.js l'enveloppe élégamment dans des requêtes modernes basées sur des Promesses.
vs SQLite Wasm / Firebase : Exécuter SQLite via Wasm implique un fichier lourd et une initialisation complexe. Firebase nécessite un backend et une connexion internet. Dexie.js offre la base de données locale parfaite, d'abord hors ligne, à partir d'un simple lien CDN.

Lignes directrices des Prompts IA

Copiez le prompt ci-dessous et collez-le dans ChatGPT, Claude ou Gemini pour générer parfaitement une application BAD Stack.

“bad is good” (le mauvais est bon) — Malgré son nom, l'expérience de développement et les performances sont entièrement BONNES.

O que é a BAD Stack?

BAD Stack é uma stack de tecnologia front-end leve e moderna, nomeada a partir das iniciais de três ferramentas:

Bootstrap - Design de interface de usuário bonito e responsivo
Alpine.js - Gerenciamento de estado reativo diretamente no HTML
Dexie.js - Poderoso banco de dados local usando IndexedDB

Não são necessárias ferramentas de build como Node.js ou Vite. Basta carregar a partir de uma CDN e você pode desenvolver rapidamente uma aplicação web local-first diretamente no navegador.

Por que a BAD Stack?

Além de aplicativos CLI / GUI / Web:
Ao contrário das ferramentas CLI, ela fornece uma interface rica sem terminal. Ao contrário dos aplicativos GUI, requer zero instalação e é independente do sistema operacional. Ao contrário dos aplicativos Web tradicionais, não há backend para implantar — os dados permanecem privados e offline no seu navegador.
A combinação definitiva para a IA Generativa:
Agentes de codificação de IA frequentemente lutam para resolver conflitos de dependência complexos do Node.js ou erros de build específicos do ambiente. Como a BAD Stack opera inteiramente dentro de um único arquivo HTML via CDN, ela impede que a IA caia no "inferno do npm install". Você obtém um aplicativo totalmente funcional de uma só vez, eliminando a situação irônica em que humanos devem depurar configurações de ambiente para o código gerado por IA.
Adoção Progressiva:
Semelhante à "divulgazione progressiva" no design de UX — que torna as aplicações mais fáceis de aprender e menos propensas a erros, revelando recursos avançados apenas quando necessário —, a BAD Stack aplica esse princípio à sua arquitetura. Você pode começar com uma interface estática simples usando apenas Bootstrap. Quando um gerenciamento de estado temporário é necessário, você adiciona o Alpine.js. Finalmente, para o recurso avançado de armazenamento permanente de dados, você introduz o Dexie.js. Isso evita uma complexidade esmagadora no início e mantém o desenvolvimento fluido.

Por que escolher essas três? (Comparação de Tecnologias)

B - Por que Bootstrap? (Interface de usuário bonita)

vs Tailwind CSS: O Tailwind requer inerentemente uma etapa de build. Sua versão CDN gera CSS dinamicamente no navegador, o que degrada o desempenho. O Bootstrap fornece CSS estático e pré-compilado que funciona instantaneamente e com segurança.
vs Bulma: O Bulma é elegante, mas apenas CSS; você precisa escrever JS personalizado para elementos interativos, como modais ou dropdowns. O Bootstrap inclui isso de forma nativa, além de oferecer integração perfeita com a abrangente Bootstrap Icons.
vs Classless CSS (ex: Pico CSS): Ótimo para documentos básicos, mas carece do sistema de grade robusto e dos componentes complexos necessários para interfaces de aplicativos ricos.

A - Por que Alpine.js? (Arquitetura e Lógica)

vs Vanilla JS / jQuery: Sincronizar manualmente o DOM com o estado dos dados rapidamente leva a um código espaguete. O Alpine.js traz uma interface reativa e orientada a dados semelhante ao Vue diretamente para o seu HTML com o mínimo de sobrecarga.
vs React / Vue / Svelte: Esses gigantes modernos são projetados em torno de processos de build do Node.js. Executá-los via CDN muitas vezes requer pesada transpilação no navegador. O Alpine foi explicitamente construído para uso drop-in sem build.
vs HTMX: HTMX é uma ferramenta poderosa para buscar HTML de um servidor backend. Isso contradiz a filosofia puramente local-first e serverless da BAD Stack.

D - Por que Dexie.js? (Banco de Dados)

vs LocalStorage: Fácil de usar, mas estritamente limitado a ~5MB, armazena apenas strings e carece de recursos de indexação ou consulta.
vs IndexedDB puro: Um poderoso banco de dados nativo do navegador, mas sua API é notoriamente arcaica, complexa e baseada em callbacks. O Dexie.js o envolve elegantemente em consultas modernas baseadas em Promises.
vs SQLite Wasm / Firebase: Executar SQLite via Wasm envolve um tamanho de arquivo pesado e inicialização complexa. O Firebase requer um backend e conexão com a internet. O Dexie.js oferece o banco de dados local perfeito, offline-first, a partir de um único link CDN.

Diretrizes de Prompt para IA

Copie o prompt abaixo e cole no ChatGPT, Claude ou Gemini para gerar perfeitamente um aplicativo BAD Stack.

“bad is good” (ruim é bom) — Apesar do nome, a experiência de desenvolvimento e o desempenho são inteiramente BONS.

Was ist der BAD Stack?

BAD Stack ist ein leichtgewichtiger, moderner Frontend-Technologie-Stack, benannt nach den Initialen dreier Tools:

Bootstrap - Schönes, responsives UI-Design
Alpine.js - Reaktives State-Management direkt im HTML
Dexie.js - Leistungsstarke lokale Datenbank mit IndexedDB

Es sind keine Build-Tools wie Node.js oder Vite erforderlich. Einfach über ein CDN laden und Sie können in kürzester Zeit eine local-first Webanwendung direkt im Browser entwickeln.

Warum BAD Stack?

Jenseits von CLI / GUI / Web-Apps:
Im Gegensatz zu CLI-Tools bietet es eine reichhaltige Benutzeroberfläche ohne Terminal. Im Gegensatz zu GUI-Apps erfordert es keine Installation und ist OS-unabhängig. Im Gegensatz zu herkömmlichen Web-Apps muss kein Backend bereitgestellt werden – die Daten bleiben privat und offline in Ihrem Browser.
Die ultimative Kombination für generative KI:
KI-Codierungs-Agenten haben oft Schwierigkeiten, komplexe Node.js-Abhängigkeitskonflikte oder umgebungsspezifische Build-Fehler zu lösen. Da der BAD Stack vollständig innerhalb einer einzigen HTML-Datei via CDN arbeitet, wird verhindert, dass die KI in die "npm install-Hölle" gerät. Sie erhalten auf Anhieb eine voll funktionsfähige App, was die ironische Situation beseitigt, in der Menschen Umgebungseinstellungen für von KI generierten Code debuggen müssen.
Schrittweise Einführung (Progressive Adoption):
Ähnlich wie bei der "Progressive Disclosure" im UX-Design – welche Anwendungen leichter erlernbar und weniger fehleranfällig macht, indem erweiterte Funktionen nur bei Bedarf angezeigt werden – wendet der BAD Stack dieses Prinzip auf Ihre Architektur an. Sie können mit einer einfachen statischen Benutzeroberfläche beginnen, die nur Bootstrap verwendet. Wenn eine temporäre Zustandsverwaltung erforderlich ist, fügen Sie Alpine.js hinzu. Für die erweiterte Funktion der dauerhaften Datenspeicherung führen Sie schließlich Dexie.js ein. Dies verhindert eine überwältigende Komplexität zu Beginn und sorgt für eine reibungslose Entwicklung.

Warum diese drei wählen? (Technologievergleich)

B - Warum Bootstrap? (Schöne Benutzeroberfläche)

vs Tailwind CSS: Tailwind erfordert von Natur aus einen Build-Schritt. Seine CDN-Version generiert CSS dynamisch im Browser, was die Leistung beeinträchtigt. Bootstrap bietet statisches, vorkompiliertes CSS, das sofort und sicher funktioniert.
vs Bulma: Bulma ist elegant, aber nur CSS; Sie müssen für interaktive Elemente wie Modals oder Dropdowns benutzerdefiniertes JS schreiben. Bootstrap enthält diese standardmäßig und bietet zudem eine nahtlose Integration mit den umfassenden Bootstrap Icons.
vs Classless CSS (z.B. Pico CSS): Großartig für einfache Dokumente, aber es fehlen das robuste Rastersystem und komplexe Komponenten, die für anspruchsvolle Anwendungs-UIs benötigt werden.

A - Warum Alpine.js? (Architektur & Logik)

vs Vanilla JS / jQuery: Das manuelle Synchronisieren des DOM mit dem Datenstatus führt schnell zu Spaghetti-Code. Alpine.js bringt eine Vue-ähnliche reaktive, datengesteuerte Benutzeroberfläche mit minimalem Aufwand direkt in Ihr HTML.
vs React / Vue / Svelte: Diese modernen Giganten sind für Node.js-Build-Prozesse konzipiert. Wenn sie über CDN ausgeführt werden, erfordern sie oft eine aufwändige Transpilierung im Browser. Alpine ist explizit für den sofortigen Einsatz ohne Build-Prozess (Drop-in) entwickelt worden.
vs HTMX: HTMX ist ein leistungsstarkes Tool zum Abrufen von HTML von einem Backend-Server. Dies widerspricht der vollständig local-first, serverlosen Philosophie des BAD Stacks.

D - Warum Dexie.js? (Datenbank)

vs LocalStorage: Einfach zu bedienen, aber streng auf ~5 MB begrenzt, speichert nur Zeichenfolgen (Strings) und verfügt über keine Indexierungs- oder Abfragefunktionen.
vs reines IndexedDB: Eine leistungsstarke integrierte Browser-Datenbank, aber ihre API ist notorisch archaisch, komplex und Callback-lastig. Dexie.js verpackt sie elegant in moderne, Promise-basierte Abfragen.
vs SQLite Wasm / Firebase: Das Ausführen von SQLite über Wasm bringt eine große Dateigröße und eine komplexe Initialisierung mit sich. Firebase erfordert ein Backend und eine Internetverbindung. Dexie.js bietet die perfekte lokale, offline-first Datenbank über einen einzigen CDN-Link.

KI-Prompt-Richtlinien

Kopieren Sie den untenstehenden Prompt und fügen Sie ihn in ChatGPT, Claude oder Gemini ein, um perfekt eine BAD Stack-Anwendung zu generieren.

“bad is good” (schlecht ist gut) — Trotz des Namens sind die Entwicklungserfahrung und die Leistung durchweg GUT.

Cos'è il BAD Stack?

Il BAD Stack è uno stack tecnologico front-end leggero e moderno, che prende il nome dalle iniziali di tre strumenti:

Bootstrap - Design UI bello e reattivo
Alpine.js - Gestione reattiva dello stato direttamente in HTML
Dexie.js - Potente database locale che utilizza IndexedDB

Non sono necessari strumenti di build come Node.js o Vite. Basta caricarlo da una CDN e potrai sviluppare rapidamente un'applicazione web local-first direttamente nel browser.

Perché il BAD Stack?

Oltre le app CLI / GUI / Web:
A differenza degli strumenti CLI, fornisce un'interfaccia utente ricca senza un terminale. A differenza delle app GUI, non richiede installazione ed è indipendente dal sistema operativo. A differenza delle tradizionali app Web, non c'è alcun backend da distribuire: i dati rimangono privati e offline nel tuo browser.
La combinazione definitiva per l'IA Generativa:
Gli agenti di codifica IA spesso lottano per risolvere complessi conflitti di dipendenze Node.js o errori di build specifici dell'ambiente. Poiché il BAD Stack opera interamente all'interno di un singolo file HTML tramite CDN, impedisce all'IA di cadere nell'"inferno di npm install". Ottieni un'app completamente funzionante al primo colpo, eliminando l'ironica situazione in cui gli umani devono eseguire il debug delle configurazioni di ambiente per il codice generato dall'IA.
Adozione progressiva:
Simile alla "divulgazione progressiva" nel design UX — che rende le applicazioni più facili da imparare e meno inclini agli errori rivelando funzionalità avanzate solo quando necessario — il BAD Stack applica questo principio alla tua architettura. Puoi iniziare con una semplice interfaccia statica usando solo Bootstrap. Quando è necessaria la gestione temporanea dello stato, aggiungi Alpine.js. Infine, per la funzionalità avanzata di archiviazione permanente dei dati, introduci Dexie.js. Questo evita una complessità opprimente all'inizio e mantiene lo sviluppo fluido.

Perché scegliere questi tre? (Confronto Tecnologico)

B - Perché Bootstrap? (Interfaccia Utente Bellissima)

vs Tailwind CSS: Tailwind richiede intrinsecamente un passaggio di build. La sua versione CDN genera dinamicamente CSS nel browser, il che degrada le prestazioni. Bootstrap fornisce CSS statico precompilato che funziona istantaneamente e in sicurezza.
vs Bulma: Bulma è elegante ma basato solo su CSS; devi scrivere JS personalizzato per elementi interattivi come modali o menu a discesa. Bootstrap li include di default, oltre a offrire una perfetta integrazione con le complete Bootstrap Icons.
vs Classless CSS (es. Pico CSS): Ottimo per documenti di base, ma manca del robusto sistema a griglia e dei componenti complessi necessari per interfacce utente di applicazioni ricche.

A - Perché Alpine.js? (Architettura & Logica)

vs Vanilla JS / jQuery: Sincronizzare manualmente il DOM con lo stato dei dati porta rapidamente al codice spaghetti. Alpine.js porta una UI reattiva e basata sui dati simile a Vue direttamente nel tuo HTML con un sovraccarico minimo.
vs React / Vue / Svelte: Questi giganti moderni sono progettati attorno ai processi di build di Node.js. Eseguirli tramite CDN richiede spesso una pesante transpilazione nel browser. Alpine è esplicitamente costruito per un uso drop-in, senza build.
vs HTMX: HTMX è un potente strumento per recuperare HTML da un server backend. Questo contraddice la filosofia interamente local-first e serverless del BAD Stack.

D - Perché Dexie.js? (Database)

vs LocalStorage: Facile da usare, ma rigorosamente limitato a ~5MB, memorizza solo stringhe e manca di funzionalità di indicizzazione o query.
vs IndexedDB puro: Un potente database integrato nel browser, ma la sua API è notoriamente arcaica, complessa e basata su callback. Dexie.js lo avvolge elegantemente in moderne query basate su Promise.
vs SQLite Wasm / Firebase: L'esecuzione di SQLite tramite Wasm comporta dimensioni di file pesanti e un'inizializzazione complessa. Firebase richiede un backend e una connessione internet. Dexie.js offre il perfetto database locale offline-first da un singolo collegamento CDN.

Linee guida per i Prompt IA

Copia il prompt di seguito e incollalo in ChatGPT, Claude o Gemini per generare perfettamente un'applicazione BAD Stack.

“bad is good” (il cattivo è buono) — Nonostante il nome, l'esperienza di sviluppo e le prestazioni sono interamente BUONE.

什么是BAD Stack？

BAD Stack是由以下3项技术的首字母缩写组成的轻量级、现代化的前端技术栈。

Bootstrap - 优美且响应式的UI设计
Alpine.js - 可直接在HTML中编写的响应式状态管理
Dexie.js - 基于IndexedDB的强大本地数据库

无需构建Node.js或Vite等编译环境，只需通过CDN引入，即可在浏览器中极其快速地开发出完全纯粹的本地优先（Local-First）的Web应用程序。

为什么选择BAD Stack？

具备CLI / GUI / Web应用所没有的优点:
与CLI工具不同，它无需终端即可提供直观的UI。与GUI应用一样，无需为每个操作系统进行编译或安装，只需将HTML文件扔进浏览器即可。此外，与传统Web应用不同，它不需要搭建服务器，数据保存在本地（浏览器内），完美保证了隐私和离线操作。
在生成式AI（AI代理）时代的压倒性优势:
即使是最新的AI编程代理，也仍然难以自行解决复杂的Node.js依赖关系或与环境相关的编译错误。由于BAD Stack仅通过CDN即可在一个HTML文件中闭环完成，从物理上防止了AI陷入“npm install地狱”和环境配置的泥潭。人类帮AI写的代码配置环境并解决报错这种本末倒置的麻烦不复存在，只需一次提示（Prompt），你就能获得必定能运行的个人工具。
渐进式采用（Progressive Adoption）:
在UI设计中，有一个概念叫做“渐进式披露（Progressive Disclosure）”，用于让应用程序更易于学习并防止出错。我们将这一概念应用到了系统架构中。一开始仅使用Bootstrap构建静态的UI界面，当需要临时状态管理时再添加Alpine.js。而当需要“数据持久化”这种高级功能时，才首次引入Dexie.js。通过这种渐进式方法，消除了开发初期的复杂性，实现了不易出错且顺畅的开发。

为什么是这三个？（技术对比）

B - 为什么是Bootstrap？（Beautiful UI）

vs Tailwind CSS: Tailwind本质上以编译环境（Node.js）为前提。虽然有CDN版，但它在浏览器中动态生成CSS，会对性能产生不良影响。Bootstrap只需加载已编译的静态CSS即可瞬间运行。
vs Bulma: Bulma也很漂亮，但不包含JS，需要自己编写模态框或下拉菜单等动态组件。Bootstrap内置了这些，且具备能用一行代码添加官方“Bootstrap Icons”的压倒性全面性。
vs 轻量/无类CSS（如Pico CSS）: 很容易弄好外观，但在构建复杂的网格布局或仪表板类UI时力不从心。

A - 为什么是Alpine.js？（Architecture & Logic）

vs Vanilla JS / jQuery: 手动同步DOM操作与状态（数据）很快就会让代码变成意大利面条。Alpine.js仅需少量代码即可实现类似Vue.js的数据驱动UI。
vs React / Vue / Svelte: 现代霸主，但这些均以构建环境为前提。虽然可以强行用CDN运行，但在浏览器上进行繁重的转译效率很低。Alpine.js从一开始就是为了“无需编译、直接写在HTML中”而设计的。
vs HTMX: HTMX是一种“与服务器通信并替换HTML”的技术。与没有后端、本地优先的BAD Stack的用途在理念上有着根本的不同。

D - 为什么是Dexie.js？（Database）

vs LocalStorage: 最方便，但容量上限（约5MB）很严格，且只能保存字符串。也没有搜索和过滤功能。
vs 原生IndexedDB: 浏览器标准的强大数据库，但API古老且复杂，无法直观地编写异步处理。Dexie.js将其转换为现代的基于Promise的方式，实现了直观的查询。
vs SQLite Wasm / Firebase: 在浏览器上运行SQLite的Wasm文件体积庞大且初始化复杂。Firebase等BaaS始终需要网络和服务器。只需一张CDN即可完全离线且高速运行的Dexie.js是最佳平衡。

面向AI的提示词

将以下提示词粘贴到ChatGPT、Claude或Gemini等，即可让其生成完美的BAD Stack应用程序。

“bad is good” —— 尽管名字叫BAD，但其开发体验和性能绝对是GOOD。

什麼是BAD Stack？

BAD Stack是由以下3項技術的首字母縮寫組成的輕量級、現代化的前端技術堆疊。

Bootstrap - 優美且響應式的UI設計
Alpine.js - 可直接在HTML中編寫的響應式狀態管理
Dexie.js - 基於IndexedDB的強大本地資料庫

無需建置Node.js或Vite等編譯環境，只需透過CDN載入，即可在瀏覽器中極其快速地開發出完全純粹的本地優先（Local-First）的Web應用程式。

為什麼選擇BAD Stack？

具備CLI / GUI / Web應用所沒有的優點:
與CLI工具不同，它無需終端機即可提供直觀的UI。與GUI應用一樣，無需為每個作業系統進行編譯或安裝，只需將HTML檔案丟進瀏覽器即可。此外，與傳統Web應用不同，它不需要架設伺服器，資料保存在本地（瀏覽器內），完美保證了隱私和離線操作。
在生成式AI（AI代理）時代的壓倒性優勢:
即使是最新的AI程式設計代理，也仍然難以自行解決複雜的Node.js依賴關係或與環境相關的編譯錯誤。由於BAD Stack僅透過CDN即可在一個HTML檔案中閉環完成，從物理上防止了AI陷入「npm install地獄」和環境配置的泥淖。人類幫AI寫的程式碼配置環境並解決報錯這種本末倒置的麻煩不復存在，只需一次提示（Prompt），你就能獲得必定能運作的個人工具。
漸進式採用（Progressive Adoption）:
在UI設計中，有一個概念叫做「漸進式披露（Progressive Disclosure）」，用於讓應用程式更易於學習並防止出錯。我們將這一概念應用到了系統架構中。一開始僅使用Bootstrap建立靜態的UI介面，當需要臨時狀態管理時再添加Alpine.js。而當需要「資料持久化」這種進階功能時，才首次引入Dexie.js。透過這種漸進式方法，消除了開發初期的複雜性，實現了不易出錯且順暢的開發。

為什麼是這三個？（技術對比）

B - 為什麼是Bootstrap？（Beautiful UI）

vs Tailwind CSS: Tailwind本質上以編譯環境（Node.js）為前提。雖然有CDN版，但它在瀏覽器中動態生成CSS，會對效能產生不良影響。Bootstrap只需載入已編譯的靜態CSS即可瞬間運行。
vs Bulma: Bulma也很漂亮，但不包含JS，需要自己編寫模態框或下拉選單等動態組件。Bootstrap內建了這些，且具備能用一行程式碼添加官方「Bootstrap Icons」的壓倒性全面性。
vs 輕量/無類別CSS（如Pico CSS）: 很容易弄好外觀，但在建置複雜的網格佈局或儀表板類UI時力不從心。

A - 為什麼是Alpine.js？（Architecture & Logic）

vs Vanilla JS / jQuery: 手動同步DOM操作與狀態（資料）很快就會讓程式碼變成義大利麵條。Alpine.js僅需少量程式碼即可實現類似Vue.js的資料驅動UI。
vs React / Vue / Svelte: 現代霸主，但這些均以建置環境為前提。雖然可以強行用CDN運行，但在瀏覽器上進行繁重的轉譯效率很低。Alpine.js從一開始就是為了「無需編譯、直接寫在HTML中」而設計的。
vs HTMX: HTMX是一種「與伺服器通訊並替換HTML」的技術。與沒有後端、本地優先的BAD Stack的用途在理念上有著根本的不同。

D - 為什麼是Dexie.js？（Database）

vs LocalStorage: 最方便，但容量上限（約5MB）很嚴格，且只能保存字串。也沒有搜尋和過濾功能。
vs 原生IndexedDB: 瀏覽器標準的強大資料庫，但API古老且複雜，無法直觀地編寫非同步處理。Dexie.js將其轉換為現代的基於Promise的方式，實現了直觀的查詢。
vs SQLite Wasm / Firebase: 在瀏覽器上執行SQLite的Wasm檔案體積龐大且初始化複雜。Firebase等BaaS始終需要網路和伺服器。只需一張CDN即可完全離線且高速運行的Dexie.js是最佳平衡。

面向AI的提示詞

將以下提示詞貼到ChatGPT、Claude或Gemini等，即可讓其生成完美的BAD Stack應用程式。

「bad is good」 —— 儘管名字叫BAD，但其開發體驗和效能絕對是GOOD。

BAD Stackとは？

BAD Stackは、以下の3つの技術の頭文字を取った、軽量かつモダンなフロントエンド技術スタックです。

Bootstrap - 美しくレスポンシブなUIデザイン
Alpine.js - HTMLに直接記述できるリアクティブな状態管理
Dexie.js - IndexedDBを利用した強力なローカルデータベース

Node.jsやViteといったビルド環境を構築する必要がなく、CDNから読み込むだけで、ブラウザ上で完結するローカルファースト（Local-First）なWebアプリケーションを爆速で開発できます。

なぜBAD Stackなのか？

CLI / GUI / Webアプリにはない長所:
CLIツールとは違いターミナル不要で直感的なUIを持ちます。GUIアプリのようにOSごとのビルドやインストールも不要で、HTMLファイルをブラウザに投げるだけです。また、従来のWebアプリと違いサーバー構築が不要で、データは手元（ブラウザ内）に留まるためプライバシーとオフライン動作が完全に保証されます。
生成AI（AIエージェント）時代における圧倒的優位性:
最新のAIコーディングエージェントでも、複雑なNode.jsの依存関係や環境依存のビルドエラーを自己解決するのは未だに困難です。BAD StackはCDNを利用した単一のHTMLファイルで完結するため、AIが「npm install地獄」や環境構築の沼に陥るのを物理的に防ぎます。「AIが作ったコードの環境構築やエラー解決を人間が手伝う」という本末転倒な手間がゼロになり、1回のプロンプトで確実に動くパーソナルツールが手に入ります。
段階的導入（Progressive Adoption）:
UIデザインにおいて、アプリケーションの学習を容易にしエラーを防ぐための手法である「段階的開示（Progressive Disclosure）」の概念を、システム構成に応用しています。最初はBootstrapだけで静的なモックアップを構築し、一時的な状態管理が必要になった段階でAlpine.jsを追加します。そして高度な機能である「データの永続化」が必要になった時に初めてDexie.jsを導入します。この漸進的なアプローチにより、開発初期の複雑さを排除し、エラーの起きにくいスムーズな開発を実現します。

なぜこの3つなのか？（技術比較）

B - なぜBootstrapなのか？（Beautiful UI）

vs Tailwind CSS: Tailwindは本質的にビルド環境（Node.js）を前提としています。CDN版もありますが、ブラウザ上でCSSを動的生成するためパフォーマンスに悪影響を与えます。Bootstrapはコンパイル済みの静的CSSを読み込むだけで即座に動作します。
vs Bulma: Bulmaも美しいですがJSを含まないため、モーダルやドロップダウン等の動的コンポーネントを自作する必要があります。Bootstrapはそれらを内包し、さらに公式の「Bootstrap Icons」を1行で追加できる圧倒的な網羅性があります。
vs 軽量/クラスレスCSS（Pico CSSなど）: 手軽に見た目は整いますが、複雑なグリッドレイアウトやダッシュボード的なUIを組むには力不足です。

A - なぜAlpine.jsなのか？（Architecture & Logic）

vs Vanilla JS / jQuery: DOM操作と状態（データ）の同期を手動で行うと、コードがすぐにスパゲッティ化します。Alpine.jsはわずかな記述でVue.jsのようなデータ駆動UIを実現します。
vs React / Vue / Svelte: 現代の覇者ですが、これらはビルド環境が前提です。CDNで無理やり動かすこともできますが、ブラウザ上で重いトランスパイルが走り非効率です。Alpine.jsは最初から「ビルドなしでHTMLに直接書く」ために設計されています。
vs HTMX: HTMXは「サーバーと通信してHTMLを置換する」ための技術です。バックエンドを持たないローカルファーストなBAD Stackの用途とは思想が根本から異なります。

D - なぜDexie.jsなのか？（Database）

vs LocalStorage: 最も手軽ですが、容量上限（約5MB）が厳しく、文字列しか保存できません。検索・フィルタリング機能もありません。
vs 素のIndexedDB: ブラウザ標準の強力なDBですが、APIが古く複雑で、非同期処理が直感的に書けません。Dexie.jsはこれをモダンなPromiseベースに変換し、直感的なクエリを可能にします。
vs SQLite Wasm / Firebase: ブラウザ上でSQLiteを動かすWasmはファイルサイズが重く初期化が複雑です。FirebaseなどのBaaSは常時ネットワークとサーバーを必要とします。CDN1枚で完全オフラインかつ高速に動くDexie.jsがベストバランスです。

AI向けプロンプト

以下のプロンプトをChatGPTやClaude、Geminiなどに貼り付けることで、完璧なBAD Stackアプリを生成させることができます。

「bad is good」 — 名前はBADでも、その開発体験とパフォーマンスはGOODです。

BAD Stack이란?

BAD Stack은 다음 세 가지 기술의 머리글자를 딴, 가볍고 모던한 프론트엔드 기술 스택입니다.

Bootstrap - 아름답고 반응형인 UI 디자인
Alpine.js - HTML에 직접 작성할 수 있는 반응형 상태 관리
Dexie.js - IndexedDB를 활용한 강력한 로컬 데이터베이스

Node.js나 Vite와 같은 빌드 환경을 구축할 필요 없이 CDN에서 불러오기만 하면, 브라우저상에서 완결되는 로컬 퍼스트(Local-First) 웹 애플리케이션을 엄청나게 빠른 속도로 개발할 수 있습니다.

왜 BAD Stack인가?

CLI / GUI / Web 앱에는 없는 장점:
CLI 도구와 달리 터미널 없이 직관적인 UI를 제공합니다. GUI 앱처럼 OS별 빌드나 설치도 필요 없으며 HTML 파일을 브라우저에 던져넣기만 하면 됩니다. 또한 기존 웹 앱과 달리 서버 구축이 필요 없고, 데이터가 내 손안(브라우저 내부)에 머물기 때문에 프라이버시와 오프라인 동작이 완벽하게 보장됩니다.
생성형 AI(AI 에이전트) 시대의 압도적인 우위성:
최신 AI 코딩 에이전트조차도 복잡한 Node.js의 의존성 관계나 환경 의존적인 빌드 에러를 스스로 해결하는 것은 아직 어렵습니다. BAD Stack은 CDN을 이용한 단일 HTML 파일로 완결되기 때문에, AI가 ‘npm install 지옥’이나 환경 구축의 늪에 빠지는 것을 물리적으로 방지합니다. ‘AI가 만든 코드의 환경 구축이나 오류 해결을 인간이 돕는다’는 본말전도의 수고가 사라지고, 단 한 번의 프롬프트로 확실하게 작동하는 개인 도구를 얻을 수 있습니다.
점진적 도입 (Progressive Adoption):
UI 디자인에 있어서 애플리케이션 학습을 용이하게 하고 오류를 방지하기 위한 기법인 ‘점진적 공개(Progressive Disclosure)’의 개념을 시스템 아키텍처에 응용했습니다. 처음에는 Bootstrap만으로 정적인 목업을 구축하고, 일시적인 상태 관리가 필요해진 단계에서 Alpine.js를 추가합니다. 그리고 ‘데이터의 영속화’라는 고급 기능이 필요해졌을 때 비로소 Dexie.js를 도입합니다. 이러한 점진적인 접근을 통해 개발 초기의 복잡성을 제거하고, 오류가 발생하기 어려운 원활한 개발을 실현합니다.

왜 이 세 가지인가? (기술 비교)

B - 왜 Bootstrap인가? (Beautiful UI)

vs Tailwind CSS: Tailwind는 본질적으로 빌드 환경(Node.js)을 전제로 합니다. CDN 버전도 있지만 브라우저에서 동적으로 CSS를 생성하기 때문에 성능에 악영향을 미칩니다. Bootstrap은 컴파일된 정적 CSS를 불러오기만 하면 즉시 작동합니다.
vs Bulma: Bulma도 아름답지만 JS를 포함하지 않아 모달이나 드롭다운 등 동적 컴포넌트를 직접 작성해야 합니다. Bootstrap은 이를 내장하고 있으며, 공식 ‘Bootstrap Icons’를 단 한 줄로 추가할 수 있는 압도적인 포괄성을 가지고 있습니다.
vs 경량/클래스리스 CSS (Pico CSS 등): 겉모습은 쉽게 꾸밀 수 있지만, 복잡한 그리드 레이아웃이나 대시보드 형태의 UI를 구성하기에는 역부족입니다.

A - 왜 Alpine.js인가? (Architecture & Logic)

vs Vanilla JS / jQuery: DOM 조작과 상태(데이터) 동기화를 수동으로 하면 코드가 금세 스파게티처럼 꼬입니다. Alpine.js는 적은 코드량으로 Vue.js와 같은 데이터 주도 UI를 구현합니다.
vs React / Vue / Svelte: 현대의 패자들이지만 이들은 빌드 환경이 전제입니다. 억지로 CDN으로 구동할 수도 있지만, 브라우저 위에서 무거운 트랜스파일이 실행되어 비효율적입니다. Alpine.js는 처음부터 ‘빌드 없이 HTML에 직접 작성’하기 위해 설계되었습니다.
vs HTMX: HTMX는 ‘서버와 통신하여 HTML을 치환하는’ 기술입니다. 백엔드가 없는 로컬 퍼스트인 BAD Stack의 용도와는 사상부터 근본적으로 다릅니다.

D - 왜 Dexie.js인가? (Database)

vs LocalStorage: 가장 간편하지만 용량 상한(약 5MB)이 엄격하며 문자열만 저장할 수 있습니다. 검색 및 필터링 기능도 없습니다.
vs 순수 IndexedDB: 브라우저 표준의 강력한 DB이지만, API가 오래되고 복잡하여 비동기 처리를 직관적으로 작성하기 어렵습니다. Dexie.js는 이를 모던한 Promise 기반으로 변환하여 직관적인 쿼리를 가능하게 합니다.
vs SQLite Wasm / Firebase: 브라우저에서 SQLite를 구동하는 Wasm은 파일 크기가 무겁고 초기화가 복잡합니다. Firebase 등의 BaaS는 항상 네트워크와 서버를 필요로 합니다. CDN 링크 하나로 완전 오프라인에서 고속으로 작동하는 Dexie.js가 최고의 밸런스입니다.

AI용 프롬프트

아래의 프롬프트를 ChatGPT나 Claude, Gemini 등에 붙여넣기만 하면 완벽한 BAD Stack 앱을 생성하게 할 수 있습니다.

‘bad is good’ — 이름은 BAD이지만, 그 개발 경험과 성능은 GOOD입니다.