皆さん、こんにちは。
今日はエンジニア職以外の方でもCodespacesなどを使って、開発環境を作れるプロンプトを講座内で公開したのでそのお知らせです。
プロンプトを投げて質問に答えるだけ
エンジニア的なお仕事をされていれば、ターミナルに2、3回コマンドを投げればできあがる環境だったりするんですが、やはりそういう面の知識がないデザイナーさんとかからすれば「そもそもどうやれば良いのか」「それを動かすには何が必要なのか」「どの技術を選択すれば良いのか」からして意味不明です。
そこで、最初に質問に答えるだけで今時の開発環境作りに欠かせない「Vite」を使って自分好みの開発環境をAIエージェントが勝手に準備してくれるプロンプトを作ってみました。
デフォルトのままだと作成されるのは Figma Make や Figma MCP がデフォルトで採用するであろう「React」ですが、「HTMLとCSSだけで良い」と指定すればそれにあわせた環境ができあがります。ついでなので、「Tailwind.css」と「Lucide Icons」も追加済でそれぞの環境に合わせてうまいことやってくれます。
先週講座内で番外編として公開した「Codespaces」を使っても良いですし、ご自身で既にNode.jsをインストールされている方でも使えるプロンプトです。先述の通りViteを使った環境構築は難しくはないのですが、’このプロンプトはその手助けをしてくれます。
動画内ではGitHubの無料アカウントの範囲内で使える「Claude Haiku 4.5」でやっていますが、こちらのプロンプトは「Claude」系をベースに作っています。Geminiとか他のエージェントでも使えるとは思いますが、たまに迷走するかもしれませんのでご了承ください（変なコマンドとかは入ってないので何も起きはしません）。
自分で試してみないことにはわからないので
詳しい使い方は、「マスター編」もしくは「生成AI × Figma MCP」に追加した「【番外編】環境不要! ブラウザで試そう」の中に「（おまけ）誰でも環境作りができるプロンプト」としてこちらの動画とプロンプトファイル、使い方のテキスト解説を追加しています。
Figma Make にしても Figma MCP にしてもガイドラインやプロンプトの指示も大事ですが、Figmaのファイルの作り方も大事です。自分の作ったファイルをAIで試したいけど、「動かせる環境がないし…」「エンジニアに頼むのも悪いし…」と思ったりで躊躇されたりしているエンジニア職以外の皆さんに使っていただければ、と思います。