昨天才開源的瀏覽器擴展：一鍵獲取任意網站 DESIGN.md

作者：Rico的設計漫想

日期：2026年4月16日上午2:23

來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點高亮

開源瀏覽器擴展一鍵提取網站設計樣式，生成 DESIGN.md / SKILL.md 文件

整理版摘要

呢篇文章介紹咗一個新開源嘅 Chrome 瀏覽器擴展，叫 DESIGN.md Style Extractor - TypeUI。呢個插件可以從任何網站提取樣式同資訊，生成一個 DESIGN.md 或者 SKILL.md 檔案。作者特別關注開源嘅代碼，覺得可以根據自己需求去調整同定制。整體嚟講，作者讚美開源精神，認為每個人都可以學到嘢。

個擴展係由 TypeUI 團隊開發，基於開源嘅 TypeUI DESIGN.md 格式。使用好簡單，安裝插件之後一鍵點擊就得。而且源碼琴日開源咗，大家可以下載修改。作者覺得從代碼可以睇到設計規範同約束，係一個好好嘅學習機會。

插件嘅操作好直觀：自動提取當前頁面樣式，包括排版、顏色、間距、半徑、陰影同動效，然後可以生成 DESIGN.md 或 SKILL.md。生成嘅文件結構清晰，有定義使命、品牌背景、風格基礎等章節，仲有可訪問性同寫作語氣要求。呢啲規範可以作為開發代理嘅技能文件，用喺 Claude Code 或者 Codex 呢類工具。總括嚟講，呢個工具展示咗點樣用開源方式標準化設計系統，值得一試。

呢個開源擴展可以一鍵提取網站設計系統，生成結構化文檔，方便開發者快速複製設計。
安裝插件後點擊即可自動提取樣式，並可生成 DESIGN.md 或 SKILL.md。
相比手動分析，呢個工具自動化提取多種樣式屬性（排版、顏色、間距等），並輸出標準格式。
開源代碼反映咗設計規範同約束，開發者可以按需修改，定製自己嘅版本。
去 GitHub 下載源碼，研究並修改成適合自己項目嘅設計系統提取工具。

值得記低

連結 github.com

GitHub 倉庫

DESIGN.md Style Extractor 開源代碼

連結 typeui.sh

精選設計系統

TypeUI 設計系統範例

整理重點

工具背景與開源意義

呢個 Chrome 瀏覽器擴展叫

DESIGN.md Style Extractor - TypeUI

，由 TypeUI 團隊開發，基於開源嘅 TypeUI DESIGN.md 格式。

使用好簡單，安裝插件之後一鍵點擊就得。琴日源碼正式開源，任何人都可以下載修改，讚美開源！

開源

整理重點

一鍵提取，輕鬆生成

插件提供咗幾個好方便嘅操作，全部可以一鍵完成：

自動提取：從當前活動標籤頁讀取樣式，包括排版、顏色、間距、半徑、陰影同動效。
生成 DESIGN.md：從提取嘅信號生成設計系統文檔嘅 Markdown。
生成 SKILL.md：從提取嘅信號中生成適用於代理嘅技能 Markdown。
刷新：重新運行當前頁面狀態嘅提取。
下載：將生成嘅輸出保存為 DESIGN.md 或 SKILL.md。
解釋：顯示文件係點樣生成嘅，包含 TypeUI 參考。

自動提取

生成 DESIGN.md

生成 SKILL.md

整理重點

標準化的設計文檔

生成嘅 DESIGN.md 或 SKILL.md 文件遵循以下結構，每個章節都有明確目的：

使命：定義提取網站的設計系統目標。
品牌：捕捉產品/品牌背景、URL、受眾和產品界面。
風格基礎：列出推斷的視覺標記和基礎。
可訪問性：應用 WCAG 2.2 AA 要求及交互限制。
寫作語氣：設定可實施輸出的指導基調。
規則：要列出所需的實施實踐；不要列出反模式及禁止行為。
指南編寫工作流程：定義有序的指南編寫步驟。
必需的輸出結構：確保輸出部分的一致性。

使命

風格基礎

可訪問性

整理重點

從源碼學習設計規範

作者特別關注開源出嚟嘅代碼，認為從中可以清晰睇到設計規範同約束。開發者可以根據自己需求，對代碼中嘅編寫流程同規範進行調整，做出定製化版本。

設計規範和約束

定製化版本

Go to GitHub 下載源碼：https://github.com/bergside/design-md-chrome

開源/瀏覽器擴充功能：DESIGN.md Style Extractor - TypeUI

呢個 Chrome 瀏覽器擴充功能可以從任何指定網站提取樣式同資訊，生成一個 DESIGN.md 或 SKILL.md 檔案，你可以用 Google Stitch、Claude Code、Codex 等工具去建立基於特定設計系統藍圖嘅網站。

設計系統係基於開源嘅 TypeUI DESIGN.md 格式。

使用上好簡單，裝好之後，撳個擴充功能就得。

而且，呢個擴充功能係尋日發佈開源咗 design-md-chrome，即係話，任何人都可以複製落嚟，修改成自己自訂化嘅應用，讚美開源！

Github：github.com/bergside/design-md-chrome

我更關注開源出嚟嘅程式碼，因為從程式碼可以清楚睇到設計嘅規範同約束，從呢點出發，我哋只要根據自己嘅需求，對程式碼入面嘅編寫流程同規範進行調整，按照自己嘅需求去做一個自訂化嘅版本。

下面係 GitHub 儲存庫上嘅介紹

精選設計技巧

查看精選嘅設計系統：typeui.sh/design-skills

可用操作

操作	描述
自動提取	從當前活躍標籤頁讀取樣式（包括排版、顏色、間距、半徑、陰影同動畫效果）。
生成 DESIGN.md	從提取嘅信號生成設計系統檔案嘅 Markdown。
生成 SKILL.md	從提取嘅信號中生成適用於代理嘅技能 Markdown。
刷新	重新執行當前頁面狀態嘅提取。
下載	將生成嘅輸出儲存為 DESIGN.md 或 SKILL.md。
解釋	顯示檔案係點樣生成，包含 TypeUI 參考。

生成嘅檔案結構

生成嘅 markdown 跟隨呢個結構：

章節	功能
使命	定義提取網站嘅設計系統目標。
品牌	捕捉產品/品牌背景、URL、受眾同產品界面。
風格基礎	列出推斷嘅視覺標記同基礎。
無障礙性	應用 WCAG 2.2 AA 要求同互動限制。
寫作語氣	設定可實施輸出嘅指導基調。
規則：要	列出所需嘅實施實踐。
規則：唔好	列出反模式同禁止行為。
指南編寫工作流程	定義有序嘅指南編寫步驟。
必須嘅輸出結構	確保輸出部分嘅一致性。
組件規則預期	定義需要嘅互動/狀態細節。
品質檢查	增加可測試嘅品質同一致性檢查。

開發除錯

喺本地執行除錯：

node tests/run-tests.mjs

讚美開源！每個人都應該有一個 Github！

開源/瀏覽器擴展： DESIGN.md Style Extractor - TypeUI

這個 Chrome 瀏覽器插件可以從任何給定網站提取樣式和信息，生成一個 DESIGN.md 或 SKILL.md 文件，你可以用 Google Stitch、Claude Code、Codex 等工具來構建基於特定設計系統藍圖的網站。

設計系統基於開源的 TypeUI DESIGN.md 格式。

使用上非常簡單，安裝好了之後，點擊插件即可。

而且，這是插件在昨天發佈開源了 design-md-chrome, 也就是說，任何人可以複製下來，修改成自己定製化的應用，讚美開源！

Github：github.com/bergside/design-md-chrome

我更關注開源出來的代碼，因為從代碼上，可以清晰看到設計的規範和約束，從這點出發，我們只要根據自己的需求，對代碼中的編寫流程和規範進行調整，按照自己的需求去做一個定製化的版本。

下面是倉庫上的介紹

精選 design skills

查看精選的設計系統：typeui.sh/design-skills

可用操作

操作	描述
自動提取	從當前活動標籤頁讀取樣式（包括排版、顏色、間距、半徑、陰影和動效）。
生成 DESIGN.md	從提取的信號生成設計系統文檔的 Markdown。
生成 SKILL.md	從提取的信號中生成適用於代理的技能 Markdown。
刷新	重新運行當前頁面狀態的提取。
下載	將生成的輸出保存為 DESIGN.md 或 SKILL.md。
解釋	顯示文件是如何生成的，包含 TypeUI 參考。

生成的文件結構

生成的 markdown 遵循此結構：

章節	功能
使命	定義提取網站的設計系統目標。
品牌	捕捉產品/品牌背景、URL、受眾和產品界面。
風格基礎	列出推斷的視覺標記和基礎。
可訪問性	應用 WCAG 2.2 AA 要求及交互限制。
寫作語氣	設定可實施輸出的指導基調。
規則：要	列出所需的實施實踐。
規則：不要	列出反模式及禁止行為。
指南編寫工作流程	定義有序的指南編寫步驟。
必需的輸出結構	確保輸出部分的一致性。
組件規則預期	定義所需的交互/狀態細節。
質量檢查	增加可測試的質量和一致性檢查。

開發調試

在本地運行調試:

node tests/run-tests.mjs

讚美開源！每個人都應該擁有一個Github！