WEBアプリ

AIプロンプトを作成するアプリ

Claude Code Next.js 15 TypeScript Tailwind CSS Docker GitHub
TARGET
ターゲット
・AIを使うときに、目的に合ったプロンプトを手早く用意したい人
PURPOSE
目的
・AIを使う場面が増える中で、分野に合わせたプロンプトのフォーマットを簡単に作り、そのままAIに渡せるようにする
DURATION
製作期間
2日
TECH
使用技術
Claude Code / Next.js 15 / TypeScript / Tailwind CSS / Docker / GitHub
DESIGN
デザインの意図
目的に合ったプロンプトを迷わず組めるよう、分野を選ぶだけで形になる手軽さを優先した。

制作エピソード

制作に関するエピソード

「AIを使う場面が増えて、プロンプトが要になってきた」

これは初心者〜中級者向けの、コピーしてすぐ使える実用的なAIプロンプト図鑑です。
ブログ・Web制作・SNS・動画・画像生成・仕事効率化の実践プロンプトを、 出力例・カスタマイズのヒント・コピーボタン付きで公開しています。

AIを使う機会が増えるほど、どんなプロンプトを渡すかで結果が変わってきます。目的に合ったプロンプトをその都度ゼロから考えるのは手間だと感じていました。
そのため簡単にテンプレートを作れるアプリが欲しいなと思い作成しました。

手軽に使えるように、ワンクリックでコピペできるようにしました。

「分野ごとにフォーマットを組めるようにした」

分野に合わせてプロンプトのフォーマットが変わります。ヒントもあるのでそのままAIに渡せるようにしました。使う場面ごとに形が整うので、プロンプトを一から考える手間を減らせます。

「ログインなしで履歴を残す」

よく使うプロンプトをお気に入り登録できるようにしています。
localStorage に保存してブラウザで完結できるようにしています。

「はじめてのNext.js」

自分の勉強のため、今まで使ったことがないNext.jsで作成してみました。
今回のアプリは私にとって、AIに作ってもらった分かなり複雑な構造になっているので、作ってもらったコードをみて頭を抱えました。
ここで諦めるのではなく、コード修正をする際に「ここは何をしている部分なのか」一つずつ調べたりAIに聞きながらコードに触っていくことが一番勉強になるのではないかと思いました。今後も勉強を続けていきたいと思います。

作品一覧へ戻る