😊

Claude 3.7 SonnetがBoltに統合されたのでフリーレン式魔法変換器を出力してみた

2025/02/27に公開

Boltを使って葬送のフリーレンに出てきそうな魔法の名前をランダムに出力してくれるサイトを出力しました。(プリセットされた単語をランダムに組み合わせてるだけ)

サイト説明 ~フリーレン式魔法変換器~


葬送のフリーレンで出てくる魔法名には規則がある程度あって名詞+動詞+魔法という組み合わせがベースでした。

ユーザーには名詞の部分を入力してもらい動詞の部分だけランダムにすれば良かったのですが動詞の部分だけランダムだと面白くないので名詞+形容詞+動詞+魔法でよりネタっぽい組み合わせが出るようにしました。

フリーレン式魔法変換器:https://celadon-panda-dd5b59.netlify.app/


『ふたなりを大胆に解放する魔法』(フタナリリウス)!!

ビルドツールはViteでTypeScriptを使用したReactで生成してくれます。TailwindCSSでスタイリングされています。

生成されたコードについて

微妙なところ

コンポーネントに分割されておらずApp.tsxに全て記述されています。プロンプト次第かもしれませんがネタアプリなのとキャッチアップも兼ねていたのでそこは放置しています。

良いところ

単純作業的なパターンを増やす部分を良い感じに増やしてくれます。

// 魔法の構成要素
const MAGIC_COMPONENTS = {
  adjectives: [
    '静かに', '激しく', '優雅に', '力強く', '素早く',
    '緩やかに', '鋭く', '柔らかく', '厳かに', '華麗に',
    '穏やかに', '荒々しく', '繊細に', '大胆に', '神秘的に',
    '壮大に', '繊細に', '豪快に', '慎重に', '軽やかに',
    '重々しく', '鮮やかに', '滑らかに', '堂々と', '密やかに'
  ],
  verbs: [
    '操る', '支配する', '解放する', '封印する', '変容させる',
    '創造する', '消滅させる', '増幅する', '浄化する', '具現化する',
    '統合する', '分解する', '転換する', '収束する', '発散する',
    '循環させる', '凝縮する', '展開する', '融合する', '分離する',
    '再構築する', '昇華する', '還元する', '進化させる', '退化させる'
  ],
  spellSuffixes: [
    'ティア', 'リウス', 'ファーレ', 'ゼリア', 'ドナー',
    'ラント', 'ヴェリア', 'ゾーネ', 'テリウム', 'ガルド',
    'フィーレ', 'ザイデン', 'ローゼ', 'バルト', 'ドラフト',
    'ネヴィア', 'ゾルデ', 'ラーテ', 'ミリア', 'ファイア'
  ]
};

一発で出ませんでしたが語彙数を増やすようプロンプトのやり取りを通じてパターン数を増やしました。

アイコンはlucide-react

import { Sparkles, BookOpen, ArrowRight, RefreshCw, Scroll, Share2 } from 'lucide-react';

プライベートや仕事では使用したことないのですがlucide-reactがアイコンコンポーネントとして使用されておりシンプルで使いやすそうなものが多くて良さそうでした。

BoltがCalude 3.7 Sonnetに対応

実はこれを生成した後に知ったのですがすでにboltでも統合がなされていました。どうりで体感精度も高く修正も少ないわけだと感心しました。去年は無限エラーループで萎えていましたが今回は特にそんなことはありませんでした。

https://x.com/Bolt__AI/status/1894212769928679655

プロンプトは計10回ほどだと思います(履歴が過去4回分までしか遡れなかったので数えられず)。

デザインの指定はしてないのにベースカラーが完全にフェルンを想起させるプリティクールな紫基調の色合いになっていて驚きです。
時短という観点であれば下手に指示するよりポン出しで気に入ったデザインをベースに作り込んで行っても良さそうに思いました。自分含む個人開発者は数を打っていく必要があるのでBoltは土台作りに良いと思います。

Xのシェア機能も良い感じに実装してくれてboltおよびClaude 3.7 Sonnetがもはや魔法の域に近づきつつある印象です

そう、それはまるで

『プログラミングを豪快に循環させる魔法』(プログラミングヴェリア)!!

いつまでか知らないけど3ヶ月間無料で使えるコードがある

いつまで続くかわかりませんがBoltの無料クーポンが発行されています。

https://x.com/akifumi_ai/status/1894585775670661627

IIElevenLabsの特設ページにあっていつまで続くのかわかりませんがBoltの20ドルのサブスクプランが3ヶ月無料になるコードがあったので自分はそれを使ってBoltに登録してフリーレン式魔法変換器を出力しました。

ClineでClaude 3.7 Sonnetを使用する人が多いと思いますが費用が怖いという人も多いと思います(自分もまさに勘違いによりGemini APIで10万円以上の請求が来たことがあって回避したものの軽いトラウマある)

土台を作るだけであればGUIで簡単に完結するBoltの方がClaude 3.7 Sonnetを体験しやすいかと思います。

ちなみにHuggingFaceの有料プランが半年無料になるやつもあるのでもちろん登録しました(手順を通した後に1日ほどアクティベートまで時間がかかるので注意)

みんな遊んでみてね

パパ活女子にもぜひ

『おじさんを滑らかに支配する魔法』(オジサンドラフト)!!

公開URL:https://celadon-panda-dd5b59.netlify.app/
使用ツール:Bolt
Twitter:https://x.com/akifumi_ai/status/1894585775670661627

Discussion