/dev/portal-kafelki

Półka kafelków

Każdy komponent na realnych danych z kolekcji. Miejsca na zdjęcia i logo są slotami .p-media z etykietą wymiaru - dopóki pliku nie ma, widać czego brakuje.

01 / podstawy

Kafel, siatka i nagłówek sekcji

Trzy klocki, z których składa się każda strona portalu: nagłówek sekcji, kafel bazowy i siatka, która łamie się sama.

Moduły ruchu

Kafel z obrazem

Slot 16:9 na górze, treść pod spodem. Cały kafel jest klikalny.

Kafel na tonie

Ten sam kafel bez obrazu, o ton niżej. Separacja tłem, nie obrysem.

Slot domyślny: tu strona wkłada, co chce.

Kafel ciemny

Ten sam komponent na czerni - kolory schodzą z tokenów, nie z literałów.

02 / liczby

Metryki katalogu

Liczby policzone z kolekcji przy buildzie. Licznik odlicza je od zera modułem LicznikStatystyk, a pełna wartość siedzi w HTML od razu.

Narzędzia

38
kart w katalogu

Skille

142
gotowych do skopiowania

Lekcje PL

28

w ścieżkach nauki

03 / katalog

Karty narzędzi

Logo 48, model cenowy chipem, WIDOCZNA data weryfikacji ceny i dwie alternatywy. Trasy i slugi bez zmian.

Cały katalog

04 / skille

Karty skilli

Rola chipem, zmienne w mono, CTA Sprawdź skill. Kopiowanie jest na stronie skilla, nie na kafelku.

Wszystkie skille

05 / nauka

Lekcje i questy

Lekcja ma okładkę 3:2 i czas czytania liczony z treści. Quest pokazuje tier tonem: brąz to sam ton tła, złoto to limonka.

Darmowa 4 min czytania

Co to jest Claude i co naprawdę potrafi

Dowiesz się, czym Claude różni się od innych AI, w jakich formach istnieje (czat, aplikacja, terminal) i do jakich zadań nadaje się najlepiej - żebyś od pierwszego dnia używał go do właściwych rzeczy.

Darmowa 5 min czytania

Mental model LLM - jak naprawdę myśli AI

Zrozumiesz, jak naprawdę działa model językowy - bez matematyki - żebyś przestał zgadywać, czemu AI raz trafia, a raz pewnym tonem zmyśla, i zaczął nim świadomie sterować.

Brąz Micro-quest

Canva: gotowa grafika na social media w 20 minut

Zaprojektuj jedna grafike na social media z szablonu Canva, podmieniajac tekst i zdjecie, i wyeksportuj gotowy plik.

XP
50
Kroki
5
  1. Zaloz darmowe konto na canva.com (nie potrzebujesz karty platniczej).
  2. Wybierz szablon pod konkretny format (np. post na Instagram albo baner LinkedIn).
  3. Podmien tekst naglowka na wlasny i zmien co najmniej jedno zdjecie/element graficzny.

i jeszcze 2 do końca

Złoto Quest

Capstone Budowniczy: wdrożona automatyzacja jako usługa

Zbuduj działającą automatyzację realnego procesu - lead wpada z formularza, ląduje w CRM i dostaje automatyczny follow-up - a potem wyceń ją jako usługę.

XP
500
Kroki
7
  1. Zaprojektuj przepływ na kartce: źródło leada (formularz), gdzie ląduje (CRM), co wysyła follow-up i po jakim czasie lub warunku.
  2. Postaw wejście: formularz (Google Forms lub Tally, darmowe) albo webhook, który zbiera dane leada - imię, mail, potrzeba.
  3. Zbuduj automatyzację w Make (darmowy plan) lub n8n (self-host za darmo): lead z formularza trafia do CRM (Airtable / Arkusze Google / HubSpot free) jako nowy rekord.

i jeszcze 4 do końca

06 / cmentarz

Nagrobki

Logo w skali szarości, daty w mono. Początek życia narzędzia nie jest zmyślany - dopóki strona go nie poda, karta pisze wprost, że jest nieznany.

Cały cmentarz

Tome

żył początek nieznany

Po pivocie ogloszonym w pazdzierniku 2024 (zejscie z prezentacji w strone sprzedazy i redukcja okolo jednej trzeciej zalogi) i potwierdzeniu wygaszenia w marcu 2025, Tome zamknelo produkt prezentacji 30 kwietnia 2025 - przestal przyjmowac nowe prezentacje, a dane uzytkownikow bez wczesniejszego eksportu zostaly utracone (VentureBeat, PageOn.ai, Deckary).

Zamiast tego: Gamma

Adept (ACT-1)

żył początek nieznany

28 czerwca 2024 Amazon oglosil zatrudnienie wspolzalozycieli Adept (CEO David Luan, Augustus Odena, Maxwell Nye, Erich Elsen, Kelsey Szot) do swojej jednostki AGI oraz niewylaczna licencje na modele, technologie agentowa i czesc danych firmy (CNBC 28.06.2024, TechCrunch 28.06.2024, GeekWire 28.06.2024).

wariant --os (oś czasu)

Pi (Inflection AI)

żył początek nieznany

19 marca 2024 Microsoft oglosil zatrudnienie wspolzalozycieli Inflection AI (Mustafa Suleyman, Karen Simonyan) i wiekszosci zespolu do nowej jednostki Microsoft AI, placac przy tym 650 mln USD za licencje na technologie (Bloomberg 21.03.2024, TechCrunch 19.03.2024, Forbes 19.03.2024).

Zamiast tego: Claude

07 / cytat

Cytat

Bez zmyślonych nazwisk: dopóki nie ma opinii z bety, komponent pokazuje wprost, że to miejsce na nią czeka.

miejsce na opinię z bety

miejsce na podpis

beta zamknięta

08 / hero

Hero z obrazem

Dwa układy na tych samych propsach. Wysokość bierze się z treści - żadnego 100vh.

układ: obraz-prawo

Naucz się AI na własnych plikach

Ścieżki, questy i katalog narzędzi w jednym miejscu. Wszystko po polsku i z datą ostatniej weryfikacji.

Zacznij naukę Zobacz katalog

układ: obraz-tło, ton ciemny

Katalog, który sam się pilnuje

Każda karta ma datę weryfikacji ceny i statusu. Martwe narzędzia trafiają na cmentarz razem z zamiennikiem.

Katalog narzędzi

09 / loga

Chmura logotypów

Sześć slotów 96x96 z nazwami prawdziwych narzędzi z katalogu. Pliki logo jeszcze nie istnieją, więc sloty są puste - i widać to wprost.

ChatGPT Claude Code Claude Codex Cursor DeepSeek

ten sam zestaw jako taśma (moduly/Marquee)

ChatGPT Claude Code Claude Codex Cursor DeepSeek

10 / CTA

Pasy z wezwaniem

Dwa tony: czerń z limonkowym przyciskiem i limonka z czarnym. Nic poza paletą.

newsletter

Jedna wiadomość w tygodniu, same konkrety

Co się zmieniło w narzędziach, co przestało działać i co warto zrobić w tę sobotę.

Zapisz się Zobacz archiwum

Zacznij od pierwszego questu

Dwadzieścia minut i masz gotowy artefakt, nie notatki.

Wybierz quest

11 / zakladki

Zakładki

Bez JS wszystkie panele są widoczne jeden pod drugim. Z JS to tablist ze strzałkami i hashem w adresie.

Katalog Nauka Cmentarz

Katalog

Nauka

Darmowa 4 min czytania

Co to jest Claude i co naprawdę potrafi

Dowiesz się, czym Claude różni się od innych AI, w jakich formach istnieje (czat, aplikacja, terminal) i do jakich zadań nadaje się najlepiej - żebyś od pierwszego dnia używał go do właściwych rzeczy.

Darmowa 5 min czytania

Mental model LLM - jak naprawdę myśli AI

Zrozumiesz, jak naprawdę działa model językowy - bez matematyki - żebyś przestał zgadywać, czemu AI raz trafia, a raz pewnym tonem zmyśla, i zaczął nim świadomie sterować.

Cmentarz

Tome

żył początek nieznany

Po pivocie ogloszonym w pazdzierniku 2024 (zejscie z prezentacji w strone sprzedazy i redukcja okolo jednej trzeciej zalogi) i potwierdzeniu wygaszenia w marcu 2025, Tome zamknelo produkt prezentacji 30 kwietnia 2025 - przestal przyjmowac nowe prezentacje, a dane uzytkownikow bez wczesniejszego eksportu zostaly utracone (VentureBeat, PageOn.ai, Deckary).

Zamiast tego: Gamma

Adept (ACT-1)

żył początek nieznany

28 czerwca 2024 Amazon oglosil zatrudnienie wspolzalozycieli Adept (CEO David Luan, Augustus Odena, Maxwell Nye, Erich Elsen, Kelsey Szot) do swojej jednostki AGI oraz niewylaczna licencje na modele, technologie agentowa i czesc danych firmy (CNBC 28.06.2024, TechCrunch 28.06.2024, GeekWire 28.06.2024).

12 / galeria

Galeria slotów

Cztery puste sloty z podpisami. Na wąskim ekranie galeria przewija się w poziomie we własnym kontenerze.

zrzut z lekcji
okładka ścieżki
portret autora
kadr z questu

13 / glowa strony

Nagłówek strony

Kicker, jeden h1, lead i dwa CTA. To nie jest nagłówek sekcji: tytuł jest zawsze h1, więc na żywej stronie stoi raz.

katalog / nauka

Naucz się AI na własnych plikach

Skille do skopiowania, kurs Claude Start i katalog z datą weryfikacji. Wszystko po polsku.

Biblioteka skilli Kurs Claude Start

14 / repozytoria

Karty repozytoriów

Wpis z data/repozytoria.yml. Gwiazdki to liczba z API albo null - null to napis brak danych, nigdy zero.

Katalog repo

gwiazdki z YAML

agenci / kod

anthropics / claude-code

claude-code

Agentyczny asystent kodowania w terminalu od Anthropic, rozumie repo i ogarnia git w jezyku naturalnym.

143 930 gwiazdek

stan bez danych

agenci / kod

Aider-AI / aider

aider

Pair programming z AI w terminalu: edytuje pliki, commituje i trzyma kontekst projektu.

brak danych

15 / prompty

Karty promptu

Styleguide, nie katalog: dwa krótkie prompty napisane tu. Pełny tekst siedzi w pre i da się zaznaczyć bez JS.

kod

Code review przed merge

Pięć zdań. Recenzent wypisuje błąd, regresję i brak testu, potem werdykt.

Claude 

Przeczytaj ten diff jak recenzent przed merge.
Wypisz trzy rzeczy: błąd logiki, ryzyko regresji, brak testu.
Każdy punkt to jedno zdanie plus ścieżka pliku.
Na końcu: scalać albo nie scalać i jedno zdanie dlaczego.
Nie przepisuj całego pliku.

redakcja

Skrót akapitu

Trzy zdania, fakty zostają, zero lorem.

ChatGPT 

Skróć ten akapit do trzech zdań.
Zachowaj fakty, liczby i nazwy własne.
Język konkretny, czasowniki, zero lorem.
Zwróć tylko nowy tekst.

16 / 390 px

Ten sam zestaw w 390 px

Kontener o szerokości telefonu obok pełnej szerokości strony. Każdy kafel ma tu być czytelny, a żaden pasek nie może wystawać poza kontener.

390 px

Narzędzia

38

kart w katalogu

Darmowa 4 min czytania

Co to jest Claude i co naprawdę potrafi

Dowiesz się, czym Claude różni się od innych AI, w jakich formach istnieje (czat, aplikacja, terminal) i do jakich zadań nadaje się najlepiej - żebyś od pierwszego dnia używał go do właściwych rzeczy.

Brąz Micro-quest

Canva: gotowa grafika na social media w 20 minut

Zaprojektuj jedna grafike na social media z szablonu Canva, podmieniajac tekst i zdjecie, i wyeksportuj gotowy plik.

XP
50
Kroki
5
  1. Zaloz darmowe konto na canva.com (nie potrzebujesz karty platniczej).
  2. Wybierz szablon pod konkretny format (np. post na Instagram albo baner LinkedIn).
  3. Podmien tekst naglowka na wlasny i zmien co najmniej jedno zdjecie/element graficzny.

i jeszcze 2 do końca

Tome

żył początek nieznany

Po pivocie ogloszonym w pazdzierniku 2024 (zejscie z prezentacji w strone sprzedazy i redukcja okolo jednej trzeciej zalogi) i potwierdzeniu wygaszenia w marcu 2025, Tome zamknelo produkt prezentacji 30 kwietnia 2025 - przestal przyjmowac nowe prezentacje, a dane uzytkownikow bez wczesniejszego eksportu zostaly utracone (VentureBeat, PageOn.ai, Deckary).

Zamiast tego: gamma

Adept (ACT-1)

żył początek nieznany

28 czerwca 2024 Amazon oglosil zatrudnienie wspolzalozycieli Adept (CEO David Luan, Augustus Odena, Maxwell Nye, Erich Elsen, Kelsey Szot) do swojej jednostki AGI oraz niewylaczna licencje na modele, technologie agentowa i czesc danych firmy (CNBC 28.06.2024, TechCrunch 28.06.2024, GeekWire 28.06.2024).

miejsce na opinię z bety

miejsce na podpis

Hero na 390 px

Jedna kolumna, obraz pod tekstem, przyciski na pełną szerokość.

Zacznij Katalog
ChatGPT Claude Code Claude Codex

Pas CTA na wąskim ekranie

Przyciski schodzą jeden pod drugi.

Zapisz się Archiwum

Ton limonkowy

Wybierz quest
Katalog Nauka Cmentarz

Katalog

Nauka

Darmowa 4 min czytania

Co to jest Claude i co naprawdę potrafi

Dowiesz się, czym Claude różni się od innych AI, w jakich formach istnieje (czat, aplikacja, terminal) i do jakich zadań nadaje się najlepiej - żebyś od pierwszego dnia używał go do właściwych rzeczy.

Cmentarz

Tome

żył początek nieznany

Po pivocie ogloszonym w pazdzierniku 2024 (zejscie z prezentacji w strone sprzedazy i redukcja okolo jednej trzeciej zalogi) i potwierdzeniu wygaszenia w marcu 2025, Tome zamknelo produkt prezentacji 30 kwietnia 2025 - przestal przyjmowac nowe prezentacje, a dane uzytkownikow bez wczesniejszego eksportu zostaly utracone (VentureBeat, PageOn.ai, Deckary).

Zamiast tego: gamma

zrzut z lekcji
okładka ścieżki
portret autora
kadr z questu

Siatka

Na 390 px zawsze jedna kolumna.

Siatka

Bez poziomego przewijania strony.

naglowek

Nagłówek sekcji na 390 px

Akcja schodzi pod tekst i ma pełną szerokość.

Akcja

390 px

Nagłówek strony

CTA schodzą jedna kolumna na pełną szerokość.

Skille Kurs

agenci / kod

anthropics / claude-code

claude-code

Agentyczny asystent kodowania w terminalu od Anthropic, rozumie repo i ogarnia git w jezyku naturalnym.

143 930 gwiazdek

kod

Code review przed merge

Ten sam prompt co wyżej, osobny id pre.

Claude 

Przeczytaj ten diff jak recenzent przed merge.
Wypisz trzy rzeczy: błąd logiki, ryzyko regresji, brak testu.
Każdy punkt to jedno zdanie plus ścieżka pliku.
Na końcu: scalać albo nie scalać i jedno zdanie dlaczego.
Nie przepisuj całego pliku.