Visual editor for real codebases

コードを壊さない、
ビジュアル編集。

Cook your site. Keep your code.

Site Kitchen は、ローカルの実プロジェクトをそのまま開き、 クリックで調整した余白・色・文字を元のソースコードへ書き戻すデスクトップエディタ。 生成でも変換でもなく、あなたのコードがそのまま完成品になります。

今すぐはじめる 設計思想を読む
Works with
  • HTML 静的サイト・LP
  • Vite + React SPA・開発サーバー
  • Next.js App / Pages Router
  • Tailwind あり・なし両対応
01 Philosophy
すべてを自動で書き換えない。
安全な範囲だけを、確実に。

Site Kitchen は編集のたびにソースを静的解析し、GUIから安全に編集できる範囲 —— Safe Editable Range —— を判定します。 繰り返しの中の要素や動的な式など、触ると壊れる場所は正直にロックし、 該当コードへワンクリックでジャンプ。書き戻しは Tailwind クラスや CSS ルールとして、 人が書いたように整った形で行われます。

  • 静的解析で判定

    parse5 と Babel で毎回ソースを解析。編集して良い範囲だけをGUIに開放します。

  • 範囲外は隠さない

    ロックした要素も選択・閲覧は可能。理由を明示し、コードエディタへ誘導します。

  • いつでも戻れる

    全編集が Undo / Redo の対象。セッション開始時点のファイルは自動で退避されます。

02 Features

道具は少なく、切れ味は鋭く。

クリックして、直す

実レンダリングの上で要素を選び、右パネルで余白・色・タイポグラフィを調整。 ダブルクリックでテキストを直接編集、ドラッグ&ドロップで並べ替え。 ステッパーと矢印キーで 1px 単位、Shift で ±10。

コードと相互同期

要素を選ぶと Monaco が該当行へ。コードを保存すれば即プレビューに反映。差分タブでレビューできます。

レスポンシブを、ソースに書く

Desktop / Tablet / Mobile を切り替えて編集。Tailwind なら md: lg:、 非 Tailwind でも media query 付き CSS として書き戻します。

AI はローカルで

LM Studio などの OpenAI 互換 API に接続し、自然言語でコードを書き換え。ソースは外部サーバーへ送信されません。

Figma から下ごしらえ

Frame URL を渡すと Auto Layout・テキスト・角丸を Tailwind マークアップへ変換し、新規ファイルとして生成します。

失敗しても、戻れる

すべての編集は Undo / Redo とジャーナルで管理。セッション開始時に .ed-backups/ へ自動退避し、 変更ファイル一覧・差分・コミットまで Git 連携で完結します。コミットは必ず手動 —— 勝手に履歴を汚しません。

03 Workflow

開いて、直して、書き戻す。

  1. 01

    フォルダを開く

    HTML / Vite / Next.js を自動判定。内蔵サーバーまたは dev server で、実際のレンダリング結果をプレビューします。

  2. 02

    クリックして調整

    キャンバスで要素を選び、右パネルで余白・色・タイポを調整。ブレークポイントを切り替えれば画面幅ごとの値を編集できます。

  3. 03

    コードに書き戻し

    その場でソースファイルが更新されます。差分タブで確認し、納得したらそのままコミットまで。

Site Kitchen — portfolio-2026
Layers
  • header
  • main
    • section.hero
    • section.works
  • footer
section.hero 1200 × 480
Properties
padding48px
gap24px
color
breakpointTablet · md:
04 Works with

いつもの構成のまま、どうぞ。

01

HTML

開いたその場で、完全動作。

静的サイトやLP制作に。内蔵サーバーが実レンダリングを配信し、 インデントもクォートもそのままに、該当箇所だけをピンポイントで置換します。

  • class 属性
  • style 属性
  • ed-styles.css
02

Vite + React

HMR の速さは、そのままに。

プロジェクト自身の dev server を起動し、プロキシ越しに編集レイヤーだけを注入。 JSX / TSX の静的な className とテキストへ直接書き戻します。

  • className
  • JSX テキスト
  • HMR 即時反映
03

Next.js

App Router でも、Pages でも。

どちらの構成も自動判定。コンポーネントのソース位置を突き止め、 該当の JSX へ書き戻します。グローバルCSSは layout / _app を通して安全に読み込み。

  • App Router
  • Pages Router
  • TSX 対応
Tailwind あり 
<div class="p-4 md:p-6">

ユーティリティクラスを整えて置換。既存の命名規則を乱しません。

Tailwind なし 
@media (min-width: 768px) {
  .ed-a1b2c3 { padding: 24px; }
}

media query 付きの CSS として書き込み。レスポンシブもコードに残ります。

さあ、仕込みを始めよう。

今日の「ちょっとした調整」を、今日のうちに終わらせる。
Site Kitchen はローカルで動く、あなたのコードのためのキッチンです。 

$ cd site-kitchen
$ npm install
$ npm run dev

Electron 製 · macOS / Windows / Linux · コードはローカルの外へ出ません