Builder Flow v4 — DaisyUI: wszystkie komponenty i style z jednego źródła

Builder Flow v4 to proces przekształcania luźnego pomysłu w działający prototyp strony/aplikacji, gdzie wszystkie komponenty UI i style pochodzą z DaisyUI — gotowego, sprawdzonego zestawu 30+ komponentów. Żadnego ręcznego CSS, żadnego wymyślania kół na nowo. Każdy przycisk, karta, tabela, navbar to gotowa klasa DaisyUI.

Kluczowe różnice względem v3:

1. DaisyUI = jedyny wybór — bez porównywania frameworków, bez wyboru biblioteki. DaisyUI przez CDN, zero konfiguracji, 30+ gotowych komponentów
2. Wszystkie style = DaisyUI — kolory, spacing, typografia, komponenty, responsywność. Żadnego CSS poza klasami DaisyUI i Tailwind utility
3. Motywy = data-theme — 30+ wbudowanych motywów, zmiana wyglądu całego prototypu przez jeden atrybut HTML

Proces dzieli się na 6 faz:

1. Brainstorming — superpowers SDD zadaje pytania, owner odpowiada, powstaje precyzyjny brief
2. Specyfikacja — superpowers SDD generuje specyfikację biznesową, techniczną i wizualną
3. Design System — DaisyUI theme — wybór motywu, konfiguracja CDN, paleta kolorów projektu
4. HTML mockupy — wszystkie strony z gotowych komponentów DaisyUI, spójne, z mockowanymi danymi
5. Prototyp do klikania — człowiek przegląda i zatwierdza
6. Backend — dopiero po zatwierdzeniu prototypu, z tym samym DaisyUI

Faza 0: Brainstorming — superpowers SDD × Owner

Zanim powstanie jakakolwiek specyfikacja, superpowers SDD prowadzi wielopytaniową wymianę z ownerem produktu. Celem jest wyciągnięcie maksimum precyzji, zanim opencode zacznie cokolwiek generować.

Krok 0.1: Init — CEO tworzy brief brainstormingowy

CEO tworzy strukturę pytań, które superpowers zada ownerowi:

mkdir -p /root/projects/<projekt>/.superpowers/sdd

cat > /root/projects/<projekt>/.superpowers/sdd/brainstorming-brief.md << 'EOF'
# Brainstorming — wielopytaniowa wymiana

## Cel
Przeprowadź szczegółową wymianę pytań i odpowiedzi z ownerem produktu, żeby precyzyjnie zdefiniować projekt. To jest NAJWAŻNIEJSZA faza — im więcej pytań, tym mniej błędów potem.

## Kategorie pytań (wymagane wszystkie)

### 1. Business & Cel (min. 5 pytań)
- Jaki problem rozwiązuje ta aplikacja?
- Dla kogo dokładnie jest? (wiek, zawód, potrzeby)
- Co jest najważniejsze: szybkość, wygląd, funkcje, niezawodność?
- Jakie znasz alternatywy? Co w nich nie działa?
- Jakie są kryteria sukcesu?

### 2. Użytkownicy i Persony (min. 4 pytania)
- Ile typów użytkowników? (admin, klient, gość, moderator)
- Co każdy typ użytkownika robi najczęściej?
- Jakie są uprawnienia?
- Czy użytkownicy są zalogowani czy anonimowi?

### 3. Funkcjonalności — priorytetyzacja (min. 6 pytań)
- Jaka jest JEDNA najważniejsza funkcja? (MVP)
- Jakie funkcje są "nice to have"?
- Czego NIE robi ta aplikacja? (anti-scope)
- Jakie są integracje? (API, płatności, email, SMS, webhooki)
- Czy są deadline/y?
- Które funkcje mogą poczekać do v2?

### 4. UX i Design (min. 4 pytania)
- Jakie aplikacje podobają Ci się wizualnie? (linki, screengraby)
- Jaki charakter ma mieć aplikacja? (poważny, zabawny, minimalistyczny, bogaty)
- Czy preferujesz dark mode czy light mode?
- Czy są elementy brandingowe? (logo, kolory firmy, font)

### 5. Technologia i hosting (min. 3 pytania)
- Czy masz preferencje technologiczne?
- Gdzie ma być hostowane?
- Czy potrzebujesz backendu czy może być statycznie?

### 6. Ograniczenia i ryzyka (min. 3 pytania)
- Jakie są największe ryzyka?
- Co jeśli projekt się nie uda?
- Czy są regulacje? (RODO, HIPAA, GDPR)

## Output
Plik brainstorming-report.md z wszystkimi pytaniami i odpowiedziami.
EOF

Krok 0.2: Uruchom brainstorming

cd /root/projects/<projekt>
opencode run --prompt '
Przeczytaj .superpowers/sdd/brainstorming-brief.md.

Wykonaj brainstorming z ownerem:
1. Zadaj pytanie z kategorii 1 (Business & Cel)
2. Czekaj na odpowiedź
3. Jeśli odpowiedź jest ogólnikowa — zadaj pytanie doprecyzowujące
4. Przejdź do następnego pytania
5. Po wyczerpaniu kategorii 1, przejdź do kategorii 2

Zadaj WSZYSTKIE pytania ze wszystkich 6 kategorii.
Po zakończeniu zapisz pełny raport do .superpowers/sdd/brainstorming-report.md.

Uwaga: to jest interaktywna sesja — zadajesz pytanie, ja odpowiadam.
' --auto

Krok 0.3: Przykładowy przebieg

superpowers: Jaki problem rozwiązuje ta aplikacja?
Owner:      Pacjenci nie wiedzą kiedy mają sesje normobarii.

superpowers: Rozumiem. Czyli chodzi o harmonogram. A jak to teraz działa?
Owner:      Dzwonią do recepcji, recepcja sprawdza w Excelu, mówi im.

superpowers: Excel — czyli jest już jakiś system. Czy chcesz go zastąpić, czy zrobić 
            coś równoległego?
Owner:      Zastąpić. Excel jest dla recepcji, nie dla pacjentów.

superpowers: Czyli aplikacja ma być dla pacjentów (self-service), a nie dla recepcji?
Owner:      Dokładnie. Aplikacja tylko dla pacjentów.
            ...

Krok 0.4: Weryfikacja

# Sprawdź czy są konkretne odpowiedzi (nie "nie wiem")
grep -c "nie wiem\|nie jestem pewien\|trudno powiedzieć" \
  /root/projects/<projekt>/.superpowers/sdd/brainstorming-report.md || true

Faza 1: Specyfikacja przez superpowers SDD

Po brainstromingu, mamy precyzyjny brief. Teraz superpowers generuje 3 specyfikacje.

Krok 1.1: Specyfikacja biznesowa (phase-1)

cat > .superpowers/sdd/phase-1-brief.md << 'EOF'
# Faza 1: Specyfikacja biznesowa

## Cel
Na podstawie brainstorming-report.md, stwórz specyfikację biznesową.

## Wymagane sekcje
1. **Persona** — typy użytkowników z konkretnymi cechami
2. **User stories** — priorytetyzowane (P0, P1, P2)
3. **MVP scope** — minimalna wersja do uruchomienia
4. **Przepływ biznesowy** — krok po kroku
5. **Metryki sukcesu** — konkretne liczby

## Output
Plik phase-1-report.md
EOF

opencode run --prompt 'Przeczytaj brainstorming-report.md i phase-1-brief.md. Wygeneruj phase-1-report.md.' --auto

Krok 1.2: Specyfikacja techniczna (phase-2)

cat > .superpowers/sdd/phase-2-brief.md << 'EOF'
# Faza 2: Specyfikacja techniczna

## Cel
Na podstawie phase-1-report.md, zdefiniuj architekturę techniczną.

## Wymagane sekcje
1. **Struktura URL-i** — lista wszystkich ścieżek
2. **Model danych** — encje, relacje, pola
3. **API endpoints** — REST, metody, request/response
4. **Stack** — framework, baza, hosting

## Output
Plik phase-2-report.md
EOF

opencode run --prompt 'Przeczytaj phase-1-report.md i phase-2-brief.md. Wygeneruj phase-2-report.md.' --auto

Krok 1.3: Specyfikacja wizualna — lista stron (phase-3)

cat > .superpowers/sdd/phase-3-brief.md << 'EOF'
# Faza 3: Specyfikacja wizualna

## Cel
Na podstawie phase-1-report.md i phase-2-report.md, stwórz listę wszystkich stron.

## Wymagane sekcje
Dla KAŻDEJ strony:
1. **URL** — ścieżka
2. **Cel strony** — co użytkownik tu robi
3. **Komponenty DaisyUI** — lista gotowych komponentów (navbar, karta, tabela, formularz, modal, sidebar, breadcrumbs, pagination, badge, alert, dropdown, tabs, accordion, tooltip, progress, loading, avatar, chat)
4. **Dane mockowe** — przykładowe dane
5. **Layout** — układ strony (container, grid, flex)
6. **Akcje użytkownika** — co może kliknąć, wpisać, przeciągnąć

## Output
Plik phase-3-report.md — lista wszystkich stron z komponentami DaisyUI.
EOF

opencode run --prompt 'Przeczytaj phase-1-report.md, phase-2-report.md i phase-3-brief.md. Wygeneruj phase-3-report.md z listą stron.' --auto

Faza 2: Design System — DaisyUI theme

DaisyUI ma wbudowanych 30+ motywów. Nie trzeba pisać ani linii CSS. Wybieramy motyw i konfigurujemy CDN.

Krok 2.1: Prezentacja motywów

CEO pokazuje użytkownikowi dostępne motywy DaisyUI i pyta o preferencje:

[CEO] DaisyUI ma 30+ wbudowanych motywów. Oto rekomendowane dla tego projektu:

| Motyw | Charakter | Dla kogo |
|-------|-----------|----------|
| light | Jasny, czysty, profesjonalny | Domyślny, bezpieczny wybór |
| dark | Ciemny, nowoczesny, technologiczny | Aplikacje tech, dashboardy |
| emerald | Zielony, naturalny, świeży | Wellness, zdrowie, medycyna |
| cupcake | Ciepły, przyjazny, delikatny | Dla pacjentów, UX friendly |
| corporate | Biznesowy, stonowany, elegancki | B2B, admin, enterprise |
| forest | Leśny, głęboki, organiczny | Naturals, eco, outdoor |
| winter | Zimny, niebieski, sterylny | Medycyna, laboratoria, precise |
| autumn | Ciepły, jesienny, przytulny | Wellness, SPA, relaks |
| acid | Neonowy, odważny, kreatywny | Gaming, młodzież, rozrywka |
| synthwave | Neon retro, lata 80 | Kreatywne, niestandardowe |

Który motyw wybierasz? Jeśli nie masz preferencji — rekomenduję emerald (wellness/zdrowie).

Krok 2.2: Zapisz wybór w konfiguracji

# Zapisz wybrany motyw
echo "data-theme: emerald" > /root/projects/<projekt>/.superpowers/sdd/selected-theme.txt

Krok 2.3: Custom theme (jeśli potrzeba)

Jeśli żaden gotowy motyw nie pasuje, DaisyUI pozwala zdefiniować własny przez tailwind.config.js:

<script>
  tailwind.config = {
    daisyui: {
      themes: [
        {
          nazwa-projektu: {
            "primary": "#2563eb",
            "primary-content": "#ffffff",
            "secondary": "#64748b",
            "secondary-content": "#ffffff",
            "accent": "#f59e0b",
            "accent-content": "#ffffff",
            "neutral": "#1e293b",
            "neutral-content": "#ffffff",
            "base-100": "#ffffff",
            "base-200": "#f8fafc",
            "base-300": "#e2e8f0",
            "base-content": "#1e293b",
            "info": "#3b82f6",
            "success": "#10b981",
            "warning": "#f59e0b",
            "error": "#ef4444",
          },
        },
      ],
    },
  }
</script>

Krok 2.4: Szablon bazowy HTML

CEO tworzy szablon HTML, który będzie używany przez wszystkie strony:

cat > /var/www/projects/<projekt>/base.html << 'EOF'
<!DOCTYPE html>
<html lang="pl" data-theme="emerald">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PROJEKT — Nazwa Strony</title>
  <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

<!-- Navbar -->
<div class="navbar bg-base-100 shadow-sm sticky top-0 z-50">
  <div class="flex-1">
    <a href="/projekt/" class="btn btn-ghost text-xl">NazwaProjektu</a>
  </div>
  <div class="flex-none">
    <ul class="menu menu-horizontal px-1">
      <li><a href="/projekt/dashboard/" class="active">Dashboard</a></li>
      <li><a href="/projekt/sessions/">Sesje</a></li>
      <li><a href="/projekt/profile/">Profil</a></li>
      <li><a href="/projekt/settings/">Ustawienia</a></li>
    </ul>
  </div>
</div>

<!-- Content -->
<main class="container mx-auto p-6">
  <!-- STRONA: treść właściwa -->
</main>

<!-- Footer -->
<footer class="footer footer-center p-4 bg-base-200 text-base-content/60 mt-8">
  <p>Prototyp v4 — DaisyUI | data-theme="emerald"</p>
</footer>

</body>
</html>
EOF

Faza 3: HTML mockupy z DaisyUI

Teraz opencode generuje wszystkie strony, używając wyłącznie gotowych klas DaisyUI. Żadnego ręcznego CSS, żadnych inline style, żadnych hexów.

Krok 3.1: Pełna lista komponentów DaisyUI

Zanim opencode zacznie, CEO wrzuca mu do prompta pełną listę dostępnych komponentów:

Krok 3.2: Tailwind Utility — dozwolone klasy

Oprócz komponentów DaisyUI, opencode może używać Tailwind utility classes dla layoutu i spacingu:

<!-- Layout -->
<div class="container mx-auto p-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="flex justify-between items-center">
<div class="flex flex-col lg:flex-row gap-6">

<!-- Spacing -->
p-4, p-6, p-8, px-4, py-4
m-4, mx-auto, mb-6, mt-8
gap-4, gap-6, gap-8
space-y-4, space-x-4

<!-- Responsywność -->
grid-cols-1 md:grid-cols-2 lg:grid-cols-3
hidden md:block
w-full, w-1/2, max-w-md, max-w-lg

<!-- Kolory (tylko DaisyUI semantic) -->
text-base-content, text-primary, text-secondary
bg-base-100, bg-base-200, bg-primary
border-base-300, border-primary

<!-- Inne -->
shadow-sm, shadow-md, shadow-lg
rounded-lg, rounded-box
overflow-x-auto
sticky top-0 z-50

Krok 3.3: Generuj strony z DaisyUI

opencode run --prompt '
Stwórz prototyp HTML dla projektu <projekt> w katalogu /var/www/projects/<projekt>/.

ZASADY — WAŻNE:
1. Framework: TYLKO DaisyUI + Tailwind CSS (przez CDN)
2. Każda strona ładuje:
   <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet">
   <script src="https://cdn.tailwindcss.com"></script>
3. Używaj WYŁĄCZNIE gotowych klas DaisyUI z listy poniżej. NIE używaj inline style, NIE używaj własnego CSS, NIE pisz hexów.
4. Do layoutu używaj Tailwind utility: container mx-auto, grid grid-cols-*, flex, gap-*, p-*, m-*
5. Atrybut data-theme na <html> z wybranym motywem

DOZWOLONE KOMPONENTY DAISYUI:
- navbar, card card-bordered, btn btn-primary/btn-secondary/btn-ghost/btn-outline/btn-soft, btn-sm/btn-xs/btn-lg, btn-circle, btn-block
- table table-zebra, table-pin-rows, table-xs/sm/md/lg
- input input-bordered, textarea textarea-bordered, select select-bordered, checkbox, radio, toggle
- badge badge-success/badge-warning/badge-error/badge-info/badge-neutral/badge-primary/badge-secondary/badge-accent/badge-ghost
- alert alert-info/alert-success/alert-warning/alert-error
- modal (dialog), dropdown (details), tabs tabs-bordered, collapse collapse-arrow
- breadcrumbs, loading loading-spinner, progress progress-primary
- avatar, chat chat-start/chat-end, stat, tooltip, indicator
- join, kbd, countdown, timeline, steps, skeleton, carousel, btm-nav

DOZWOLONE KOLORY (TYLKO semanticzne):
- text-base-content, text-primary, text-secondary, text-accent, text-success, text-warning, text-error
- bg-base-100, bg-base-200, bg-base-300, bg-primary, bg-secondary, bg-accent, bg-success, bg-warning, bg-error
- border-base-300, border-primary

Na podstawie .superpowers/sdd/phase-3-report.md, wygeneruj:

/var/www/projects/<projekt>/
├── index.html               — Strona główna
├── dashboard/index.html     — Dashboard
├── sessions/index.html      — Lista sesji
├── sessions/123/index.html — Szczegóły sesji
├── profile/index.html       — Profil
├── settings/index.html      — Ustawienia

Wszystkie linki wewnętrzne prowadzą do innych stron prototypu.
Realistyczne dane mockowe.
' --auto

Krok 3.4: Przykład — strona dashboard z DaisyUI

<!DOCTYPE html>
<html lang="pl" data-theme="emerald">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard — NormoCare</title>
  <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

<!-- Navbar DaisyUI -->
<div class="navbar bg-base-100 shadow-sm sticky top-0 z-50">
  <div class="flex-1">
    <a href="/normo/" class="btn btn-ghost text-xl">NormoCare</a>
  </div>
  <div class="flex-none">
    <ul class="menu menu-horizontal px-1">
      <li><a href="/normo/dashboard/" class="active">Dashboard</a></li>
      <li><a href="/normo/sessions/">Sesje</a></li>
      <li><a href="/normo/profile/">Profil</a></li>
      <li>
        <details class="dropdown">
          <summary class="btn btn-ghost">Więcej</summary>
          <ul class="dropdown-content menu bg-base-100 rounded-box z-50 shadow-sm">
            <li><a href="/normo/settings/">Ustawienia</a></li>
            <li><a href="/normo/help/">Pomoc</a></li>
          </ul>
        </details>
      </li>
    </ul>
  </div>
</div>

<main class="container mx-auto p-6">

  <!-- Breadcrumbs -->
  <div class="breadcrumbs text-sm mb-4">
    <ul>
      <li><a href="/normo/">Strona główna</a></li>
      <li>Dashboard</li>
    </ul>
  </div>

  <!-- Nagłówek -->
  <div class="flex justify-between items-center mb-6">
    <h1 class="text-3xl font-bold">Dashboard</h1>
    <button class="btn btn-primary">+ Dodaj sesję</button>
  </div>

  <!-- Statystyki (karty DaisyUI z komponentem stat) -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
    <div class="card card-bordered bg-base-100 shadow-sm">
      <div class="card-body">
        <div class="stat">
          <div class="stat-title">Ukończone sesje</div>
          <div class="stat-value text-primary">12</div>
          <div class="stat-desc">z 20 zaplanowanych</div>
        </div>
        <progress class="progress progress-primary w-full" value="60" max="100"></progress>
      </div>
    </div>
    <div class="card card-bordered bg-base-100 shadow-sm">
      <div class="card-body">
        <div class="stat">
          <div class="stat-title">Łączny czas</div>
          <div class="stat-value text-secondary">24h</div>
          <div class="stat-desc">w tym tygodniu: 4h</div>
        </div>
      </div>
    </div>
    <div class="card card-bordered bg-base-100 shadow-sm">
      <div class="card-body">
        <div class="stat">
          <div class="stat-title">Compliance</div>
          <div class="stat-value text-accent">85%</div>
          <div class="stat-desc flex items-center gap-1">
            <span class="badge badge-success badge-sm">+5%</span>
            vs poprzedni miesiąc
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Tabela sesji (DaisyUI table-zebra) -->
  <div class="card card-bordered bg-base-100 shadow-sm">
    <div class="card-body">
      <h2 class="card-title">Ostatnie sesje</h2>
      <div class="overflow-x-auto">
        <table class="table table-zebra">
          <thead>
            <tr>
              <th>Data</th>
              <th>Czas</th>
              <th>Ciśnienie</th>
              <th>Wynik</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>2026-07-20</td>
              <td>60 min</td>
              <td>1500 hPa</td>
              <td>Bardzo dobry</td>
              <td><span class="badge badge-success">Ukończona</span></td>
              <td><button class="btn btn-ghost btn-sm">Szczegóły</button></td>
            </tr>
            <tr>
              <td>2026-07-18</td>
              <td>45 min</td>
              <td>1500 hPa</td>
              <td>Dobry</td>
              <td><span class="badge badge-success">Ukończona</span></td>
              <td><button class="btn btn-ghost btn-sm">Szczegóły</button></td>
            </tr>
            <tr>
              <td>2026-07-16</td>
              <td>60 min</td>
              <td>1500 hPa</td>
              <td>Średni</td>
              <td><span class="badge badge-warning">Przerwana</span></td>
              <td><button class="btn btn-ghost btn-sm">Szczegóły</button></td>
            </tr>
            <tr>
              <td>2026-07-14</td>
              <td>30 min</td>
              <td>1500 hPa</td>
              <td>Słaby</td>
              <td><span class="badge badge-error">Anulowana</span></td>
              <td><button class="btn btn-ghost btn-sm">Szczegóły</button></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Alert informacyjny -->
  <div class="alert alert-info mt-6">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
    <span>Następna sesja: 2026-07-22, 10:00. Nie zapomnij potwierdzić obecności.</span>
  </div>

</main>

<!-- Footer -->
<footer class="footer footer-center p-4 bg-base-200 text-base-content/60 mt-8">
  <p>Prototyp v4 — DaisyUI | data-theme="emerald"</p>
</footer>

</body>
</html>

Krok 3.5: Weryfikacja spójności

# 1. Sprawdź czy wszystkie strony ładują DaisyUI
for f in $(find /var/www/projects/<projekt>/ -name 'index.html'); do
  has_daisy=$(grep -c 'daisyui' "$f" || true)
  [ "$has_daisy" -eq 0 ] && echo "❌ $f — brak DaisyUI"
done

# 2. Sprawdź czy są twarde kolory (hex/RGB) — powinno być 0
for f in $(find /var/www/projects/<projekt>/ -name 'index.html'); do
  hard=$(grep -cE '#[0-9a-fA-F]{3,6}' "$f" || true)
  [ "$hard" -gt 2 ] && echo "⚠️  $f — $hard hexów (użyj klas DaisyUI: text-primary, bg-base-100)"
done

# 3. Sprawdź czy któryś plik ma własny CSS lub inline style
for f in $(find /var/www/projects/<projekt>/ -name 'index.html'); do
  inline=$(grep -c 'style="' "$f" || true)
  [ "$inline" -gt 0 ] && echo "⚠️  $f — $inline inline style (zastąp klasami DaisyUI)"
  style_tag=$(grep -c '<style>' "$f" || true)
  [ "$style_tag" -gt 0 ] && echo "⚠️  $f — ma własny <style> tag (usuń, użyj DaisyUI)"
done

# 4. Sprawdź HTTP 200
for path in /dashboard /sessions /sessions/123 /profile /settings; do
  code=$(curl -s -o /dev/null -w "%{http_code}" --max-time 5 "https://10s.pl/<projekt>$path/")
  echo "$path → HTTP $code"
done

Faza 4: Prototyp do klikania

Krok 4.1: Raport do zatwierdzenia

hermes kanban --board convertere comment <card-id> \
  "[CEO] ✅ Prototyp v4 gotowy do klikania:
Motyw: emerald (DaisyUI)
Stack: DaisyUI + Tailwind CSS przez CDN

Strony:
- https://10s.pl/<projekt>/
- https://10s.pl/<projekt>/dashboard/
- https://10s.pl/<projekt>/sessions/
- https://10s.pl/<projekt>/sessions/123/
- https://10s.pl/<projekt>/profile/
- https://10s.pl/<projekt>/settings/

Weryfikacja:
✅ Wszystkie strony HTTP 200
✅ Wszystkie linki wewnętrzne działają
✅ Brak hexów/twardych kolorów
✅ Brak własnego CSS — tylko DaisyUI
✅ Zmiana wyglądu = zmiana data-theme na <html>
⏳ Czekam na zatwierdzenie przed backendem"

Krok 4.2: Iteracja — zmiana motywu

To jest supermoc v4. Użytkownik mówi "zmień na dark":

# 1 komenda zmienia CAŁY prototyp
sed -i 's/data-theme="emerald"/data-theme="dark"/' /var/www/projects/<projekt>/*/index.html
sed -i 's/data-theme="emerald"/data-theme="dark"/' /var/www/projects/<projekt>/index.html

# Weryfikacja — wszystkie strony w nowym motywie
curl -s https://10s.pl/<projekt>/dashboard/ | grep -o 'data-theme="[^"]*"'
# → data-theme="dark"

Bez zmiany HTML (poza 1 atrybutem), bez regeneracji, bez błędów.

Faza 5: Backend z DaisyUI

Backend używa tego samego DaisyUI — żadnych nowych zależności CSS.

Krok 5.1: Kopiuj szablon

# Skopiuj gotową stronę jako szablon bazowy
cp /var/www/projects/<projekt>/dashboard/index.html \
  /root/projects/<projekt>/src/templates/base.html

# Wyciągnij navbar i footer do osobnych plików (w zależności od frameworka)

Krok 5.2: Implementacja z DaisyUI

opencode run --prompt '
Zaimplementuj backend dla projektu <projekt>.

ZACHOWAJ DAISYUI:
1. Użyj TEGO SAMEGO DaisyUI + Tailwind co prototyp
2. Użyj TYCH SAMYCH klas: navbar, card, btn, table table-zebra, input input-bordered, badge, alert, modal, dropdown, tabs, progress, stat, breadcrumbs
3. ŻADNYCH nowych styli CSS — tylko DaisyUI
4. Szablon bazowy: base.html z navbar, footer i DaisyUI CDN
5. data-theme to samo co w prototypie

Na podstawie .superpowers/sdd/phase-2-report.md:
- API endpoints
- Baza danych
- Integracja frontend-backend

Po implementacji: zweryfikuj HTTP 200 dla wszystkich stron.
' --auto

Porównanie v1 → v2 → v3 → v4

Playbook: 30-minutowy Builder Flow v4

Przygotowanie (2 min):

• [ ] mkdir -p /root/projects/<projekt> && cd $_ && git init
• [ ] Stwórz kanban task

Brainstorming (5 min):

• [ ] Stwórz brainstorming-brief.md
• [ ] Uruchom opencode z pytaniami
• [ ] Odpowiedz na 20+ pytań
• [ ] Zapisz brainstorming-report.md

Specyfikacja (8 min):

• [ ] superpowers SDD → phase-1, phase-2, phase-3

Design System — DaisyUI (2 min):

• [ ] Wybierz motyw (rekomendacja: emerald dla wellness, light dla biznesu)
• [ ] Stwórz base.html z CDN DaisyUI
• [ ] Zapisz data-theme

HTML mockupy (10 min):

• [ ] Uruchom opencode → wszystkie strony z DaisyUI
• [ ] Ustaw uprawnienia

Weryfikacja (3 min):

• [ ] Sprawdź HTTP 200
• [ ] Sprawdź linki
• [ ] Sprawdź spójność: brak hexów, brak inline style, brak własnego CSS
• [ ] Zgłoś użytkownikowi

Ryzyka i wyzwania

Ryzyko 1: Opencode pisze własny CSS zamiast DaisyUI

Najczęstszy błąd — opencode dodaje style="color: #333" zamiast class="text-base-content".

Rozwiązanie: W promptu CEO dodaje: "NIE używaj style="" ani hexów. NIE twórz własnych klas CSS. Używaj TYLKO klas DaisyUI. Jeśli nie wiesz jak zrobić coś w DaisyUI — pomiń to, zamiast dodawać własny CSS."

Ryzyko 2: Opencode nie zna DaisyUI

kimi-k2-7-code może nie mieć w treningu najnowszej wersji DaisyUI.

Rozwiązanie: CEO wkleja do prompta pełną listę komponentów (patrz sekcja 3.1). Daje to opencode dokładną mapę dostępnych klas.

Ryzyko 3: CDN DaisyUI nie działa

Jeśli serwer nie ma dostępu do internetu, strony się nie ładują.

Rozwiązanie: Przed generowaniem sprawdź: curl -s -o /dev/null https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.min.css. Jeśli nie działa → użyj lokalnego CDN lub npm.

Ryzyko 4: data-theme nie działa na podstronach

Jeśli <html> ma data-theme, ale jakaś podstrona go nadpisuje — motyw nie jest spójny.

Rozwiązanie: CEO weryfikuje: grep -r 'data-theme' /var/www/projects/<projekt>/. Wszystkie strony powinny mieć ten sam motyw.

Ryzyko 5: DaisyUI v5 vs v4 różnice

DaisyUI zmienia API między wersjami. v4 → v5 zmieniło system theme.

Rozwiązanie: CEO sprawdza wersję: curl -s https://cdn.jsdelivr.net/npm/daisyui@5/package.json | grep '"version"'. Prompt używa wersji z CDN.

Mierzenie sukcesu