🚀 design-md-chrome: Convert Any Website Style into AI-Ready Design Blueprints | 將任何網站風格秒轉為 AI 設計藍圖

[CN] 在 AI 驅動開發的時代，開發者面臨的最大痛點不再是寫代碼，而是如何精準地向 AI 描述「視覺風格」。傳統上，我們需要手動分析對手的 CSS、記錄顏色數值、定義間距，再將這些碎片化資訊餵給 AI，結果往往是 AI 生成的界面與預期相去甚遠。design-md-chrome 徹底擊碎了這個過程，它能將任何網站的視覺基因直接轉化為標準化的 DESIGN.md 檔案。這讓 AI 擁有了一套「視覺指令集」，讓 AI 生成的 UI 不再是隨機的，而是具備精準設計系統的工業級產出。

[EN] In the era of AI-driven development, the biggest pain point for developers is no longer writing code, but accurately describing "visual styles" to AI. Traditionally, we had to manually analyze CSS, record color values, and define spacing, then feed these fragmented bits to an AI, often resulting in interfaces that missed the mark. design-md-chrome shatters this workflow by extracting the visual DNA of any website and converting it into a standardized DESIGN.md file. This provides AI with a "visual instruction set," ensuring that AI-generated UIs are no longer random but professional outputs based on a precise design system.

🛠️ 核心功能 | Key Features

• [CN] 一鍵自動提取 (Auto-extract)： 告別手動翻找 F12 檢查元素，自動掃描字體、顏色、間距、圓角與陰影。
  [EN] One-Click Auto-extraction: Say goodbye to manually digging through F12 DevTools; automatically scan typography, colors, spacing, radius, and shadows.
• [CN] AI 就緒的 SKILL.md 生成： 不僅是文檔，更能生成 AI 代理可直接理解的技能文件，讓 Claude Code 或 Google Stitch 立即進入狀態。
  [EN] AI-Ready SKILL.md Generation: More than just documentation, it generates skill files that AI agents (like Claude Code or Google Stitch) can immediately ingest and execute.
• [CN] 標準化 TypeUI 格式： 基於 TypeUI 開源標準，確保生成的設計規範具有高度一致性與可移植性。
  [EN] Standardized TypeUI Format: Based on the open-source TypeUI standard, ensuring high consistency and portability of the generated design specifications.

💡 技術亮點 | Why It Matters

[CN] 技術亮點： 該工具不僅是 CSS 抓取器，而是一個「設計意圖翻譯機」。它將底層的 CSS 數值升級為 Mission, Brand, Accessibility 等高層次設計邏輯。比起傳統的 CSS 複製，它為 AI 提供了「為什麼這樣設計」的規則（Do's & Don'ts），從而避免 AI 在生成組件時出現視覺崩潰，極大提升了從設計到代碼的轉換效率。
[EN] Technical Highlights: This tool is not just a CSS scraper, but a "design intent translator." It elevates low-level CSS values into high-level design logic such as Mission, Brand, and Accessibility. Unlike traditional CSS copying, it provides AI with the rules of "why it's designed this way" (Do's & Don'ts), preventing visual regressions during AI component generation and drastically increasing the efficiency of design-to-code conversion.

📦 快速上手 | Quick Start

1. [CN] 安裝： 開啟 chrome://extensions $ ightarrow$ 開啟「開發者模式」 $ ightarrow$ 點擊「載入解壓縮擴充功能」 $ ightarrow$ 選擇本專案資料夾。
   [EN] Installation: Open chrome://extensions $ ightarrow$ Enable "Developer mode" $ ightarrow$ Click "Load unpacked" $ ightarrow$ Select this project folder.
2. [CN] 提取： 瀏覽至目標網站 $ ightarrow$ 執行 Auto-extract $ ightarrow$ 獲取視覺信號。
   [EN] Extraction: Navigate to the target website $ ightarrow$ Run Auto-extract $ ightarrow$ Capture visual signals.
3. [CN] 生成： 點擊 Generate DESIGN.md 或 SKILL.md $ ightarrow$ 下載並餵給你的 AI 助手。
   [EN] Generation: Click Generate DESIGN.md or SKILL.md $ ightarrow$ Download and feed it to your AI assistant.

[CN] 總結： design-md-chrome 將原本需要數小時的設計分析工作縮短至數秒，它是連接「視覺靈感」與「AI 實作」的關鍵橋樑。立即體驗並貢獻於此開源專案！
🔗 GitHub: bergside/design-md-chrome

[EN] Conclusion: design-md-chrome shrinks hours of design analysis into seconds, serving as the critical bridge between "visual inspiration" and "AI implementation." Experience it now and contribute to this open-source project!
🔗 GitHub: bergside/design-md-chrome

🔗 View on GitHub