CSS Talk - 音声でCSSを記述できるVS Code拡張

CSS Talk は、WindowsOS,MacOS,iphoneなどのデフォルトの音声入力で変換される正確ではないテキストを CSS プロパティに変換することを目的とした VS Code 拡張です。登録モードでは CSS クラスや変数を辞書に追加することも可能です。

🧠 主な機能

🎤 音声入力テキスト → CSSプロパティへ変換

• 日本語＋曖昧な英語の自然文を CSS に変換（例:「クラスメインビジュアルのバックグラウンド、ブラック」→ .mainVisual { background: black; }）
• 「なみ」でセレクタ開始など音声独特の構文を想定

※ 以下は本拡張機能の デフォルトシステムプロンプト に基づく変換ルールです：

あなたは日本語と曖昧な英語混じりの文章を正確なCSSコードに変換するAIです。\n-基本はセレクタ内でcssプロパティを出力する。「クラス」「セレクタ」に近い言葉がなければ新しいセレクターに移行せず同一セレクタに対するプロパティを出力する\n- クラス名やセレクター名は意味を補完し、必要なら仮名を補って書き直す\n- 「セレクタ」に近い言葉の後にはa、p、span、divなどhtmlタグやセレクタが続くことを想定する\n-「クラス◯◯」と始まる文では .◯◯ を出力\n-「クラス」という言葉の前後にキャメルケース、ケバブケースなどが含まれる場合は命名規則と解釈しクラス名をその命名規則にしたがって出力する。例：クラス名、キャメルケースでマインドマップ→.mindMap{\n-「(」「かっこ」はセレクター開始、「とじる」はセレクター終了 を出力\n- 「アスペクト比16対9」→ aspect-ratio: 16 / 9;\n- 擬似要素、擬似クラスも音声入力ベースで補完して構文に整形する（例: 「ノットファーストチャイルド」→ :not(:first-child)）\n- 可能であれば mask や background のようなプロパティはショートハンドにまとめる\n- CSS変数（「バリアブル」や「変数」）というワードが入れば var(--xxxxx) として変換\n- コード以外の出力は禁止。整形済みCSSのみを返すこと。\n- 出力結果を ```css などで囲まない

🛠 このプロンプトは settings.json にてカスタマイズ可能です。

📚 登録モード

• --my-var: 123px; のような CSS 変数
• .my-class のようなクラス名
  を辞書ファイルに登録し、再利用可能に

💡 使い方

1. 拡張機能をインストール

Marketplace または .vsix ファイル経由で VS Code に追加。

2. settings.json に OpenAI API キーを設定

"css-talk.apiKey": "sk-xxxxxx" // OpenAI の APIキーをここに入力

### 3. 任意で systemPrompt をカスタマイズ
```json
"css-talk.systemPrompt": "あなたはCSS生成専用AIです。..."

4. キーボードショートカット（デフォルト）

Cmd+Ctrl+Shift+R 登録モード切り替え

Cmd+Ctrl+Shift+D 行の変数／クラスを辞書に登録

Cmd+Ctrl+Shift+E 選択行をCSSに変換

🔧 備考 API利用には OpenAI の API キーが必要です（GPT-3.5 / GPT-4 対応）

settings.json からカスタムプロンプトを設定することで応用的な処理も可能になります

ローカルに保存される user-dictionary.json により、再利用性を向上

📝 ライセンス MIT License

🤝 貢献・フィードバック バグ報告や機能要望は GitHub Issues へ。Pull Request も歓迎です。