StyleShare - Claude Code の Output Styles を共有できるコミュニティを作った

ゼネフェクトの後藤です。普段は Claude Code を使って開発をしています。最近 Output Styles という機能を知り、Claude の応答を好みの口調やキャラクターに変えられることに面白さを感じて使い始めました。せっかくなら作ったスタイルを共有できる場所が欲しい——そう思って作ったのが StyleShare です。

StyleShare とは

Output Styles は Claude Code の応答の口調や人格を自由にカスタマイズできる機能で、マークダウン形式の .md ファイルを ~/.claude/output-styles/ に配置するだけで使えます。

ツンデレ後輩、完璧な執事、関西弁のエンジニア——好みのスタイルを見つけてダウンロードするもよし、自分で作って共有するもよし。

なぜ作ったのか

Output Styles は Claude Code の中でも特に「楽しい」機能ですが、共有する場所がありませんでした。GitHub リポジトリで PR ベースで共有する動きはあるものの、非エンジニアにはハードルが高い。

ブラウザから気軽に投稿・ダウンロードできるプラットフォームがあれば、もっと多くの人が Output Styles を楽しめるのではないか。そう考えて StyleShare を作りました。

Claude Code に全部任せた

今回は「Claude Code に全部任せたらサービスは出来上がるのか」という実験として進めました。

前回のコーポレートサイト刷新では SvelteKit を意識的に選びましたが、今回は Claude Code のデフォルトのまま Next.js を採用しています。自分で技術選定をしない、というのも実験の一部です。

コードは1行も自分では書いていません。コードレビューもしていません。Claude Code にやりたいことを伝えて、出来上がったものを確認する、という進め方です。

Vercel と Supabase のセットアップも CLI を通じて Claude Code がほぼやってくれました。環境変数の設定やデータベースのテーブル作成も、指示を出せば対応してくれます。

動作確認も Claude Code にブラウザで実施してもらい、見つかったバグをその場で潰していきました。自分がやったのは GitHub OAuth の認証情報の取得くらいです。

セキュリティはどう担保したか

コードレビューをしていないからといって、セキュリティを無視したわけではありません。

投稿時には Claude API を使ったスクリーニング機能を組み込んでおり、プロンプトインジェクションや著作権に触れるコンテンツの投稿を防ぐ仕組みになっています。利用規約もきちんと用意しました。

セキュリティに関わる部分は Claude Code と慎重に壁打ちをしながら進めました。「この実装で問題ないか」「攻撃パターンとして何が考えられるか」といったやり取りを重ねて、納得できるレベルまで持っていっています。

技術スタック

全て無料枠で運用しており、ランニングコストはほぼゼロです。（Claude API の利用分は除く）

やってみてどうだったか

コードを書かずにサービスが出来上がるという体験は新鮮でした。アイデアを言語化して伝えるだけで、画面が出来上がり、機能が動き始める。これまでの開発とはまったく違う感覚です。

一方で、Vercel + Supabase の構成ではページ表示のパフォーマンスがあまり良くないと感じています。特に初回アクセス時のレスポンスが遅く、体験としてはまだ改善の余地があります。

ただ、無料で本番運用できているので、個人開発の出発点としては十分です。ユーザーが増えてきたら構成を見直せばいい話で、まずは出すことが大事だと思っています。

Claude Code に全部任せることで、アイデアから公開までのスピードがこれまでとは別次元になったと感じています。「作ってみようかな」と思ったその日のうちにリリースできる——これは開発者にとって大きな変化です。

さいごに

Output Styles を使い始めてまだ日が浅い方も、すでにいくつか作っている方も、ぜひ覗いてみてください。自信作ができたら、ぜひ投稿して共有してもらえると嬉しいです。