「Claude CodeやCursorでWebアプリを作ると、機能は動くのに見た目がいつも『紫グラデーション＋絵文字だらけのAIっぽい画面』になってしまう…」 「『デジタル庁みたいな信頼感のある画面』『CASIOの液晶時計みたいな質感』『Linearみたいなコマンドパレット』を作りたいけれど、専門用語やCSSの指示方法がわからない！」 そんなAIコーディング・個人開発者の悩みを一撃で解決する、**ブラウザで見て選べる「UIデザイン・パーツ・動き専門用語の視覚辞典Webアプリ」** と、**AIにそのまま読ませるだけでプロ品質の画面が出る「12種のMarkdownデザインシステム設計書（`.md`）」** のオールインワンパックです。 --- ### ✨ 本パックの2大収録コンテンツ #### ① 見てクリックするだけでプロンプトが完成！「インタラクティブ視覚辞典＆1クリック合成器」(`interactive_dictionary/index.html`) ブラウザで開いて、実物のミニUI標本やアニメーションを見ながらカードをクリックするだけ！ 右側の「1クリック AIプロンプト合成器」に、AIが誤解しない日英の専門用語とCSS実装ルールが自動合成されます。 - **デザインシステム・世界観様式（12標本）**：デジタル庁風ユニバーサルUI、Bento Grid、CASIO風STN反射液晶、航空計器アビオニクスMFD、Linear風ダークSaaS、スイス露出グリッド、E-Ink電子ペーパー純白黒、ネオブルータリズム、80年代CRT走査線、空間すりガラス、日本語3択ガチ比較表、脱AI感マスターチェックリスト - **UIパーツ専門用語（12標本）**：コマンドパレット（Cmd+K）、セグメンテッド・コントロール、スパークライン付きKPIカード、スケルトンローダー、トースト通知、スライドオーバードロワー、マルチステップ・ステッパー、エンプティステート、スティッキーブラーヘッダー、セマンティック・ピルバッジ、2ペイン・スプリットビュー、ディスクロージャー - **マイクロインタラクション・動き（実動アニメ標本）**：スプリング物理ポップ `cubic-bezier(0.34, 1.56, 0.64, 1)`、シマー光沢スキャン、パルス・ソナーリング、シームレス無限マーキー、時間差スタッガー出現、数字カウントアップ演出 - **配色・タイポグラフィ・脱AI感ルール**：等幅数字 `tabular-nums` 徹底、60:30:10配色＆Tinted Slate Gray、日本語組版・改行崩れ防止 #### ② Claude Code / Cursor にそのまま食わせる「12種のMarkdown設計仕様書」(`markdown_design_systems/01〜12.md`) 各デザイン様式の**カラーパレット（HEX/RGBA）・タイポグラフィ階層・枠線/影トークン・必須CSSスニペット・AIがやりがちな禁止事項**を構造化したMarkdownファイル12本を収録。 プロジェクトに置いて `@01_digital_agency_universal.md @12_anti_ai_slop_checklist.md これに従って実装して` と指示するだけで、一発でプロ品質の画面が立ち上がります。 --- ### 🎁 まずは「無料サンプル版（0円）」でお試しください！ - **無料サンプル版（0円）**：インタラクティブ視覚辞典プレビュー ＋ `01_digital_agency_universal.md`（デジタル庁風）＋ `12_anti_ai_slop_checklist.md`（脱AI感チェックリスト）の2本を収録。 - **完全版フルパック（980円）**：全12種のMarkdown設計書すべて ＋ 視覚辞典フル版 ＋ PDF図解ガイドを収録。商用開発・受託案件・個人開発プロダクトに無制限でお使いいただけます。