Kalka v0.1.0

描いたら、
もうコード。

Kalka は、フレームもレイヤーも影も、すべてが本物の HTML と CSS でできたオープンソースの Figma 代替ツールです。レイアウトはブラウザが行います。デザインしたものが、そのまま公開されます。

創設メンバーは最初のビルドを受け取り、ロードマップに投票できます。無料、MIT ライセンス。

Kalka のエディター：左にレイヤーパネル、キャンバスにランディングページ、右にデザインプロパティ

同じフレームを、2つのビューで。間に書き出しはありません。

エージェントが下書きし、あなたが手で仕上げる。

AI エージェントはもう、ランディングページを数秒で書き上げます。それでも修正するにはコードを掘り返す必要がありました。Kalka なら、エージェントが書いたものが本物のレイヤーとしてキャンバスに置かれます。動かして、スタイルを変えて、良いところだけ残せます。

内蔵の MCP サーバーは、MCP に対応したあらゆるエージェントで使えます。特定のモデルに縛られません。

1
あなたが頼む料金セクションを追加して。プランは3つ、スタイルは同じで。
2
エージェントが HTML で描く
3
あなたが見ながら仕上げる角の半径 8 122F5BEA

覚え直すことも、作り直すこともない。

すべてのレイヤーが要素

レイヤーパネルがそのまま DOM です。レイヤーを選べば、そのタグがすぐそこに。コードを編集すれば、キャンバスもついてきます。

レイヤーDesktopheadersection.heroh1pa.btnsection.mosaic

section.hero

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

Figma が使えれば、Kalka も使える

同じパネル、同じツール、同じ操作感。開いたらすぐにデザインを始められます。

シェーダーレイヤー

シェーダーがキャンバス上で動く

メッシュグラデーション、グレイン、流れる光。ほかのレイヤーと同じように調整できます。

モックアップから公開まで、そのあいだにいるすべての人へ。

デザイナー

描いたものが、そのまま公開されます。「モックアップと見た目が違う」はもうありません。影も、余白も、文字組みも、そのままです。

開発者

リバースエンジニアリングが必要な絵ではなく、本物の HTML と CSS が手に入ります。ほかのコードと同じように diff を取り、レビューし、マージできます。

制作会社とフリーランス

すべてのプロジェクトから作り直しの工程をなくしましょう。「ここを 4px ずらして」のやり取りを減らし、より早く納品できます。

デザインで使う言葉のまま、Web が動くプロパティへ。

Kalka はデザイナーに馴染みのある用語をそのままに、開発者が期待する CSS を書き出します。プラグインも書き出し作業もなしで、Figma から HTML へ。

デザインパネルstyles.css

オートレイアウト間隔 24

display: flex; gap: 24px;

塗り2F5BEA · 100%

background: #2F5BEA;

ドロップシャドウY 8ぼかし 2412%

box-shadow: 0 8px 24px rgb(0 0 0 / .12);

角の半径16

border-radius: 16px;

レイヤーブラーぼかし 8

filter: blur(8px);

コンテンツをクリップ

overflow: hidden;

あなたの作品は、あなたのもの。

ただのファイル自分のフォルダに HTML、CSS、JSON。どのコードエディターでも開けます。

Git を内蔵コードと同じように、デザインをブランチで分け、diff を取り、レビューできます。

あなたのマシンの中にデスクトップアプリなので、プロジェクトをパソコンの外に出す必要はありません。

本当に無料アプリもローカル MCP サーバーも MIT ライセンスです。シート料金も利用上限もありません。

my-site/
├─ pages/
│  ├─ home.html
│  └─ pricing.html
├─ styles.css
├─ design-system/
│  ├─ tokens.json
│  └─ components/
├─ assets/
└─ project.json

オープンに開発。大事なところは無料。

Kalka は OpenPencil のフォークとして始まり、ブラウザそのものを中心に作り直している最中です。デスクトップアプリとローカル MCP サーバーは、これからも無料で MIT ライセンスです。チーム向けのホスト版は、オプションのサブスクリプションとして後日提供予定です。

開発の様子を X でフォロー、@bedleybuilds

01現在
概念実証ブラウザで 2,000 レイヤーを 60 fps。できなければ白紙から考え直し。
02基盤づくり本物のランディングページを Kalka の中でゼロから制作。リポジトリを公開。
03MVP最初のクライアント案件を Kalka でデザインし、納品。
04V1すべての新規プロジェクトを Kalka から。もう手で作り直すことはありません。

よくある質問

Kalka は無料ですか？

はい。デスクトップアプリとローカル MCP サーバーは無料で、MIT ライセンスのオープンソースです。チーム向けのホスト版は、オプションとして後日提供予定です。

Figma の代替になりますか？

Figma を使っている方なら、インターフェースはすぐに馴染むはずです。違いはその下にあります。Kalka はベクターではなく HTML と CSS で描くので、デザインがすでに Web ページになっています。

Figma ファイルをインポートできますか？

はい。Kalka は Figma ファイル（.fig）と .pen ファイルをインポートできるので、既存の作業を持ち込んで、そのまま本物の HTML でデザインを続けられます。

どの AI エージェントで使えますか？

MCP に対応したあらゆるエージェントで使えます。Kalka には専用の MCP サーバーが付属しているので、エージェントがキャンバスを読み取り、HTML を書き、スタイルを更新し、書き出しまで行えます。

対応プラットフォームは？

macOS、Windows、Linux です。Kalka は Electron で作られたデスクトップアプリなので、3つすべてで動作します。

いつ試せますか？

概念実証の手応えが得られ次第、ウェイトリストの創設メンバーに最初のビルドをお届けします。その過程はすべて X で共有しています。

デザインをコードで描き直すのは、もう終わり。

ウェイトリストに登録して、創設メンバーになりましょう。

誰よりも早く最初のビルドを
次に作る機能への投票権
創設メンバーの壁に名前を掲載

描いたら、もうコード。