mikeneko-ui 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/index.js

@@ -0,0 +1,199 @@
+#!/usr/bin/env node
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from "fs";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+import { createInterface } from "readline";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TEMPLATES = resolve(__dirname, "../templates");
+const CWD = process.cwd();
+// ── Colors ──
+const bold = (s) => `\x1b[1m${s}\x1b[0m`;
+const green = (s) => `\x1b[32m${s}\x1b[0m`;
+const cyan = (s) => `\x1b[36m${s}\x1b[0m`;
+const yellow = (s) => `\x1b[33m${s}\x1b[0m`;
+const red = (s) => `\x1b[31m${s}\x1b[0m`;
+const dim = (s) => `\x1b[2m${s}\x1b[0m`;
+function log(icon, msg) {
+    console.log(`  ${icon} ${msg}`);
+}
+// ── Prompt ──
+function ask(question) {
+    const rl = createInterface({ input: process.stdin, output: process.stdout });
+    return new Promise((resolve) => {
+        rl.question(question, (answer) => {
+            rl.close();
+            resolve(answer.trim());
+        });
+    });
+}
+function detectFramework() {
+    const pkgPath = resolve(CWD, "package.json");
+    if (!existsSync(pkgPath))
+        return null;
+    const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    if (deps["next"])
+        return "nextjs";
+    if (deps["react"])
+        return "react";
+    return null;
+}
+function detectShadcn() {
+    return existsSync(resolve(CWD, "components.json"));
+}
+// ── CSS file location ──
+function findCssFile(framework) {
+    const candidates = framework === "nextjs"
+        ? [
+            "src/app/globals.css",
+            "app/globals.css",
+            "src/globals.css",
+            "styles/globals.css",
+        ]
+        : [
+            "src/index.css",
+            "src/globals.css",
+            "src/app.css",
+            "index.css",
+        ];
+    for (const c of candidates) {
+        if (existsSync(resolve(CWD, c)))
+            return c;
+    }
+    return null;
+}
+// ── Theme injection ──
+function injectTheme(cssPath) {
+    const fullPath = resolve(CWD, cssPath);
+    const original = readFileSync(fullPath, "utf-8");
+    const themeBlock = readFileSync(resolve(TEMPLATES, "theme.css"), "utf-8");
+    // Check if already injected
+    if (original.includes("mikeneko UI Theme")) {
+        log(yellow("●"), `Theme already exists in ${cssPath}`);
+        return false;
+    }
+    // Find :root block and replace, or append
+    if (original.includes(":root {")) {
+        // Replace existing :root and .dark blocks with melta theme
+        const cleaned = original
+            .replace(/:root\s*\{[^}]*\}/s, "/* :root replaced by mikeneko-ui */")
+            .replace(/\.dark\s*\{[^}]*\}/s, "/* .dark replaced by mikeneko-ui */");
+        writeFileSync(fullPath, cleaned + "\n" + themeBlock);
+    }
+    else {
+        writeFileSync(fullPath, original + "\n" + themeBlock);
+    }
+    return true;
+}
+// ── File writers ──
+function writeIfNotExists(relativePath, content) {
+    const fullPath = resolve(CWD, relativePath);
+    if (existsSync(fullPath)) {
+        log(yellow("●"), `${relativePath} already exists, skipping`);
+        return false;
+    }
+    const dir = dirname(fullPath);
+    if (!existsSync(dir))
+        mkdirSync(dir, { recursive: true });
+    writeFileSync(fullPath, content);
+    return true;
+}
+function copyTemplate(templateName, destPath) {
+    const content = readFileSync(resolve(TEMPLATES, templateName), "utf-8");
+    return writeIfNotExists(destPath, content);
+}
+function writeMcpJson() {
+    const mcpPath = resolve(CWD, ".mcp.json");
+    const mcpConfig = {
+        mcpServers: {
+            "mikeneko-ui": {
+                command: "npx",
+                args: ["-y", "mikeneko-ui", "mcp"],
+            },
+        },
+    };
+    if (existsSync(mcpPath)) {
+        // Merge into existing
+        const existing = JSON.parse(readFileSync(mcpPath, "utf-8"));
+        if (existing.mcpServers?.["mikeneko-ui"]) {
+            log(yellow("●"), ".mcp.json already has mikeneko-ui entry");
+            return false;
+        }
+        existing.mcpServers = existing.mcpServers || {};
+        existing.mcpServers["mikeneko-ui"] = mcpConfig.mcpServers["mikeneko-ui"];
+        writeFileSync(mcpPath, JSON.stringify(existing, null, 2) + "\n");
+        return true;
+    }
+    writeFileSync(mcpPath, JSON.stringify(mcpConfig, null, 2) + "\n");
+    return true;
+}
+// ── Main ──
+async function main() {
+    const args = process.argv.slice(2);
+    // Sub-command: mcp server mode
+    if (args[0] === "mcp") {
+        const { startMcp } = await import("./mcp.js");
+        await startMcp();
+        return;
+    }
+    console.log();
+    console.log(bold("  mikeneko UI") + dim(" — AI-ready design system"));
+    console.log();
+    // Step 1: Detect or ask framework
+    let framework = detectFramework();
+    if (framework) {
+        log(green("✔"), `Detected: ${bold(framework === "nextjs" ? "Next.js" : "React (Vite)")}`);
+    }
+    else {
+        console.log("  Which framework?");
+        console.log(`    ${bold("1")} React (Vite)`);
+        console.log(`    ${bold("2")} Next.js`);
+        console.log();
+        const choice = await ask("  Enter (1/2): ");
+        framework = choice === "2" ? "nextjs" : "react";
+    }
+    // Step 2: Check shadcn/ui
+    if (!detectShadcn()) {
+        console.log();
+        log(red("✖"), "shadcn/ui not found (no components.json)");
+        console.log();
+        console.log(`  Run this first:`);
+        console.log(cyan(`    npx shadcn@latest init`));
+        console.log();
+        process.exit(1);
+    }
+    log(green("✔"), "shadcn/ui detected");
+    // Step 3: Find CSS file
+    const cssFile = findCssFile(framework);
+    if (!cssFile) {
+        log(red("✖"), "Could not find globals.css / index.css");
+        process.exit(1);
+    }
+    console.log();
+    // Step 4: Inject theme
+    if (injectTheme(cssFile)) {
+        log(green("✔"), `Injected mikeneko-ui theme into ${bold(cssFile)}`);
+    }
+    // Step 5: Copy CLAUDE.md
+    if (copyTemplate("CLAUDE.md", "CLAUDE.md")) {
+        log(green("✔"), `Created ${bold("CLAUDE.md")}`);
+    }
+    // Step 6: Copy prohibited.md
+    if (copyTemplate("prohibited.md", "foundations/prohibited.md")) {
+        log(green("✔"), `Created ${bold("foundations/prohibited.md")}`);
+    }
+    // Step 7: Write .mcp.json
+    if (writeMcpJson()) {
+        log(green("✔"), `Added mikeneko-ui to ${bold(".mcp.json")}`);
+    }
+    console.log();
+    log("🎨", bold("Done!") + " Your project now uses mikeneko-ui design tokens.");
+    console.log();
+    console.log(dim("  AI tools will read CLAUDE.md and use MCP for design rules."));
+    console.log(dim("  Run `npx shadcn@latest add button` to add components."));
+    console.log();
+}
+main().catch((err) => {
+    console.error(red("Error:"), err.message);
+    process.exit(1);
+});

package/dist/mcp.d.ts

@@ -0,0 +1 @@
+export declare function startMcp(): Promise<void>;

package/dist/mcp.js

@@ -0,0 +1,123 @@
+import { readFileSync, existsSync } from "fs";
+import { resolve } from "path";
+// Lazy-load MCP SDK only when mcp subcommand is used
+export async function startMcp() {
+    const { Server } = await import("@modelcontextprotocol/sdk/server/index.js");
+    const { StdioServerTransport } = await import("@modelcontextprotocol/sdk/server/stdio.js");
+    const { CallToolRequestSchema, ListToolsRequestSchema, } = await import("@modelcontextprotocol/sdk/types.js");
+    const CWD = process.cwd();
+    function loadFile(path) {
+        const full = resolve(CWD, path);
+        if (!existsSync(full))
+            return null;
+        return readFileSync(full, "utf-8");
+    }
+    function loadJSON(path) {
+        const content = loadFile(path);
+        return content ? JSON.parse(content) : null;
+    }
+    // Try to find templates dir (installed via npm or local dev)
+    const { dirname } = await import("path");
+    const { fileURLToPath } = await import("url");
+    const __dirname = dirname(fileURLToPath(import.meta.url));
+    const TEMPLATES = resolve(__dirname, "../templates");
+    function loadTemplate(name) {
+        const full = resolve(TEMPLATES, name);
+        if (!existsSync(full))
+            return null;
+        return readFileSync(full, "utf-8");
+    }
+    const server = new Server({ name: "mikeneko-ui-mcp", version: "1.0.0" }, { capabilities: { tools: {} } });
+    server.setRequestHandler(ListToolsRequestSchema, async () => ({
+        tools: [
+            {
+                name: "get_token",
+                description: "mikeneko UI デザイントークンを取得。category: color, typography, spacing, elevation, radius, motion, zIndex, wireframe",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        category: {
+                            type: "string",
+                            description: "トークンカテゴリ",
+                            enum: ["color", "typography", "spacing", "elevation", "radius", "motion", "zIndex", "wireframe"],
+                        },
+                    },
+                    required: ["category"],
+                },
+            },
+            {
+                name: "get_component",
+                description: "shadcn/ui コンポーネント仕様を取得。name省略で全一覧。",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        name: { type: "string", description: "コンポーネント名 (例: Button, Card)" },
+                    },
+                },
+            },
+            {
+                name: "get_prohibited",
+                description: "mikeneko UI 禁止パターンを取得。",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        section: { type: "string", description: "特定セクションのみ（省略で全量）" },
+                    },
+                },
+            },
+            {
+                name: "get_quick_reference",
+                description: "CLAUDE.md (AI Quick Reference) を返す。",
+                inputSchema: {
+                    type: "object",
+                    properties: {},
+                },
+            },
+        ],
+    }));
+    server.setRequestHandler(CallToolRequestSchema, async (request) => {
+        const { name, arguments: args } = request.params;
+        const a = args;
+        const text = (s) => ({ content: [{ type: "text", text: s }] });
+        switch (name) {
+            case "get_token": {
+                // Try project-local tokens first, then bundled template
+                const tokens = loadJSON("tokens/tokens.json") ?? loadJSON(resolve(TEMPLATES, "tokens.json"));
+                if (!tokens)
+                    return text("tokens.json not found");
+                const result = tokens[a.category];
+                return result ? text(JSON.stringify(result, null, 2)) : text(`Unknown category: ${a.category}`);
+            }
+            case "get_component": {
+                const data = loadJSON("metadata/components.json") ?? loadJSON(resolve(TEMPLATES, "components.json"));
+                if (!data)
+                    return text("components.json not found");
+                if (!a.name) {
+                    const list = data.components.map((c) => `${c.name} (${c.category})`);
+                    return text(`Available (${list.length}):\n${list.join("\n")}`);
+                }
+                const comp = data.components.find((c) => c.name.toLowerCase() === a.name.toLowerCase());
+                return comp ? text(JSON.stringify(comp, null, 2)) : text(`Not found: ${a.name}`);
+            }
+            case "get_prohibited": {
+                const content = loadFile("foundations/prohibited.md") ?? loadTemplate("prohibited.md");
+                if (!content)
+                    return text("prohibited.md not found");
+                if (!a.section)
+                    return text(content);
+                const regex = new RegExp(`(##+ .*${a.section}[\\s\\S]*?)(?=\\n##[^#]|\\n---\\n|$)`, "i");
+                const match = content.match(regex);
+                return text(match ? match[1].trim() : `Section "${a.section}" not found`);
+            }
+            case "get_quick_reference": {
+                const content = loadFile("CLAUDE.md") ?? loadTemplate("CLAUDE.md");
+                return text(content ?? "CLAUDE.md not found");
+            }
+            default:
+                return text(`Unknown tool: ${name}`);
+        }
+    });
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+    console.error("mikeneko UI MCP Server running on stdio");
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "mikeneko-ui",
+  "version": "1.0.0",
+  "description": "mikeneko UI — AI-ready design system CLI. Injects theme + rules into your React/Next.js project.",
+  "type": "module",
+  "bin": {
+    "mikeneko-ui": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsx src/index.ts"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "keywords": ["design-system", "shadcn", "tailwind", "react", "nextjs", "mcp"],
+  "license": "MIT",
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.0",
+    "@types/node": "^20.0.0",
+    "tsx": "^4.0.0"
+  }
+}

package/templates/CLAUDE.md

@@ -0,0 +1,306 @@
+# mikeneko UI — AI Quick Reference
+
+> ShadCN/ui ベースのデザインシステム。Primary: Blue (#2b70ef)、日本語ファーストのタイポグラフィ。
+
+## Design Tokens (抜粋)
+
+### Colors
+```
+Primary:  #2b70ef (500), #f0f5ff (50), #07194e (950)
+Text:     #0f172a (foreground/heading), #3d4b5f (body), #64748b (muted)
+Border:   #e2e8f0
+Ring:     #2b70ef (primary)
+Success:  #059669
+Warning:  #d97706
+Danger:   #ef4444
+```
+
+### Typography
+```
+Font: Inter, Hiragino Sans, Hiragino Kaku Gothic ProN, Noto Sans JP, sans-serif
+H1: 32px/1.4 bold (text-3xl)
+H2: 26px/1.4 bold (text-2xl)
+H3: 22px/1.4 semibold (text-xl)
+Body: 18px/2.0 normal (text-base) letter-spacing: 0.02em
+Small: 15px/1.7 (text-sm)
+XS: 13px/1.4 (text-xs)
+```
+
+### Spacing
+4px grid (Tailwind default). Prefer multiples of 8.
+
+### Elevation
+none → sm → md → overlay (shadow-xl max)
+
+### Radius
+sm(4px), md(8px), lg(12px), full — globals.css: `--radius: 0.75rem`
+
+### Motion
+Fast: 150ms, Normal: 200ms, Slow: 300ms (max)
+Easing: ease-in-out (default)
+
+---
+
+## 設計原則（5つ）
+
+1. **Layered** — Background → Surface → Text/Object の3層でUIを構成する
+2. **Contrast** — テキストは背景に対してWCAG 2.1準拠（4.5:1以上）
+3. **Semantic** — 色は用途で指定する（`bg-primary` ≠ 生の `bg-blue-500`）
+4. **Minimal** — 1つのViewに使う色は3色まで（背景・アクセント・テキスト）
+5. **Grid** — スペーシングは4の倍数を基本、8の倍数を推奨する
+
+---
+
+## Components (45種 — shadcn/ui ベース)
+
+### Action
+- **Button**: default / destructive / outline / secondary / ghost / link × sm / default / lg / icon
+
+### Input
+- **Input**: default / disabled / error
+- **Textarea**: default / disabled
+- **Select**: SelectTrigger + SelectContent + SelectItem
+- **Checkbox**: unchecked / checked / indeterminate / disabled
+- **RadioGroup**: RadioGroupItem で構成
+- **Switch**: on / off / disabled（旧 Toggle switch）
+- **Slider**: single / range
+- **Calendar**: single / range date selection
+- **InputOTP**: verification code input
+- **Toggle** / **ToggleGroup**: pressed state buttons
+- **Label**: フォームラベル
+- **Command**: 検索可能なコマンドパレット
+
+### Data Display
+- **Badge**: default / secondary / destructive / outline
+- **Avatar**: AvatarImage / AvatarFallback
+- **Table**: TableHeader + TableBody + TableRow + TableHead + TableCell
+- **Card**: CardHeader + CardTitle + CardDescription + CardContent + CardFooter
+- **Carousel**: horizontal / vertical
+- **Chart**: area / bar / line / pie / radar / radial (Recharts)
+
+### Navigation
+- **Breadcrumb**: BreadcrumbList + BreadcrumbItem + BreadcrumbLink + BreadcrumbPage
+- **Tabs**: TabsList + TabsTrigger + TabsContent
+- **Pagination**: PaginationContent + PaginationItem + PaginationLink
+- **NavigationMenu**: horizontal nav
+- **Menubar**: application menubar
+- **Sidebar**: SidebarProvider ベース、collapsible 対応
+
+### Feedback
+- **Alert**: default / destructive
+- **Sonner**: toast() で呼び出し（旧 Toast）
+- **Progress**: determinate / indeterminate
+- **Skeleton**: loading placeholder
+
+### Overlay
+- **Dialog**: modal dialog（旧 Modal）
+- **AlertDialog**: confirmation dialog
+- **Sheet**: slide-in panel (top/right/bottom/left)
+- **Drawer**: bottom drawer
+- **DropdownMenu**: action menu（旧 Dropdown）
+- **ContextMenu**: right-click menu
+- **HoverCard**: hover popover
+- **Popover**: generic popover
+- **Tooltip**: TooltipProvider でラップ必須
+
+### Disclosure
+- **Accordion**: single / multiple collapsible sections
+- **Collapsible**: toggle content visibility
+
+### Layout
+- **AspectRatio**: 1:1 / 16:9 / 4:3 / 3:2
+- **Separator**: horizontal / vertical（旧 Divider）
+- **ScrollArea**: custom scrollbar
+
+---
+
+## Tailwind CSS テーマ適用
+
+```css
+/* app/src/app/globals.css — Primary: #2b70ef (oklch) */
+:root {
+  --primary: oklch(0.5765 0.2038 261.31);       /* #2b70ef */
+  --primary-foreground: oklch(1.0000 0 0);
+  --background: oklch(0.9846 0.0017 247.84);    /* #f9fafb */
+  --foreground: oklch(0.2077 0.0398 265.75);    /* #0f172a */
+  --muted-foreground: oklch(0.5544 0.0407 257.42); /* #64748b */
+  --border: oklch(0.9288 0.0126 255.51);        /* #e2e8f0 */
+  --ring: oklch(0.5765 0.2038 261.31);
+  --destructive: oklch(0.6368 0.2078 25.33);    /* #ef4444 */
+  --radius: 0.75rem;
+}
+```
+
+---
+
+## 禁止パターン要約
+
+| 禁止 | 代替 |
+|------|------|
+| `text-black` | `text-foreground` / `text-slate-900` |
+| `bg-gray-300`以上の背景 | `bg-muted` / `bg-gray-50` 〜 `bg-gray-200` |
+| `rounded-none` on cards | Card コンポーネントのデフォルト radius |
+| `shadow-lg` / `shadow-2xl` | `shadow-sm` 〜 `shadow-md`（オーバーレイ: `shadow-xl`） |
+| `border-gray-100` | `border-border` / `border-slate-200` |
+| `text-gray-400` for body | `text-muted-foreground` |
+| カード/Alert の `border-t-4` / `border-l-4` | shadcn Alert/Card のデフォルトスタイル |
+| `bg-indigo-*` / `bg-blue-*` ハードコード | `bg-primary` / CSS変数を使用 |
+| `tracking-tight` | 見出し 0.01em、本文 0.02em |
+| 色だけで情報伝達 | アイコン/テキストを併用 |
+| 300ms超のアニメーション | 150〜300ms に制限 |
+| `<th>` の `scope` 省略 | Table コンポーネント使用 |
+
+> 全禁止パターン（76項目）: `foundations/prohibited.md` 参照
+
+---
+
+## ファイル構成
+
+```
+mikeneko-ui/
+├── CLAUDE.md              ← このファイル (AI Quick Reference)
+├── tokens/
+│   └── tokens.json        ← デザイントークン (SSOT)
+├── metadata/
+│   └── components.json    ← コンポーネント仕様 (shadcn/ui ベース)
+├── foundations/            ← デザイン基盤ドキュメント (10ファイル)
+│   ├── color.md
+│   ├── typography.md
+│   ├── spacing.md
+│   ├── elevation.md
+│   ├── motion.md
+│   ├── radius.md
+│   ├── icons.md
+│   ├── accessibility.md
+│   ├── emotional-feedback.md
+│   ├── design_philosophy.md
+│   └── prohibited.md     ← 禁止パターン (76項目)
+├── components/            ← コンポーネント詳細ドキュメント
+├── patterns/              ← パターンドキュメント (5ファイル)
+├── ai/
+│   └── mcp/               ← MCP Server
+│       ├── src/index.ts
+│       └── dist/index.js
+├── app/                   ← Next.js + shadcn/ui 実装
+│   ├── src/
+│   │   ├── app/globals.css    ← テーマ (CSS変数)
+│   │   ├── components/ui/     ← shadcn/ui コンポーネント (45個)
+│   │   └── lib/utils.ts       ← cn() ユーティリティ
+│   └── components.json        ← shadcn/ui 設定
+└── docs/                  ← ドキュメントサイト
+```
+
+---
+
+## MCP Server
+
+5つのツールを提供:
+
+| ツール | 説明 |
+|--------|------|
+| `get_token` | デザイントークン取得 (color, typography, spacing, etc.) |
+| `get_component` | コンポーネント仕様取得 (shadcn/ui ベース) |
+| `get_foundation` | ファウンデーション MD 取得 |
+| `get_prohibited` | 禁止パターン取得 |
+| `get_quick_reference` | この CLAUDE.md を返す |
+
+```json
+{
+  "mcpServers": {
+    "mikeneko-ui": {
+      "command": "node",
+      "args": ["./ai/mcp/dist/index.js"]
+    }
+  }
+}
+```
+
+---
+
+## タスクベース読み込みガイド
+
+| タスク | 読み込むファイル（順序） |
+|--------|------------------------|
+| 単体コンポーネント生成 | CLAUDE.md のみ |
+| ページ生成 | + foundations/theme.md → patterns/layout.md → 関連 component md |
+| ダークモード対応 | + foundations/theme.md → foundations/color.md |
+| フォーム画面 | + patterns/form.md → Input / Select / Checkbox / Button |
+| データ一覧 | + Table → Pagination → Badge |
+| ダッシュボード | + Card / Table / Progress / Chart / Badge |
+| 設定画面 | + Tabs → Switch / Select / RadioGroup |
+| モーダル / 確認 | + Dialog / AlertDialog → Button |
+| Loading / 空状態 | + Skeleton → interaction-states.md |
+| 通知フィードバック | + Sonner → Alert → interaction-states.md |
+| サイドバー付きページ | + Sidebar → layout.md |
+| ナビゲーション | + navigation.md → Sidebar → Tabs / Breadcrumb |
+| レスポンシブ対応 | + patterns/responsive.md → layout.md |
+| アクセシビリティ確認 | + foundations/accessibility.md |
+| テーマカスタマイズ | foundations/theme.md + app/src/app/globals.css |
+
+---
+
+## テーマ・カラー変数・ダークモード
+
+> テーマ設定・CSS変数定義: `app/src/app/globals.css` を参照。
+
+| 設定 | 値 |
+|------|-----|
+| **ダークモード** | `OFF` |
+
+- `OFF`: ライトモードのみで設計・生成する（デフォルト）
+- `ON`: ダークモード対応を含めて設計・生成する（`.dark` セクション参照）
+
+---
+
+## Design Context
+
+### Users
+- **対象**: B2B / B2C 両方の汎用デザインシステム
+- **エンドユーザー**: 業務SaaSを使うビジネスパーソンから、ECサイト・予約サービスの一般消費者まで
+- **利用コンテキスト**: ダッシュボード、管理画面、EC、予約、学習、医療、行政など幅広いドメイン
+- **DSの消費者**: 人間の開発者・デザイナー、および Claude Code / Cursor 等の AI コード生成エージェント
+
+### Brand Personality
+- **3語で表すと**: 静謐・精緻・温もり（Quiet · Precise · Warm）
+- **声のトーン**: 「声を張らずに伝わる」— 主張しすぎない、でも確かに伝わる
+- **コアメタファー**: 「機能的な黒子であり、たまに微笑む」
+- **感情目標**: 心地よい集中 → 洗練された効率 → 穏やかな親しみ（この順で優先）
+
+### Aesthetic Direction
+- **ビジュアルトーン**: ミニマルだが冷たくない。フラットな基盤に Background → Surface → Text の3層で奥行きを出す
+- **参考プロダクト**: Linear / Notion / Stripe / Vercel
+- **アンチリファレンス**: 派手なグラデーション・ネオンカラー、Bootstrap 的な没個性テンプレート
+
+### Design Principles
+1. **Content First** — UIは黒子。コンテンツが主役であり、装飾ではなく構造で伝える
+2. **Calm Confidence** — 信頼感を静かに醸成する。過剰な演出より、正確なスペーシングとコントラストで品質を示す
+3. **Inclusive by Default** — WCAG 2.1 AA準拠はオプションではなくデフォルト
+4. **Systematic Warmth** — 4px グリッド・セマンティックカラー・制限されたシャドウで一貫性を保ちつつ、人間味を添える
+5. **Machine-Readable** — トークン・メタデータ・セマンティック命名により、AIエージェントが正確にUIを生成できる
+
+---
+
+## 参照先
+
+- **トークン全量**: `tokens/tokens.json`
+- **コンポーネント全量**: `metadata/components.json`
+- **禁止パターン全量**: `foundations/prohibited.md`
+- **ShadCN/ui docs**: `https://ui.shadcn.com/docs`
+
+---
+
+## デプロイ
+
+| 項目 | 値 |
+|------|-----|
+| ホスティング | Netlify（手動デプロイ） |
+| 本番URL | https://melta.tsubotax.com |
+| publish ディレクトリ | `.`（リポジトリルート）— `netlify.toml` で設定済み |
+
+```bash
+# ドキュメントサイトデプロイ
+netlify deploy --prod
+
+# Next.js アプリ (別途)
+cd app && npm run build
+```