← Wszystkie projekty

OkenDesk.
Strona, którá mała firma naprawdę potrafi prowadzić.

Zarządzana platforma dla firm usługowych: dedykowana witryna, asystent AI, który odpowiada odwiedzającym i przyjmuje rezerwację, panel właściciela pozwalający edytować stronę przez rozmowę, oraz silnik treści piszący blog i posty społecznościowe głosem marki.

Rola
Jedyny inżynier
Wdrożenie
Produkcja jedna komenda
Kod
13 449 linii JavaScriptu · 45 modułów
Architektura
Wielodostępna jeden kontener · jeden wolumen
Panel bloga OkenDesk w trybie ciemnym: generator pomysłów z polem kierunku i tacką na zdjęcia oraz lista opublikowanych i roboczych wpisów

Panel bloga · o czym warto napisać, a poniżej same wpisyFig. 01

Dane na wszystkich zrzutach są zestawem demonstracyjnym. Piekarnia, jej podstrony, wpisy i zapytania zostały wymyślone na potrzeby tych obrazów; żaden z nich nie jest prawdziwym klientem.

Przegląd01

Małe firmy usługowe kupują stronę, a potem nie mogą jej tknąć. Osoba, która ją zbudowała, dawno odeszła, CMS jest szafą na dokumenty, której nikt nie otwiera, a blog kończy się na trzecim wpisie. W tym czasie telefon dzwoni, gdy właściciel stoi na drabinie albo leży pod zlewem, i zapytanie trafia do tego, kto odebrał pierwszy.

OkenDesk stoi za tym wszystkim jako jedna platforma. Każdy klient dostaje dedykowaną witrynę, a nie przemalowany szablon, oraz panel: asystenta AI odpowiadającego głosem marki i przyjmującego zlecenia, edycję każdej podstrony pole po polu, blog podpowiadający o czym warto napisać, i studio robiące grafiki w firmowym kroju i palecie.

Każda konfiguracja kliencka działa produkcyjnie z jednego kontenera, z jednym wolumenem za nimi wszystkimi. Ciężka praca modeli dzieje się raz, przy konfiguracji, a asystent, z którym rozmawia odwiedzający, jest mały i szybki.

Decyzje, które podjąłem02
01

Fakty wolno twierdzić. Materiału nie.

Wszystko, co AI wie o kliencie, jest podzielone na dwoje. Fakt to twierdzenie, za którym firma stanie, gdy usłyszy je obca osoba; potwierdza je człowiek i jest krótkie. Materiał jest surowy: notatki, transkrypcje, to co było widać na zdjęciach. Asystent czyta wyłącznie fakty; narzędzia piszące czytają jedno i drugie. Bez tej granicy rosnąca pamięć staje się maszyną do zmyślania, coraz pewniejszą siebie, a jedno przypadkowe zdanie z notatki zamienia się w obietnicę złożoną klientowi. Na dany temat żyje tylko jeden fakt, więc sprzeczność trafia do właściciela zamiast po cichu nadpisać poprzednią odpowiedź.

02

Pokaż modelowi grafikę, nigdy nazwę

Poproszony o krój marki z nazwy, model obrazu rysuje to, co dla niego znaczy „grotesk”. Pokazany arkusz wzorcowy wyrenderowany z prawdziwego pliku fontu klienta, odwzorowuje litery. Tak samo z logo: przekazane tekstem wraca przełożone na krój, którego nikt nie wybrał; przekazane pikselami jest odtworzone. Oba trafiają dziś do modelu jako obrazy i to przesunęło wynik z „wystarczająco blisko” do rzeczywistej marki klienta.

03

Gdy wynik jest zły, szukaj instrukcji, która się kłóci

Każdy zły wynik w potoku obrazu okazał się sporem dwóch instrukcji, a nie zbyt miękką jedną. Plakaty wymyślały laury festiwalowe, bo prompt kazał przenosić każdy element konstrukcyjny i nigdzie nie mówił, że wyróżnienie jest twierdzeniem. Znaki marki znikały, bo zapisany styl ciągnął ze sobą sześć obrazów referencyjnych, które wypychały logo. Typografia stała potulnie obok zdjęcia, bo reguła mająca powstrzymać błędy ortograficzne mówiła też „nigdy plakat”. Za każdym razem lekarstwem było usunięcie albo pogodzenie sprzecznej linijki, nigdy napisanie ostrzejszej.

04

Nigdy nie publikuj automatycznie

Silnik treści pisze wersję roboczą; publikuje człowiek. Masowa treść z AI to dokładnie to, co wyszukiwarki karzą najmocniej, a lokalna strona usługowa ma mniej zaufania do wydania niż prawie ktokolwiek. Więc właściciel zastaje gotowy szkic i nadal naciska przycisk, każdy wpis niesie własne zdanie człowieka jako punkt widzenia, a tydzień bez niczego wartego powiedzenia nie publikuje niczego.

05

Dwa rodzaje stron, jeden szew

Część klientów ma stronę opartą na motywie, gdzie treść to dane strukturalne; inni mają dedykowaną stronę ręcznie zbudowaną, później zmapowaną na edytowalne pola. Pod spodem to naprawdę dwie różne rzeczy i takie zostaną. Ważne, że różnica kończy się na jednym module: wszystko powyżej prosi o listę, zapis i usunięcie, a ten moduł wie, który magazyn to znaczy. Zanim ten szew powstał, edytor bloga działał tylko dla jednego z dwóch, więc większość klientów nie miała jak dostać się do własnego bloga.

Edycja03

Dedykowana strona, edytowalna pole po polu.

Ręcznie zbudowana strona nie ma za sobą żadnego CMS-a. Model czyta każdą podstronę raz i wskazuje to, co właściciel firmy chciałby zmienić (nagłówek, cenę, zdjęcie) i strona staje się szablonem z nazwanymi miejscami. Witryna jednego klienta rozkłada się na 1102 edytowalne pola na 104 podstronach; innego na 478 na siedmiu.

Właściciel może też po prostu opisać zmianę. „Ociepl nagłówek na górze” zostaje napisane głosem jego marki i pokazane mu, zanim cokolwiek trafi na żywo.

Edytor strony OkenDesk w trybie ciemnym: pasek edycji przez rozmowę, wybór podstrony i pola wybranej podstrony

Edytor strony · jedna podstrona naraz, z wyszukiwaniem po wszystkichFig. 02

Ten edytor renderował kiedyś wszystkie podstrony naraz. Przy największej witrynie miał czterdzieści siedem tysięcy pikseli wysokości: sześćdziesiąt pięć ekranów, 69 kart i 473 pola w jednej kolumnie, z czterema nagłówkami „Stopka” i bez informacji, na której podstronie się jest. Witryna to podstrony, więc edytor też nimi jest: jeden ekran i wyszukiwarka dopasowująca zarówno nazwę pola, jak i słowa, które w nim stoją, bo kto szuka zdania, pamięta jego treść, a nie nazwę.

Reszta platformy04

Asystent

Odpowiada głosem marki
Czyta tylko potwierdzone fakty
Przyjmuje rezerwację
Powiadomienia e-mail i SMS

Pamięć marki

Fakty potwierdzane pojedynczo
Materiał dla faktury i detalu
Sprzeczności zgłaszane, nie scalane
Nic nie jest kasowane

Silnik treści

Podpowiada, o czym warto pisać
Pisze ze zdjęć i notatek
Linkuje tylko do istniejących stron
Publikuje człowiek

Studio

Grafiki społecznościowe w marce
Prawdziwe logo, prawdziwy krój
Własne materiały klienta w kadrze
Wyróżnienia nigdy zmyślane

Dostępność

Dni i godziny pracy
Wyprzedzenie i dni zablokowane
Odwiedzający widzi realne terminy

Przechowywanie

Pliki klienta w object storage
Niezwiązane z jednym kontem
Utracony dysk odtwarza się z kubełka

Zbudowane z05

Serwer

Node, bez frameworka
Zwykłe handlery HTTP
45 modułów · 13 449 linii

Modele

Claude do tekstu i wizji
gpt-image-2 do grafiki
Mały model na ścieżce gorącej

Renderowanie

Headless Chromium dla typografii
sharp do składania
Prawdziwy plik fontu marki

Front

Jeden ręcznie pisany plik HTML
Czysty JavaScript
Nic do zbudowania

Wdrożenie

Docker na Railway
Jeden wolumin na cały stan
Cloudflare R2 na pliki klientów

Zbudowane samodzielnie. Decyzje projektowe opisane powyżej są zapisane w repozytorium w miarę ich podejmowania, w tym te, które najpierw były błędne: reguły promptu kłócące się ze sobą, kadrowanie, którego nikt nie potrzebował, i edytor, który urósł do sześćdziesięciu pięciu ekranów, zanim ktoś powiedział to na głos.

Na telefonie06

Cały panel na urządzeniu, na którym się go używa.

Właścicielka piekarni nie siedzi przy biurku. Ten sam panel, wszystkie zakładki, pełny edytor, ustawienia asystenta i zapytania, działa na telefonie w trybie ciemnym, bo moment, w którym ktoś naprawdę chce odpowiedzieć na zapytanie, to moment, w którym stoi gdzie indziej.

Panel bloga OkenDesk na telefonie w trybie ciemnym: generator pomysłów i lista wpisów

Panel bloga na telefonieFig. 03