Benchoの紹介動画｜UI部品ライブラリ
触って動くReactのUI部品とマイクロインタラクション、UIの効果音を集めたライブラリです。
FablessBridgeによる自主制作の紹介動画
概要
触って動くReactのUI部品を集めたライブラリ「Bencho」の30秒の紹介動画です。AIがありきたりな画面を作る場面から、Bencho MCPで本物の部品を受け取って動かすまでをターミナルと設計図で見せています。
動画の要点
- AIに頼むとありきたりな見た目になる困りごとを、ターミナルの出力と灰色の部品で見せました。
- Bencho MCPをつなぎ、search_blocksとget_blockで部品を受け取る流れを1行ずつ見せました。
- 設計図に線で描かれた部品が本物のカードに塗り替わり、スライダーやリアクションが動く様子を見せました。
動画の流れ
- 00:00「Your AI ships generic UI.」。ターミナルで部品を頼むと、プレビューに灰色のトグルと星が出て「GENERIC」の判が押されます。
- 00:03「Connect the Bencho MCP.」。MCPを追加するコマンドを打ち、設計図にBenchoのマークと3つの道具が線でつながります。
- 00:08「Ask for a block. Get the real one.」。部品の名前が解読されるように出て、設計図に部品の枠が線で描かれていきます。
- 00:14「Component, CSS, motion. Live.」。設計図が本物の部品に塗り替わり、スライダーを動かし、リアクションとトグルを押します。
- 00:20緑の文字が降る中でASCIIの「BENCHO」が解読されて現れ、部品と効果音とMCPの説明が出ます。
- 00:26白い画面にBenchoのマークと「Give Claude better taste in UI.」、bencho.devを出し、部品の名前の帯が流れます。