Nasz własny produkt, narzędzie do projektowania i przeglądów

CRABZLAB

Projektowanie i przeglądy na prawdziwym produkcie, a nie na jego obrazkach.

Narzędzie projektowe CRABZLAB podczas edycji działającego produktu
Klient
Nasz własny produkt, narzędzie do projektowania i przeglądów
Platformy
macOS (wersja podglądowa 0.2.9); aplikacja webowa, Windows i Linux w budowie; potem tablety
Rok
2026
Online
crabzlab.com
Rola
Produkt, projekt, wykonanie
Odwiedź crabzlab.com Rozpocznij projekt

Wyzwanie

Plik projektowy to obrazek, a produkt rozwija się bez niego. Narzędzia projektowe przechowują rysunki, narzędzia do feedbacku przechowują zrzuty ekranu, a nic nie przechowuje samego działającego produktu, więc uwagi w stylu „przycisk po lewej” trafiają do niewłaściwego komponentu. CRABZLAB powstał jako tablica przeglądów dla naszych własnych produktów, najpierw dla Goldmarket, i wyrósł na samodzielne narzędzie.

01

Działający produkt na jednej kanwie.

Każda ścieżka działającej wersji, uchwycona na prawdziwych urządzeniach i ułożona obok siebie, z maksymalnie dwunastoma ekranami działającymi jednocześnie.

Kanwa CRABZLAB ze ścieżkami Goldmarket działającymi obok siebie, warstwy po lewej
02

Wskaż cokolwiek, a wie, co to jest.

Najechanie kursorem podaje nazwę elementu, a kliknięcie przypina komentarz z komponentem, jego obszarem i ścieżką.

Warstwy CRABZLAB, działający telefon z podświetlonym elementem i panel inspekcji
03

Produkt z każdej strony.

Osiem stron z tych samych zrzutów: ekrany, przepływy, scenariusze, mapa strony, design system, widoki responsywne, moodboard i branding.

Strona Screens w CRABZLAB, ścieżki pogrupowane według obszarów
04

Jeden przycisk, udokumentowany produkt.

Optimize odczytuje produkt ukryty za ekranami i w jednym kroku zapisuje jego mapę strony, przepływy i design system, z jednym Undo.

Optimize w CRABZLAB odczytuje cztery źródła i zapisuje osiem stron
05

Brief zamiast zgadywania.

Send to iterate pisze precyzyjny brief dla narzędzia do kodowania, którego zespół już używa, na jego własnym komputerze, a ekrany nadążają za zmianami.

Nagłówek crabzlab.com: „Design on the real product”
Wyniki laboratoryjne CRABZLAB na iPhonie: pierwsze renderowanie 34 ms, 28 presetów urządzeń, przesuwanie i zoom 16.8 ms

Wyniki

  • 34 msod otwarcia pliku do narysowanej kanwy, przy budżecie 500 ms.
  • 16.8 msp95 przesuwania i zoomu z 12 działającymi ekranami na kanwie.
  • 28presetów urządzeń, od telefonów po 5K, z prawdziwą gęstością pikseli i obsługą dotyku.
  • 0.0%obciążenia CPU, gdy nic na kanwie się nie rusza.
  • 617 / 617tekstów interfejsu po angielsku i po gruzińsku.

Dane pochodzą z własnych wyników laboratoryjnych crabzlab.com, zmierzonych na jednym Macu z dwunastoma działającymi ekranami. macOS 0.2.9 to wersja podglądowa, jeszcze bez publicznego pobierania, a cennik jest planowany, jeszcze nie obowiązuje.