previs: 面倒なマークアップは AI にやらせる

自分はフロントエンドのロジックを考えるのは得意なんですが、CSS は苦手です。 なので 自分は AI にコード変更を依頼して実行結果を目視でプレビューしつつ、その生成結果を受けいれるかどうかの判断だけすればよくね？と考えて、それを CLIとして実装してみました。 ボタンの色を書き換えるという簡単な例ですが、こんな感じで動きます。 主に React Component の修正をターゲットにしていますが、class(Name) を書き換えることを優先するプロンプトを与えているので、ロジックを保ちつつ、見た目を綺麗にするためのツールになっています。 実装した背景 vscode ターミナル上で画像を表示できる OpenAI API はgpt-4-vision-preview のモデルで画像をアップロードして認識させることができる これらを使って、vscode terminal で実行することを前提

[mizchi]

AI によるマークアップ生成器作ったので紹介記事を書いた

[misshiki]

“AI にコード変更を依頼して実行結果を目視でプレビューしつつ、その結果を受けいれるかどうかの判断だけすればよくね？と考えて、それを CLIとして実装してみました。”