.yaml と .md の違いをAIに聞いているうちに、統合した.mdファイルをAIリーダブルなファイル・フォーマットの作り方が理解できました。
それであれば、ウェブにテキストを入れたり、URLを指定するだけで、一瞬にして出来上がるウェブアプリの開発をしたくなったので、プロンプトを考えてもらいました。
以下は、chatGPT 無料版で考えてもらったプロンプトです。
無料なのによくぞここまで、下記の３つのプロンプトへの指示だしだけです。
なんだか詳細に詰めすぎている感がなきにしもあらず。
ClaudeCodeにひきわたします。
たまたま、ChatGPTというか、ClaudeCodeのトークン消費を節約したかったのですがｗ
とりあえず、つくって公開しました！
https://knn-yaml-md.vercel.app
ウェブの取り込みは実用的ではないので改良しますね。デザインもだな。
なんと！、あっという間に32個もの要件定義書ができあがりました！
https://github.com/knnkanda/KNN_yaml_md
Claude Code開発指示書
KNN_yaml_md
0. この指示書の扱い
この文書全体を、ひとつの開発指示書として扱ってください。
目的は、記事URL、ローカルファイル、または直接入力したテキストから、本文、要約、メタデータを抽出し、YAML Front Matter付きのMarkdownファイルを生成するWebアプリ『KNN_yaml_md』を開発することです。
このアプリは、外部AI API、クラウド保存、独自サーバー、データベースを使用せず、原則としてユーザーのブラウザ内だけで処理を完結させます。
GitHubでソースコードを公開し、Vercelへ静的Webアプリとして公開できる構成にしてください。
ただし、GitHubへのpushやVercelへのデプロイは、UIとデザインについてユーザーの承認を得るまで絶対に行わないでください。
1. アプリ名称
正式名称は、以下とします。KNN_yaml_md
画面上のタイトル、HTMLのtitle、README、package.json、GitHubリポジトリ名候補、Vercelプロジェクト名候補にも、この名称を使用してください。
表示上の補助タイトルとして、以下を使用できます。KNN_yaml_md URL・PDF・ローカルファイルからFront Matter付きMarkdownを生成
アプリ名を勝手に変更、省略、キャメルケース化しないでください。
2. プロジェクト概要
『KNN_yaml_md』は、以下の入力データを読み込み、記事本文、要約、メタデータを抽出し、YAML Front Matter付きのMarkdownファイルを生成するWebアプリです。
入力方法は、次の4種類です。
記事URL
PDFファイル
HTML、Markdown、テキストなどのローカルファイル
テキストの直接貼り付け
出力するMarkdownファイル名は、ユーザーが任意に指定できるようにしてください。
ファイル名が指定されていない場合は、記事タイトルから自動生成してください。
3. 最重要原則
以下の条件を必ず守ってください。
外部AI APIを使用しない
OpenAI APIを使用しない
Anthropic APIを使用しない
Gemini APIを使用しない
外部の要約APIを使用しない
独自バックエンドを使用しない
Vercel Functionsを使用しない
Serverless Functionsを使用しない
Edge Functionsを使用しない
API Routesを使用しない
Server Actionsを使用しない
データベースを使用しない
クラウドストレージを使用しない
ユーザー登録機能を設けない
ログイン機能を設けない
メールアドレスを取得しない
個人情報を取得しない
Google Analyticsを使用しない
広告トラッキングを使用しない
外部のアクセス解析サービスを使用しない
入力データをサーバーへ送信しない
URL、本文、ファイル名、ファイル内容を保存しない
localStorageへ記事データを保存しない
IndexedDBへ記事データを保存しない
Cookieへ記事データを保存しない
ページを閉じたら入力データが破棄される設計にする
入力データはブラウザのメモリ上だけで扱う
外部通信を必要最小限にする
実行時に外部CDNからライブラリを読み込まない
ライブラリはビルド時にnpmパッケージとして組み込む
外部Webフォントを必須にしない
Google Fontsへ接続しない構成を優先する
画面上には、次の内容を明確に表示してください。入力したURL、記事本文、PDF、ローカルファイル、ファイル名は保存・収集されません。 ファイルはサーバーへアップロードされず、すべての処理はお使いのブラウザ内で行われます。 外部AI API、データベース、クラウドストレージ、アクセス解析、広告トラッキングは使用していません。
4. 技術構成
基本構成は以下とします。
Vite
React
TypeScript
CSS Modulesまたは通常のCSS
静的サイトとしてビルド
Vercelで公開可能
GitHub Pagesでも公開可能
Node.jsは開発時およびビルド時のみ使用
実行時バックエンドなし
依存パッケージ候補は以下です。@mozilla/readabilitydompurifyjs-yamlmarkedturndownpdfjs-dist
必要に応じて、以下を使用できます。react-dropzonelucide-react
依存パッケージは必要最小限にしてください。
各ライブラリについて、READMEに以下を記載してください。
使用目的
ブラウザ内処理であること
外部サーバーへデータを送信しないこと
ライセンス
5. 画面構成
画面は、モダンなWebアプリとして設計してください。
デスクトップでは、基本的に左右2カラム構成とします。
左カラム
入力方法の選択
URL入力
ファイル読み込み
テキスト入力
抽出メタデータ編集
タグ編集
キーワード編集
出力オプション
出力ファイル名
右カラム
YAML Front Matterプレビュー
Markdownソースプレビュー
Markdownレンダリングプレビュー
生成結果の編集
コピーおよび保存ボタン
画面幅が狭い場合は、上下1カラムに切り替えてください。
6. 入力インターフェース
入力方法はタブで切り替えられるようにしてください。
タブ名は以下とします。URL PDF ファイル テキスト
PDFをファイルタブへ統合せず、独立したタブとして表示してください。
ただし、ドラッグ＆ドロップ領域ではPDFを含むすべての対応ファイルを受け付けても構いません。
7. URL入力機能
URL入力欄と『記事を取得』ボタンを設置してください。
ブラウザから直接取得可能なURLについて、HTMLを取得し、以下を抽出してください。
記事タイトル
本文
著者名
公開日
更新日
サイト名
meta description
canonical URL
OGPタイトル
OGP説明
OGPサイト名
見出し
キーワード候補
言語
元記事URL
HTML解析にはMozilla Readabilityを使用してください。
HTMLからMarkdownへの変換にはTurndownなどを使用できます。
外部HTMLはDOMPurifyなどでサニタイズしてください。
CORS制限
ブラウザ内だけで処理するため、外部サイトのCORS設定によっては記事を取得できません。
CORS制限を回避するために、以下を使用してはいけません。
外部CORSプロキシ
独自プロキシサーバー
Vercel Functions
Cloudflare Workers
外部スクレイピングサービス
外部記事抽出API
取得に失敗した場合は、次の案内を表示してください。このサイトはブラウザのセキュリティ制限により直接取得できません。 記事本文を『テキスト』タブへ貼り付けるか、記事をHTMLまたはPDFとして保存し、ローカルファイルとして読み込んでください。
URL取得はベストエフォート方式としてください。
『すべてのURLを取得できる』と誤解させる表現を使用しないでください。
8. PDF読み込み機能
PDFファイルをブラウザ内で読み込み、テキストを抽出できるようにしてください。
PDF解析には、原則としてpdfjs-distを使用してください。
PDFファイルはサーバーへアップロードせず、File API、ArrayBuffer、PDF.jsを使用してブラウザ内で解析してください。
PDFから抽出する情報
可能な範囲で、以下を取得してください。
PDFファイル名
PDFメタデータのタイトル
PDFメタデータの著者
PDFメタデータの作成日
PDFメタデータの更新日
ページ数
各ページのテキスト
-本文全体
見出し候補
先頭ページのタイトル候補
キーワード候補
言語候補
PDFテキスト処理
PDFでは、抽出した文字列の順番や改行が崩れることがあります。
以下の補正を実装してください。
不自然な改行を可能な範囲で結合
単語途中の改行を補正
連続する空白を整理
ページ番号だけの行を除外
ヘッダーとフッターの反復を可能な範囲で除外
同じ文字列の過剰な重複を除外
ページ境界をMarkdownコメントまたは見出しとして保持するオプション
日本語PDFで文字間に不自然な空白が入る場合の補正
英文PDFでハイフネーションされた単語の補正
画像PDFへの対応
画像としてスキャンされたPDFには、通常のPDF.jsだけでは本文テキストを抽出できません。
MVPではOCRを必須にしないでください。
テキストを抽出できない場合は、次の案内を表示してください。このPDFからテキストを抽出できませんでした。 画像としてスキャンされたPDFの可能性があります。KNN_yaml_mdの現在のバージョンはOCRに対応していません。テキストをコピーして『テキスト』タブへ貼り付けてください。
外部OCR APIは使用しないでください。
将来的な拡張として、ブラウザ内OCRを検討できる構成にしてください。ただし、Tesseract.jsなどの大容量ライブラリをMVPへ無理に追加しないでください。
PDFプレビュー
PDFそのものを外部サービスへ埋め込まないでください。
必要であれば、以下のみを表示してください。
ファイル名
ファイルサイズ
ページ数
抽出文字数
抽出テキストの先頭部分
抽出成功または失敗の状態
9. ローカルファイル読み込み
ドラッグ＆ドロップと、ファイル選択ボタンの両方に対応してください。
画面上では、『アップロード』という表現より、次の表現を優先してください。ローカルファイルを読み込む
補足として、次を表示してください。ファイルはサーバーへアップロードされません。お使いのブラウザ内でのみ処理されます。
対応形式
MVPでは以下に対応してください。.pdf.html.htm.txt.md.markdown
ファイル拡張子だけでなく、可能な範囲でMIMEタイプも検証してください。
対応していない形式の場合は、明確なエラーを表示してください。
ファイルサイズ制限
初期値として20MBまで対応してください。
PDFはページ数や内容によって処理負荷が高くなるため、以下の情報を表示してください。
ファイルサイズ
ページ数
処理中表示
処理完了表示
エラー表示
大きなPDFによってUIが停止しないよう、非同期処理を行ってください。
必要に応じてWeb Workerを使用してください。
10. テキスト直接入力
大きなテキストエリアを設置してください。
ユーザーは、記事本文や資料本文を直接貼り付けられるようにしてください。
任意入力項目として、以下を用意してください。
記事タイトル
著者名
公開日
更新日
元記事URL
サイト名
言語
カテゴリ
入力されていない項目は、本文から可能な範囲で推定してください。
11. 出力ファイル名
ユーザーがMarkdownファイルの名前を指定できる入力欄を設置してください。
ラベルは以下とします。出力ファイル名
例：softbank-world-2026
保存時には自動的に.mdを追加してください。softbank-world-2026.md
ユーザーがすでに.mdを付けている場合は、二重に追加しないでください。
日本語ファイル名にも対応してください。
ファイル名に使用できない文字は、安全な文字へ置換してください。
置換対象の例：/ \ : * ? " < > |
ファイル名が空の場合は、以下の優先順位で自動生成してください。
ユーザー入力タイトル
抽出された記事タイトル
PDFタイトル
元ファイル名untitled
ファイル名は保存前に編集できるようにしてください。
12. YAML Front Matter
生成結果の先頭に、次の形式でYAML Front Matterを付与してください。--- title: "" author: "" date: "" updated: "" source_url: "" site_name: "" description: "" summary: "" tags: [] keywords: [] language: "ja" content_type: "article" source_type: "" original_filename: "" page_count: 0 word_count: 0 reading_time: 0 created_at: "" ---source_typeには、入力元に応じて以下を入れてください。source_type: "url"source_type: "pdf"source_type: "html"source_type: "markdown"source_type: "text"
必要に応じて、以下の項目を追加できるようにしてください。category: "" status: "reference" slug: "" headings: [] pdf_metadata: producer: "" creator: "" creation_date: "" modification_date: ""
YAML生成ルール
YAMLとして正しく解釈できる形式にする
文字列は必要に応じてダブルクォートで囲む
ダブルクォート内の文字を適切にエスケープする
コロンを含む文字列でYAMLが壊れないようにする
改行を含む長文にはブロック形式を使用してもよい
タグとキーワードは配列にする
空の配列は[]とする
数値は数値型にする
日付形式は原則としてYYYY-MM-DDcreated_atはISO 8601形式を使用する
未取得項目を推測だけで断定しない
情報がない項目は空文字または省略を選べるようにする
13. 要約生成
外部AI APIを使用せず、ブラウザ内でルールベースの要約を生成してください。
要約方法
以下の要素を組み合わせて、重要文を抽出してください。
タイトルとの関連度
本文冒頭の文章
見出し直後の文章
頻出語
固有名詞候補
文の長さ
数値を含む文章
結論を示す文章
重複文の除外
広告やナビゲーションの除外
参考リンクだけの文章の除外
PDFのヘッダー、フッター、ページ番号の除外
要約の種類
以下の2種類を生成してください。
短い要約
100〜160文字程度。
詳細要約
300〜500文字程度。
Front Matterのsummaryには、初期状態では短い要約を入れてください。
詳細要約をMarkdown本文に追加するかどうかは、ユーザーが選択できるようにしてください。
チェックボックス：本文冒頭に『要約』セクションを追加する
ルールベース要約であることを画面上に小さく表示してください。要約は外部AIを使用せず、ブラウザ内の文章抽出処理で生成されます。
『AIが要約した』という表現は使用しないでください。
14. タグとキーワード抽出
外部APIを使わず、ブラウザ内で以下を解析してください。
タイトルに含まれる重要語
見出しに含まれる語
頻出語
英字の製品名
企業名候補
人名候補
サービス名候補
数字を含む固有表現
ハッシュタグ
PDFメタデータのキーワード
HTMLのmeta keywords
以下を除外してください。
助詞
助動詞
一般的すぎる語
一文字だけの日本語
重複語
URL
不要な記号
ナビゲーション用語
Cookie関連表示
広告関連語
抽出結果は、チップ形式などで表示してください。
ユーザーが以下を行えるようにしてください。
タグ追加
タグ削除
タグ編集
キーワード追加
キーワード削除
キーワード編集
並び替え
完全な日本語形態素解析をMVPの必須条件にしないでください。
依存パッケージが過度に大きくなる場合は、軽量なルールベース処理を優先してください。
15. Markdown本文の生成
生成するMarkdownの基本構造は以下とします。--- YAML Front Matter --- # 記事タイトル ## 要約 要約文 ## 本文 記事本文 ## 出典 - 元記事URL: - サイト名: - 著者: - 公開日: - 元ファイル:
各項目はオン・オフできるようにしてください。
出力オプション
H1タイトルを追加
要約セクションを追加
本文セクション見出しを追加
出典セクションを追加
元記事の見出し構造を保持
PDFページ区切りを保持
HTMLリンクを保持
画像URLを保持
HTMLタグを除去
空のFront Matter項目を除外
元のMarkdown Front Matterを維持
既存Front Matterを新しい内容で上書き
既存Front Matterと統合
Markdownファイルを読み込んだ場合は、既存のFront Matterを検出してください。
既存Front Matterがある場合は、次の選択肢を表示してください。既存Front Matterを維持 既存Front Matterを更新 既存Front Matterと統合 既存Front Matterを削除して再生成
16. プレビューと編集
右側のプレビュー領域では、以下のタブを切り替えられるようにしてください。YAML Markdown プレビュー
YAMLタブ
Front Matterのみ表示
編集可能
YAML構文エラー表示
YAMLだけコピー可能
Markdownタブ
Markdown全体を表示
編集可能
行番号表示は任意
全体コピー可能
プレビュータブ
MarkdownをHTMLとして安全に表示
DOMPurifyなどでサニタイズ
外部スクリプトを実行しない
iframeを表示しない
javascript:リンクを無効化
編集後の内容を、そのまま保存できるようにしてください。
17. 出力機能
以下のボタンを設置してください。
Markdownを生成
Markdownを再生成
クリップボードへコピー.mdファイルを保存
YAMLだけコピー
本文だけコピー
入力をクリア
ファイル保存にはBlob URLを使用してください。
保存処理はブラウザ内で完結させてください。
外部ストレージへの保存機能は実装しないでください。
18. デザイン要件
インターフェースは、モダンなピンク色を基調としたデザインにしてください。
単純な全面ピンクではなく、白、薄いグレー、淡いピンクを組み合わせた、読みやすく業務利用にも適したデザインとしてください。
デザインコンセプトModern Pink Gradient Soft Motion Privacy First Editorial Tool
色の方向性
候補色：背景: #FFF8FC #FFF4FA #FAFAFC メインピンク: #EC4899 #F472B6 #DB2777 淡いピンク: #FCE7F3 #FDF2F8 #FBCFE8 文字: #18181B #3F3F46 #71717A 境界線: #F5D0E3 #E4E4E7 成功: #16A34A 警告: #D97706 エラー: #DC2626
色は仮設定です。
GitHub公開前に、ユーザーへ実際の画面を提示して相談してください。
ピンク色の『ゆらぎ』
背景には、淡いピンク色のグラデーションがゆっくり動く『ゆらぎ』表現を加えてください。
実装候補：
複数のradial-gradient
CSS animation
blurred gradient blob
background-position animation
pseudo-elementによる淡い光の移動
ゆらぎは以下の条件を守ってください。
派手すぎない
入力文字の可読性を損なわない
速く動かさない
常に視線を奪わない
CPU負荷を抑える
GPU負荷を抑える
モバイル端末で重くならない
スクロール性能を損なわない
ちらつきを発生させない
アニメーション時間は、おおむね15秒から30秒程度の穏やかな周期としてください。
アクセシビリティ
OSやブラウザでprefers-reduced-motion: reduceが設定されている場合は、背景のゆらぎを停止してください。@media (prefers-reduced-motion: reduce) { /* animationを停止 */ }
背景アニメーションをユーザーが手動で停止できる設定も検討してください。
表示名例：背景のゆらぎ オン / オフ
設定を保存する場合でも、記事本文、URL、ファイル名などは保存しないでください。
UI設定のみlocalStorageへ保存する場合は、ユーザーへ明記してください。
保存しない設計でも構いません。
UI要素
角丸カード
控えめな影
半透明パネル
淡い境界線
大きめの入力欄
明確なタブ
ピンクを基調としたプライマリーボタン
コピー完了時の小さな通知
処理中の進捗表示
PDF解析中のページ進捗
ファイルドラッグ時の視覚的フィードバック
キーボード操作可能
十分なコントラスト
過度なガラスモーフィズムは避けてください。
長文編集ツールとして、文字が読みやすいことを最優先してください。
19. ヘッダー
ヘッダーには、以下を表示してください。KNN_yaml_md
サブコピー：URL・PDF・ローカルファイルからFront Matter付きMarkdownを生成
右側または下部に、小さなプライバシーバッジを表示してください。Browser Only No Upload No AI API
日本語表記を併記しても構いません。ブラウザ内処理 外部送信なし AI APIなし
20. プライバシー表示
プライバシーに関する説明は、画面内で常に確認できるようにしてください。
最低でも以下の3か所に表示してください。
ヘッダー付近のプライバシーバッジ
ファイル選択領域の近く
フッター
詳細表示文KNN_yaml_mdは、入力されたURL、記事本文、PDF、ローカルファイル、ファイル名を収集・保存しません。 PDFやローカルファイルはサーバーへアップロードされず、すべての処理はお使いのブラウザ内で行われます。 外部AI API、データベース、クラウドストレージ、アクセス解析、広告トラッキングは使用していません。 ページを閉じると、入力内容は破棄されます。
READMEにも同様の内容を記載してください。
21. セキュリティ要件
外部HTMLやMarkdownを処理するため、XSS対策を必ず行ってください。
外部HTMLをそのままDOMへ挿入しない
scriptタグを削除
styleタグを必要に応じて削除
iframeを削除
objectタグを削除
embedタグを削除
event handler属性を削除
javascript: URLを削除
data: URLを制限
SVG内スクリプトを無効化
Markdownプレビューをサニタイズ
URLスキームを検証
ファイル形式を検証
ファイルサイズを検証
PDF.js workerを安全に読み込む
CDNからworkerを取得しない
npmパッケージ内のworkerをローカルビルドへ含める
Content Security Policyを設定可能な構成にする
必要に応じて、vercel.jsonまたはHTMLメタタグでセキュリティヘッダーを設定してください。
候補：
Content-Security-Policy
X-Content-Type-Options
Referrer-Policy
Permissions-Policy
X-Frame-OptionsまたはCSP frame-ancestors
ただし、静的ホスティングで正しく動作するようにしてください。
22. 外部通信の確認
開発後、ブラウザのDevToolsでNetworkタブを確認してください。
以下を検証してください。
PDF読み込み時に外部送信が発生しない
ローカルファイル読み込み時に外部送信が発生しない
テキスト貼り付け時に外部送信が発生しない
Markdown生成時に外部送信が発生しない
コピー時に外部送信が発生しない
保存時に外部送信が発生しない
外部フォント通信が発生しない
外部分析通信が発生しない
外部AI API通信が発生しない
PDF.js workerが外部CDNから取得されていない
URL入力機能では、ユーザーが指定したURLへの取得通信が発生します。
この点は、画面とREADMEに明記してください。URL入力を使用した場合のみ、入力したURLのWebサイトへブラウザから直接アクセスします。KNN_yaml_mdのサーバーや第三者APIを経由することはありません。
23. エラー処理
以下の状況に対応してください。
URL形式が不正
HTTP以外のURL
URL取得失敗
CORS制限
ネットワークエラー
記事本文を検出できない
PDFが破損している
PDFが暗号化されている
PDFにパスワードが設定されている
PDFからテキストを抽出できない
PDFが画像のみ
PDFのページ数が非常に多い
ファイル形式が非対応
ファイルサイズが大きすぎる
ファイル文字コードを認識できない
YAML生成エラー
Markdown変換エラー
クリップボードへのコピー失敗
ファイル保存失敗
ブラウザが必要なAPIに対応していない
エラーには、次の2点を表示してください。
発生した原因
ユーザーが次に行う操作
単に『エラーが発生しました』だけで終わらせないでください。
24. 処理中表示
PDFや大きなファイルの処理には時間がかかる場合があります。
以下を表示してください。
ファイル読み込み中
PDF解析中
現在のページ
総ページ数
テキスト整形中
メタデータ抽出中
Markdown生成中
完了
中止
可能であれば、PDF解析を中止できるようにしてください。
処理中も画面全体が操作不能にならない設計を優先してください。
25. README.md
GitHubのREADMEには、以下を記載してください。
アプリ名『KNN_yaml_md』
アプリの概要
主な機能
URL入力機能
PDF対応
HTML、Markdown、テキスト対応
YAML Front Matter生成
Markdown保存
プライバシー方針
データを保存しないこと
ファイルをサーバーへ送信しないこと
外部AI APIを使用しないこと
独自サーバーを使用しないこと
URL入力時だけ対象サイトへ直接通信すること
CORS制限により取得できないURLがあること
画像PDFはOCR非対応であること
対応ブラウザ
ローカルでの起動方法
インストール方法
開発コマンド
ビルド方法
Vercelへの公開方法
GitHub Pagesへの公開方法
使用ライブラリ
セキュリティ上の注意
ライセンス
コントリビューション方法
ライセンスは、別途指定がなければMIT Licenseとしてください。
26. 想定ディレクトリ構成
以下を参考にしてください。KNN_yaml_md/ ├── public/ ├── src/ │ ├── components/ │ │ ├── Header.tsx │ │ ├── PrivacyBadge.tsx │ │ ├── InputTabs.tsx │ │ ├── UrlInput.tsx │ │ ├── PdfInput.tsx │ │ ├── FileInput.tsx │ │ ├── TextInput.tsx │ │ ├── MetadataEditor.tsx │ │ ├── TagEditor.tsx │ │ ├── OutputOptions.tsx │ │ ├── PreviewTabs.tsx │ │ ├── ProcessingStatus.tsx │ │ └── Footer.tsx │ ├── lib/ │ │ ├── urlExtractor.ts │ │ ├── htmlExtractor.ts │ │ ├── pdfExtractor.ts │ │ ├── textCleaner.ts │ │ ├── summarizer.ts │ │ ├── keywordExtractor.ts │ │ ├── yamlGenerator.ts │ │ ├── markdownGenerator.ts │ │ ├── fileNameSanitizer.ts │ │ └── security.ts │ ├── types/ │ │ └── index.ts │ ├── styles/ │ │ ├── globals.css │ │ └── animations.css │ ├── App.tsx │ └── main.tsx ├── index.html ├── package.json ├── tsconfig.json ├── vite.config.ts ├── vercel.json ├── README.md ├── LICENSE └── .gitignore
この構成は必要に応じて改善して構いません。
ただし、機能をひとつの巨大なコンポーネントへまとめないでください。
27. テスト
最低限、以下のテストを行ってください。
URL
正常に取得できるURL
CORSで失敗するURL
記事本文がないページ
不正URL
非HTTP URL
PDF
日本語テキストPDF
英語テキストPDF
複数ページPDF
メタデータありPDF
メタデータなしPDF
画像のみPDF
破損PDF
パスワード付きPDF
大容量PDF
ファイル
HTML
TXT
Markdown
Front Matter付きMarkdown
文字コードが異なるテキスト
非対応ファイル
サイズ超過ファイル
出力
YAML構文が正しい
日本語タイトル
コロンを含むタイトル
ダブルクォートを含むタイトル
複数行要約
空のタグ
日本語ファイル名
禁止文字を含むファイル名.md拡張子の二重付与防止
コピー
ファイル保存
プライバシー
localStorageに本文が残らない
IndexedDBに本文が残らない
Cookieに本文が残らない
再読み込み後に本文が残らない
PDF内容が外部送信されない
外部AI API通信がない
アクセス解析通信がない
デザイン
デスクトップ
タブレット
モバイル
ダークモードは初期MVPでは任意
prefers-reduced-motion
キーボード操作
コントラスト
長文表示
長いファイル名
長いタグ
28. 開発フェーズ
以下の順序を厳守してください。
フェーズ1：要件整理
コードを書く前に、以下を提示してください。
要件の理解
技術的制約
CORS制限
PDF対応方針
画像PDFはOCR非対応であること
技術構成
ディレクトリ構成
セキュリティ方針
プライバシー方針
開発手順
フェーズ2：ローカル実装
ローカル環境で実装してください。
この時点ではGitHubへpushしないでください。
Vercelへデプロイしないでください。
フェーズ3：ローカル動作確認
以下を確認してください。
URL入力
PDF読み込み
HTML読み込み
Markdown読み込み
TXT読み込み
テキスト入力
メタデータ抽出
要約生成
タグ生成
YAML生成
Markdown生成
コピー.md保存
データが外部送信されない
再読み込み後に入力内容が残らない
レスポンシブ表示
エラー処理
reduced-motion対応
フェーズ4：UI・デザイン相談
ローカルMVPが動作した段階で、必ず作業を停止してください。
この時点でGitHubへpushしてはいけません。
Vercelへデプロイしてはいけません。
ユーザーへ以下を提示してください。
画面全体のスクリーンショット
デスクトップ表示
モバイル表示
ヘッダー
URLタブ
PDFタブ
ファイルタブ
テキストタブ
YAMLプレビュー
Markdownプレビュー
ピンク色の配色
背景のゆらぎ
ボタンの色
フォント
カードの角丸
影の強さ
プライバシー表示の位置
モーションの速度
reduced-motion時の表示
そのうえで、以下についてユーザーと相談してください。
ピンクの濃さ
グラデーションの方向
ゆらぎの強さ
ゆらぎの速度
背景の明るさ
ボタン形状
カード形状
フォント
余白
プライバシー表示
ロゴの有無
ダークモードの要否
フェーズ5：デザイン修正
ユーザーの指示を反映してください。
フェーズ6：公開前最終確認
以下を提示してください。
最終画面
変更内容
公開予定ファイル一覧
package.json
主要依存パッケージ
README概要
プライバシー方針
セキュリティ確認結果
Network通信確認結果
Git差分
ビルド結果
テスト結果
フェーズ7：GitHub公開
ユーザーが明示的に、以下のいずれかを指示した場合のみ実行してください。GitHubへ公開してくださいpushしてくださいGitHubリポジトリを作成してください
それまでは、GitHubへの公開を行わないでください。
フェーズ8：Vercel公開
ユーザーが明示的に、以下のように指示した場合のみ実行してください。Vercelへ公開してくださいVercelへデプロイしてください
GitHub公開の承認と、Vercel公開の承認は別々に扱ってください。
GitHub公開が承認されても、Vercel公開が自動的に承認されたとは判断しないでください。
29. Git操作の禁止事項
ユーザーの明示的承認なしに、以下を実行しないでください。git push
GitHubリポジトリ作成
GitHub Pages公開
Pull Request作成
Release作成
Gitタグ作成
Vercelデプロイ
npm公開
公開URL作成
ローカルでの以下の操作についても、実行内容を説明してください。git initgit addgit commit
ブランチ作成
ローカルコミットを行う場合でも、GitHubへのpushとは明確に区別してください。
30. Claude Codeの初回回答
この指示書を受け取った直後は、すぐにGitHub公開やVercel公開を行わないでください。
最初の回答では、以下を提示してください。
『KNN_yaml_md』の要件理解
ローカル完結型設計の説明
URL取得時のCORS制限
PDF.jsによるPDF解析方針
画像PDFはOCR非対応であること
要約は外部AIではなくルールベースであること
技術構成
想定ディレクトリ構成
セキュリティ対策
プライバシー対策
ピンク色のゆらぎデザインの実装方針
開発フェーズ
GitHub公開前にUI相談で停止すること
Vercel公開には別途承認が必要であること
初回回答後、ローカル実装を開始してください。
細かなデザイン質問を最初に大量に行わないでください。
まずは仮のモダンなピンクデザインでローカルMVPを実装し、UI・デザイン相談フェーズでスクリーンショットを提示してください。
31. 完成条件
以下をすべて満たした時点で、ローカルMVP完成とします。
アプリ名称が『KNN_yaml_md』である
URL入力に対応
PDF読み込みに対応
HTML読み込みに対応
Markdown読み込みに対応
TXT読み込みに対応
テキスト直接入力に対応
PDF処理がブラウザ内で完結
ファイルがサーバーへ送信されない
テキストPDFから本文を抽出できる
画像PDFで適切な案内が表示される
記事本文を抽出できる
メタデータを抽出できる
ルールベース要約を生成できる
タグとキーワードを生成できる
YAML Front Matterを生成できる
Markdown本文を生成できる
ユーザーが出力ファイル名を指定できる
日本語ファイル名を使用できる
Markdown全体を編集できる
YAMLを編集できる
Markdownプレビューがある.mdファイルとして保存できる
クリップボードへコピーできる
外部AI APIを使用していない
独自サーバーを使用していない
データベースを使用していない
クラウド保存を使用していない
アクセス解析を使用していない
入力データを保存していない
ピンク色を基調としたモダンなUIである
背景に穏やかなピンク色のゆらぎがある
reduced-motionに対応している
レスポンシブ対応している
Vercelで静的サイトとしてビルドできる
GitHub Pagesでも公開可能である
READMEにプライバシー方針が明記されている
UI・デザイン承認前にGitHubへ公開されていない
ユーザーの承認前にVercelへ公開されていない
32. 最終的な禁止命令
UIとデザインについてユーザーの明示的承認を得る前に、以下を実行してはいけません。git push GitHubリポジトリ作成 GitHub Pages公開 Vercelデプロイ 公開URL作成
ローカル実装とローカルプレビューが完成した時点で、一度停止してください。
スクリーンショットとデザイン情報を提示し、ユーザーの判断を待ってください。
ユーザーがデザインを承認した後も、GitHub公開とVercel公開は、それぞれ個別の明示的指示を受けてから実行してください。
Views: 0
