Motionチームが作ったビジュアルCSS編集ツール
CSS Studioは、ブラウザ上でCSSを視覚的に編集し、その変更をAIエージェントがソースコードに反映するツール。Motionの開発チームが手がけている。
ワークフローは3段階で構成される。
- ブラウザ上でカラー、レイアウト、スタイル、アニメーション、テキストを直接操作する
- 変更内容がローカルのAIエージェントに送られ、適切なファイルを特定して編集を実装する
- エージェントが生成したコードをレビューし、コミット・デプロイする
主な機能はページ上での直接編集、CSSキーフレームのタイムライン操作、CSS変数の検出と編集、DOM要素の追加・削除・並べ替え、スプリングイージングの設計、グラデーションエディタ、カラーピッカーなど。サイトの技術スタックを問わず動作する点が特徴で、買い切り$99のアーリーアクセス中。
