Kalka v0.1.0

Narysuj to.
To już kod.

Kalka to otwartoźródłowa alternatywa dla Figmy, w której każda ramka, każda warstwa i każdy cień to prawdziwy HTML i CSS, układany przez przeglądarkę. Co zaprojektujesz, to wdrożysz.

Członkowie założyciele dostają pierwsze wersje i głos w sprawie planu rozwoju. Za darmo, na licencji MIT.

Edytor Kalki: panel warstw po lewej, landing page na płótnie, właściwości projektu po prawej

Ta sama ramka, dwa widoki. Bez eksportu pomiędzy.

Twój agent robi szkic. Ty kończysz go ręcznie.

Agenci AI piszą landing page w kilka sekund. Ale żeby coś w nim zmienić, wciąż trzeba grzebać w kodzie. W Kalce to, co napisze agent, trafia na płótno jako prawdziwe warstwy: przesuwasz je, zmieniasz im styl, zostawiasz to, co działa.

Wbudowany serwer MCP działa z każdym agentem, który obsługuje MCP. Bez przywiązania do jednego modelu.

  1. 1
    Ty prosiszDodaj sekcję z cennikiem, trzy plany, ten sam styl.
  2. 2
    Agent rysuje ją w HTML
  3. 3
    Ty ją dopracowujesz, wizualnieRadius 8 122F5BEA

Nic nowego do nauki. Nic do przepisywania.

Każda warstwa to element

Panel warstw to DOM. Zaznaczasz warstwę i od razu widzisz jej tag. Edytujesz kod, a płótno idzie za nim.

WarstwyDesktopheadersection.heroh1pa.btnsection.mosaic
section.hero
<body>
<header>…</header>
<section class="hero">
<h1>…</h1>
<p>…</p>
<a class="btn">…</a>
</section>
<section class="mosaic">…

Znasz Figmę, znasz Kalkę

Te same panele, te same narzędzia, te same nawyki. Otwierasz i projektujesz.

warstwa shadera

Shadery na żywo na płótnie

Gradienty mesh, ziarno, płynące światło. Dostrajasz je jak każdą inną warstwę.

Dla wszystkich, którzy stoją między makietą a premierą.

Projektanci

Co narysujesz, to trafi na stronę. Koniec z „w makiecie wyglądało inaczej”. Twoje cienie, twoje odstępy, twoja typografia, co do piksela.

Programiści

Dostajesz prawdziwy HTML i CSS, a nie obrazek do rozszyfrowania. Robisz diff, review i merge jak z resztą kodu.

Agencje i freelancerzy

Wytnij przepisywanie projektu z każdego zlecenia. Oddawaj szybciej, z mniejszą liczbą rund w stylu „przesuniesz to o 4px?”.

Słowa, którymi projektujesz. Właściwości, na których działa web.

Kalka zachowuje słownictwo, które kochają projektanci, i pisze CSS, jakiego oczekują programiści. Figma do HTML bez wtyczki i bez eksportu.

Panel projektustyles.css
Auto layoutGap 24
display: flex; gap: 24px;
Wypełnienie2F5BEA · 100%
background: #2F5BEA;
CieńY 8Blur 2412%
box-shadow: 0 8px 24px rgb(0 0 0 / .12);
Zaokrąglenie rogów16
border-radius: 16px;
Rozmycie warstwyBlur 8
filter: blur(8px);
Przycinanie zawartości
overflow: hidden;

Twoja praca należy do ciebie.

Zwykłe plikiHTML, CSS i JSON w folderze, który należy do ciebie. Otworzysz go w dowolnym edytorze kodu.
Wbudowany GitGałęzie, diffy i review projektu, dokładnie tak jak przy kodzie.
Na twoim komputerzeAplikacja desktopowa. Twoje projekty nigdy nie muszą opuszczać twojego komputera.
Naprawdę za darmoAplikacja i lokalny serwer MCP są na licencji MIT. Żadnych opłat za stanowisko, żadnego limitu użycia.
my-site/
├─ pages/
│  ├─ home.html
│  └─ pricing.html
├─ styles.css
├─ design-system/
│  ├─ tokens.json
│  └─ components/
├─ assets/
└─ project.json

Tworzona otwarcie. Darmowa tam, gdzie to się liczy.

Kalka zaczęła jako fork OpenPencil i jest przebudowywana wokół samej przeglądarki. Aplikacja desktopowa i lokalny serwer MCP pozostaną darmowe, na licencji MIT. Hostowana wersja dla zespołów pojawi się później, jako opcjonalna subskrypcja.

Śledź postępy na X, @bedleybuilds
  1. 01Teraz
    Proof of concept2000 warstw w 60 fps w przeglądarce albo powrót do deski kreślarskiej.
  2. 02FundamentyPrawdziwy landing page zbudowany od zera w Kalce. Repozytorium staje się publiczne.
  3. 03MVPPierwszy projekt dla klienta zaprojektowany i wdrożony w Kalce.
  4. 04V1Każdy nowy projekt zaczyna się w Kalce. Koniec z ręcznym przepisywaniem.

Pytania i odpowiedzi.

Czy Kalka jest darmowa?

Tak. Aplikacja desktopowa i lokalny serwer MCP są darmowe i open source, na licencji MIT. Hostowana wersja dla zespołów pojawi się później, jako opcja.

Czy to alternatywa dla Figmy?

Jeśli używasz Figmy, interfejs od razu wyda ci się znajomy. Różnica tkwi pod spodem: Kalka rysuje w HTML i CSS zamiast w wektorach, więc twój projekt od początku jest stroną internetową.

Czy mogę zaimportować pliki z Figmy?

Tak. Kalka importuje pliki Figmy (.fig) i pliki .pen, więc przeniesiesz dotychczasową pracę i dalej będziesz projektować w prawdziwym HTML.

Z jakimi agentami AI działa?

Z każdym agentem, który obsługuje MCP. Kalka ma własny serwer MCP, więc twój agent może czytać płótno, pisać HTML, zmieniać style i eksportować.

Na jakich systemach działa?

macOS, Windows i Linux. Kalka to aplikacja desktopowa zbudowana w Electron, więc działa na wszystkich trzech.

Kiedy będzie można ją wypróbować?

Członkowie założyciele z listy oczekujących dostaną pierwsze wersje, gdy tylko proof of concept się sprawdzi. Każdy krok pokazujemy na bieżąco na X.

Przestań przerysowywać projekty w kodzie.

Dołącz do listy oczekujących i zostań członkiem założycielem.

  • Pierwsze wersje, przed wszystkimi
  • Głos w sprawie tego, co powstanie dalej
  • Twoje nazwisko na ścianie założycieli