Claude CodeのFlintプラグインでWebサイトを会話で編集する

FlintプラグインはFlintのAIサイトビルダーとClaude Codeをつなぐプラグインです。ページの追加、文言の差し替え、セクションの作り直し、公開までを、ターミナルの会話だけで進められます。ここでは入れ方、最初の認証、編集依頼の流れ、依頼文のコツ、公開操作の扱いを順に追います。

Flintプラグインで何ができるか

Flintプラグインは、Flintが管理しているサイトを編集するためのものです。Claude Codeで開いているリポジトリのコードを書き換えるものではありません。編集の実作業はFlint側のバックグラウンドエージェントが担います。

READMEが挙げる機能は4つです。

• バックグラウンドエージェントでサイトを変更する(ページ追加、コンテンツ更新、セクションの再設計)
• エージェントの進捗を調べ、変更が済んだらプレビューURLを受け取る
• 接続済みのすべての組織にまたがってサイトを一覧する
• 準備ができたらサイトを本番に公開する

プラグインの実体は小さな構成です。リポジトリには.claude-plugin、skills/edit-site、.mcp.json、CHANGELOG.md、LICENSE、README.mdが並びます。.mcp.jsonが指す接続先はhttps://mcp.tryflint.com/mcpの1つで、種別はhttpです。ライセンスはMITです。

インストールと認証

インストールは1行です。READMEの手順どおり、Claude Codeのセッションで次を実行します。

/plugin install flint

セッション内の/plugin installは、すぐには入れずに/pluginパネルでプラグインの詳細を開きます。そこでインストール範囲(スコープ)を選びます。ユーザー、プロジェクト、ローカルの3種があり、ユーザースコープなら手元のすべてのプロジェクトで使えます。別のマーケットプレイスにある場合に備えて、name@marketplaceの形で指定する書き方もあります。シェルから入れるclaude plugin installも、同じ設定を扱います。

入れただけでは使えません。FlintのMCPサーバーにログインする必要があります。

プラグインが同梱するMCPサーバーは、plugin:<プラグイン名>:<サーバー名>の形で登録されます。ここではplugin:flint:flintです。サーバーの追加と削除は/mcpではなくプラグインのインストールと削除で行い、/mcpで切れるのはオン・オフだけです。

認証の取り消しは/mcpのメニューにある「Clear authentication」です。トークンは安全に保管され、自動で更新されます。

編集を頼む流れ

認証が済めば、普通の文章で頼めます。READMEの例は次のとおりです。

• 「Add a pricing page with three tiers to my site」
• 「Update the hero section to say 'Welcome to the Future'」
• 「Publish my site」

スキルを直接呼ぶ書き方もあります。

/flint:edit-site Add a contact form with name, email, and message fields

READMEの例とスキルの手順は英語で書かれています。日本語の依頼に対する挙動は記載がないため、サイトに入れたい文言は引用符で囲み、一字一句そのまま渡す形にしておくと食い違いを避けられます。

スキルが裏でやっていること

edit-siteスキルの手順は4段階です。

1. list_sitesでサイトを一覧し、引数にサイト名があれば照合する。複数あって指定がなければ、どのサイトか尋ねる
2. サイトIDと変更内容の依頼文を添えてrun_background_agentを呼ぶ
3. check_background_agent_statusで進捗を追う。確認の間隔は90〜120秒
4. 完了したら、変更の要約とプレビューURLを返す

待ち時間の目安もスキルに書かれています。エージェント1つで通常4〜5分、同時に10個走らせると15分ほどです。Claude Codeの側で数分待つ前提になるので、複数の変更はまとめて頼んで並列に走らせるほうが全体は早く済みます。プラグインの説明にも、複数の変更を一度に積めるとあります。

複数の変更をまとめて頼む

進捗確認の待ちが数分単位なので、独立した変更は1回の依頼に並べます。たとえば次のような頼み方です。

/flint:edit-site 料金ページに3段のプランを追加。トップのヒーロー見出しを
「Welcome to the Future」に変更。問い合わせフォームに名前・メール・本文を追加。

サイトが複数の組織にまたがるときは、list_sitesが接続済みのすべての組織のサイトを返します。どのサイトか曖昧だと、スキルは先にサイトを尋ねます。依頼文にサイト名を入れておけば、その確認が省けます。

依頼文のコツ

READMEのTipsとスキルの指示は同じ方向を向いています。

• 実装ではなく目的を書く。Flintはデザインの専門家として扱われ、レイアウトやスタイルを任せたほうが結果が良くなる
• 手元のコードスニペット、埋め込みスクリプト、参考資料は、そのまま渡す
• 指定したいことは具体的に書く。「ヘッダーを黒に」「3カラムのグリッドで」のような依頼は、そのまま尊重される

スキル側には「HTMLやCSSやマークアップを生成するな」という指示もあります。Claude Codeに構造を考えさせて長い指示を作らせるより、「料金ページが欲しい。3つのプラン、中央を強調」と意図を渡すほうが、このプラグインの想定に合います。

上の例は、READMEのTipsに沿って組んだ依頼文の形です。Flintの実際の出力を示したものではありません。

公開操作は明示したときだけ

スキルはpublish_siteを、ユーザーが公開やデプロイをはっきり求めたときにだけ使うと定めています。このツールはサイト全体をデプロイします。下書きの確認が済んでいないページも一緒に出ていく可能性があるため、プレビューURLを見てから「Publish my site」と頼む順序にしておくと事故を避けられます。

つまずきやすい点

• 認証が先: インストールしても、/mcpでの認証前はFlintのツールが使えません。
• claude -pでは認証できない: 非対話の実行にはOAuthを走らせる/mcpパネルがありません。先に対話セッションで認証を済ませます。シェルからclaude mcp login <name>でも認証でき、プラグイン同梱のサーバー名は/mcpの一覧で調べます。
• 見た目の細部は依頼文に書く: 編集の中身はFlint側のエージェントが決めます。色や列数など守ってほしい条件は、依頼文で明示します。
• バージョン表記: plugin.jsonのversionは1.1.0ですが、CHANGELOG.mdには1.0.0(2026-03-24)の項目しかありません。1.1.0で何が変わったかはCHANGELOGからは読み取れないので、差分を知りたいときはGitHubのコミット履歴を見ます。

サポートの窓口はREADMEに、ドキュメントのページ(tryflint.com/docs/claude-code-plugin)とメールアドレスが載っています。プライバシーポリシーもREADMEからたどれます。

止めたいとき

一時的に止めるなら、/pluginの「Installed」タブでFlintを無効にします。外すときは同じ画面の「Uninstall」か、シェルからのclaude plugin uninstallを使います。スコープを指定して入れた場合は--scopeで同じ範囲を指定します。MCPのログイン状態だけを消したいなら、先に挙げた/mcpの「Clear authentication」で足ります。

使いどころの見極め

Flintプラグインが向くのは、サイトの実体がFlintにあり、更新依頼がたびたび発生する運用です。コピーの差し替えや新しいランディングページの追加を、エディターを開かずに頼めます。同じように外部サービスをプラグインで操作する例は、GreptileプラグインやGitKrakenプラグインの記事にあります。

一方で、手元のリポジトリにあるNext.jsやAstroのサイトを直したいなら、対象外です。Flintが管理するサイトだけを触るプラグインだからです。MCP経由の接続とスキルの組み合わせはLogfireプラグインと同じ型で、認証をはさんで使うところまで共通しています。

まとめ

導入は/plugin install flintと/mcpでの認証の2手です。以降は/flint:edit-siteか普通の文章で頼み、プレビューURLを確かめてから公開を別に頼みます。待ち時間は数分単位なので、変更はまとめて並列に依頼するのが効率的です。