プロファイル
1 つのサイトに複数のデザインを保存し、エディタやポップアップから切り替えられます。
4.0 の新機能
エディタを一新し、コーディングエージェント向けのコマンドライン、プロファイル、サイドパネルを追加しました。
エディタを一新
ゼロから作り直し、ダークモードにも対応しました。
- ページの現在の値を表示する、グループ化されたコントロール
- セレクタの生成を改善。サイトが更新されても効き続け、ほかの候補も選べる
- ほかのルールで値が上書きされているときに表示
- カラーパレットとスポイト
- 色やフォントにマウスを合わせると、ページ上でプレビュー
- 「その他のプロパティ」で、ほかの CSS プロパティもその場で編集
- 元に戻す操作に対応
ターミナルから Stylebot を
コマンドラインから Stylebot を操作するか、Claude Code、Codex、Cursor などのコーディングエージェントに任せられます。エージェントはブラウザ上でそのままサイトのスタイルを変更し、API キーではなくご自身のサブスクリプションを使います。
$ npm install -g @stylebot/cli
CLI を設定 →Chrome または Edge 向けです。Firefox ではまだコマンドラインを使えません。
サイドパネル、または専用ウィンドウ
Chrome と Edge では、エディタはサイドパネルで開きます。エディタの ⋯ メニューの位置から、専用のウィンドウに切り離すこともできます。
バージョン履歴
すべての変更が保存され、以前のどのバージョンにも戻せます。
同期
Google Drive 同期がより安定しました。別のパソコンでの編集はマージされるので、失われることはありません。同期は 30 分ごとと、編集した直後に自動で行われます。
チャット
コーディングエージェントがなくても大丈夫。望む見た目を伝えるか、提案から選ぶと、Stylebot が CSS を書きます。Claude、OpenAI、Gemini のキーは自分のものを使います。
その他
- 新しい stylebot.dev
- 新しい Stylebot アイコン
- Shadow DOM の中にもスタイルが適用されるようになり、Web Components で作られたサイトでも使えます
- Stylebot のショートカットは、ブラウザのショートカット設定で管理するようになりました。Chrome と Edge では、変更していたショートカットがデフォルトに戻っているので、そちらで設定し直してください。
- Stylebot がベトナム語に対応
ほかにも多数のバグ修正