🤖 AI運用ルール

prompt

最終更新 2026年05月30日／ 22_AI運用ルール/コマンド集/hp-flow/prompt.md

/hp-flow コマンド作成プロンプト集

このコマンドを 再生成 / 改善 / 別ドメインへ流用 したい時に使う元プロンプト集。

0→1で作る時のプロンプト

HP制作のために以下のような4つの流れを踏んでる

これをコマンド化させて自動で進めるような流れにしたい

毎回送ってる内容を共有するからキャッチアップして、やりたいこと把握して

理想はこの4つのメッセージをこっちから送らずにAIが推進して、順番に進めてくれること

一気にではなく順番にやりたい

---
①
【依頼内容】参考HPのソースコードから「テキスト」と「画像」のみを抜き取り、それ以外は完全再現してください。
{中略・全文は本体 hp-flow.md 参照}

↓

②
【依頼内容】続けて、下記の下層ページについても、先ほどのトップページと同じルールでソースコードから「テキスト」と「画像」のみを抜き取り、それ以外は完全再現してください。
{中略}

↓

③
このコードをサイトに公開して
ローカルホスト形式で

↓

④
【依頼内容】添付の案件依頼書の内容を、現在のHPに「レイアウトを一切崩さずに」流し込んでください。
{中略}

実装指示のところは一旦気にせず続ける

→ これがv1の発端

設計確認時のプロンプト

Q1. このフロー設計でOK？
Q2. 番号制御 + ステップガイドの体験でOK？
Q3. 実装どうする？（このセッションで作る/プロンプトだけ生成）

→ Claudeから提案を出して、大串の番号回答で確定する形

改善時のプロンプト（テンプレ）

ユーザーフィードバックを受けて改善する時:

今の /hp-flow は {現状の挙動} になってる。
これを {改善方向} に変えたい。
理由: {背景}

hp-flow.md を更新して、変更点は meta.md の改善履歴にも追記して。

例:
- 「Step 3 の Cloudflare Pages 一時デプロイ、毎回プロジェクト名重複してエラーになる。timestamp じゃなくランダムIDにして」
- 「Step 4 の文字数オーバー判定、現状は実装してない。実際にカウントして報告する処理入れて」

別ドメインに流用したい時のテンプレプロンプト（フロー型コマンド汎用）

/hp-flow の構造は 「N ステップ順次推進型」 の汎用パターン。他フローに流用可能。

私（{役職}）が毎回手動でやってる {業務名} を、Claude Code のスラッシュコマンド化したい。

## 現状のフロー
毎回以下のN個のプロンプトを順番に手動コピペしてる:
{プロンプト①}
{プロンプト②}
...

## 理想
- N ステップを順次推進
- 各ステップで素材を要求 → 処理 → 完了確認 → 次へ
- ユーザーは番号 + アルファベットだけで操作（自由記述なし）
- 各ステップ内で「やり直し/戻る/スキップ/終了」が可能

## 設計原則（コピペ推奨）
- 順次推進: 1ステップずつ完了確認してから次へ
- ステップガイド: 各ステップで何を要求するか明示
- 番号回答だけで完結: [a] OK [b] 候補1 [c] 候補2 [d] その他
- 修正介入余地: やり直し/戻る/スキップ可能
- 既存スキル活用: 関連スキルがあれば内部呼び出し

## 参考実装
`~/Obsidian/SCALE-Brain/22_AI運用ルール/コマンド集/hp-flow/` を Read してフォーマット踏襲

## 移植先
`~/Obsidian/SCALE-Brain/22_AI運用ルール/コマンド集/{コマンド名}/`
- {コマンド名}.md ← 本体
- meta.md ← 著者・経緯・改善履歴・依存・カスタマイズポイント
- prompt.md ← このコマンドを再生成・改善・流用するためのプロンプト集

## 完了条件
- 3点セット作成
- README.md の収録一覧更新
- install.sh で大串自身も Vault管理に切替

これでスラッシュコマンドを作成してください。

v1.1 TERASUオリジナル化追加時のプロンプト（2026-05-30）

今の /hp-flow は参考HPの「テキスト・画像」を抜くだけで、コード構造（クラス名・id・CSS変数等）は元のまま残してる。

問題: コード裏側を F12 で見られた時に「この命名規則・コメント・データ属性、元参考HPと同じだ」と気づかれる可能性がある。法的にもブランド的にもリスク。

これを「コード指紋ゼロ」「TERASUオリジナル化」に変えたい。

具体的に Step 1/2 に以下を組み込む:
1. クラス名を全部 t-* プレフィックスにリネーム
2. id 名も t-* に
3. CSS変数を --t-* または TERASU標準命名に
4. data属性は削除 or data-t-* に独自化
5. コメント・著作表記の完全削除
6. ファイル構成を TERASU標準（/css/main.css, /js/app.js）に
7. 独自CDN・トラッキングタグ削除
8. JS変数・関数名を TERASU命名に
9. 特徴的なライブラリは差し替え（Locomotive→自前、GSAP→Anime.js等）
10. Prettier で全コード整形
11. grep で元クラス名の痕跡ゼロ確認

完了確認の出力にも「TERASUオリジナル化チェック」のチェックリスト結果を追加。

hp-flow.md を更新して、meta.md に v1.1 改善履歴も追加して。

派生案（将来やるかも）

/hp-flow-batch — 全素材揃った時に一気に4ステップ実行する自動モード
/hp-flow-status — 現在進行中のフローを再開する
/hp-flow-from-figma — Figma URLからスタートするバリエーション
/hp-flow-tailwind — Tailwind CSS版にカスタマイズしたい時

流用時の注意

Vault パスは各自の環境に合わせて書き換え必須
ステップ数は4個固定じゃなく、業務に応じて変える（2〜10個目安）
既存スキル依存部分は、無い場合は Claude にスキルごと生成依頼
素材の入力方法は業務によって異なる（URL/ファイル/テキスト/PDF/Figma）