我開源了復刻網站設計為 DESIGN.md 的 Skill，讓你的 Agent 完美復刻所有網站！
整理版優先睇
我開源了任意網站品牌 -> DESIGN.md 的 SkillGoogle 開放標準 DEISGN.md 後，讓咱們這種非專業設計師也能復刻頂級設計品味的網站產品了！咱們之前使用 Apple DESIGN.md 復刻過 Apple 官網，效果不理想，這回我想用自己的 Skill 復刻，朋友們可以對比看看。之前復刻版本咱們的 Skill 復刻版本 已關注 關注 重播 分享 贊 關閉觀看更多更多退出全屏切換到豎屏全屏退出全屏AI 啓蒙小夥伴已關注分享視頻，時長00:120/000:00/00:12 切換到橫屏模式 繼續播放進度條，百分之0播放00:00/00:1200:12倍速全屏 倍速播放中 0.5倍 0.75倍 1.0倍 1.5倍 2.0倍 超清 流暢 您的瀏覽器不支持 video 標籤 繼續觀看 我開源了復刻網站設計為 DESIGN.md 的 Skill，讓你的 Agent 完美復刻所有網站！ 觀看更多原創,我開源了復刻網站設計為 DESIGN.md 的 Skill，讓你的 Agent 完美復刻所有網站！AI 啓蒙小夥伴已關注分享點贊在看已同步到看一看寫下你的評論 視頻詳情 今天和我的 Codex 一起整理了復刻網站設計風格的步驟，測試下來效果還真得不錯，我也把它沉澱成了 Skill 分享給大家。安裝方法：npx skills add https://github.com/shaom/brand-to-design-md-skill --skill brand-to-design-md使用方法：Use brand-to-design-md to extract https://example.com into a DESIGN.md and demo HTML.開源地址：Brand to DESIGN.md Skillhttps://github.com/shaom/brand-to-design-md-skill[1]歡迎朋友們 ⭐️ 和 PR 👏🏻一起看看復刻思路步驟1. 對齊標準先參考 Google Labs 開源的 DESIGN.md 標準，明確目標不是寫品牌介紹，而是把品牌視覺系統轉成 agent 可執行的設計上下文：token、組件規則、佈局規則、圖像規則、Logo 使用邊界和 Do / Don’t。2. 收集證據優先看官方官網、品牌頁、press kit、newsroom、公開 CSS、SVG、圖片資產。設計機構案例可以作為品牌理念和視覺語言的補充。第三方資料只作輔助，不作為主要依據。3. 提取設計 token不只是記錄顏色值，而是給每個 token 定義角色：主色用在哪裏，強調色什麼時候出現，字體如何分工，圓角、間距、組件如何服務品牌氣質。4. 寫成 DESIGN.md文件結構包括 frontmatter token 和正文說明。正文重點寫清楚顏色、字體、佈局、組件、圖像、Logo 使用邊界，以及 agent 應該避免的偏差。5. 生成演示網頁用這個 DESIGN.md 做一個真實可看的單文件 HTML。首屏要體現品牌，不做說明頁。頁面至少覆蓋按鈕、卡片、表單、數據或代碼區、品牌視覺母題。6. 瀏覽器驗證用 Chrome 檢查桌面和移動端：背景圖是否加載、是否有橫向溢出、控制枱是否報錯、文字是否可讀、品牌感是否成立。7. 交付結果輸出 DESIGN.md、demo HTML、截圖、來源說明，以及哪些是直接證據、哪些是合理推斷。相關文章推薦谷歌正式開源 DESIGN.md 為開放標準，屬於 AI Design 的 CLAUDE.md 來了，Design 優質資源站也來了！Claude Design 系統提示詞泄露，如果把它做成 Skill，能復刻 Claude Design 嗎？
我開源了任意網站品牌 -> DESIGN.md 的 SkillGoogle 開放標準 DEISGN.md 後，讓咱們這種非專業設計師也能復刻頂級設計品味的網站產品了！咱們之前使用 Apple DESIGN.md 復刻過 Apple 官網，效果不理想，這回我想用自己的 Skill 復刻，朋友們可以對比看看。
之前復刻版本咱們的 Skill 復刻版本 已關注 關注 重播 分享 贊 關閉觀看更多更多退出全屏切換到豎屏全屏退出全屏AI 啓蒙小夥伴已關注分享視頻，時長00:120/000:00/00:12 切換到橫屏模式 繼續播放進度條，百分之0播放00:00/00:1200:12倍速全屏 倍速播放中 0.5倍 0.75倍 1.0倍 1.5倍 2.0倍 超清 流暢 您的瀏覽器不支持 video 標籤 繼續觀看 我開源了復刻網站設計為 DESIGN.md 的 Skill，讓你的 Agent 完美復刻所有網站！
觀看更多原創,我開源了復刻網站設計為 DESIGN.md 的 Skill，讓你的 Agent 完美復刻所有網站！AI 啓蒙小夥伴已關注分享點贊在看已同步到看一看寫下你的評論 視頻詳情 今天和我的 Codex 一起整理了復刻網站設計風格的步驟，測試下來效果還真得不錯，我也把它沉澱成了 Skill 分享給大家。安裝方法：npx skills add https://github.com/shaom/brand-to-desig…
- 我開源了復刻網站設計為 DESIGN.md 的 Skill，讓你的 …
- 我開源了復刻網站設計為 DESIGN.md 的 Skill，讓你的 …
- 我開源了復刻網站設計為 DESIGN.md 的 Skill，讓你的 …
- 我開源了復刻網站設計為 DESIGN.md 的 Skill，讓你的 …
- 我開源了復刻網站設計為 DESIGN.md 的 Skill，讓你的 …
可記低 Prompt
我開源了任意網站品牌 -> DESIGN.md 的 SkillGoogle 開放標準 DEISGN.md 後，讓咱們這種非專業設計師也能復刻頂級設計品味的網站產品了！咱們之前使用 Apple DESIGN.md 復刻過 Apple 官網，效…
整理版
我開源了任意網站品牌 -> DESIGN.md 的 SkillGoogle 開放標準 DEISGN.md 後，讓咱們這種非專業設計師也能復刻頂級設計品味的網站產品了！咱們之前使用 Apple DESIGN.md 復刻過 Apple 官網，效果不理想，這回我想用自己的 Skill 復刻，朋友們可以對比看看。之前復刻版本咱們的 Skill 復刻版本 已關注 關注 重播 分享 贊 關閉觀看更多更多退出全屏切換到豎屏全屏退出全屏AI 啓蒙小夥伴已關注分享視頻，時長00:120/000:00/00:12 切換到橫屏模式 繼續播放進度條，百分之0播放00:00/00:1200:12倍速全屏 倍速播放中 0.5倍 0.75倍 1.0倍 1.5倍 2.0倍 超清 流暢 您的瀏覽器不支持 video 標籤 繼續觀看 我開源了復刻網站設計為 DESIGN.md 的 Skill，讓你的 Agent 完美復刻所有網站！ 觀看更多原創,我開源了復刻網站設計為 DESIGN.md 的 Skill，讓你的 Agent 完美復刻所有網站！AI 啓蒙小夥伴已關注分享點贊在看已同步到看一看寫下你的評論 視頻詳情 今天和我的 Codex 一起整理了復刻網站設計風格的步驟，測試下來效果還真得不錯，我也把它沉澱成了 Skill 分享給大家。安裝方法：npx skills add https://github.com/shaom/brand-to-design-md-skill --skill brand-to-design-md使用方法：Use brand-to-design-md to extract https://example.com into a DESIGN.md and demo HTML.開源地址：Brand to DESIGN.md Skillhttps://github.com/shaom/brand-to-design-md-skill[1]歡迎朋友們 ⭐️ 和 PR 👏🏻一起看看復刻思路步驟1. 對齊標準先參考 Google Labs 開源的 DESIGN.md 標準，明確目標不是寫品牌介紹，而是把品牌視覺系統轉成 agent 可執行的設計上下文：token、組件規則、佈局規則、圖像規則、Logo 使用邊界和 Do / Don’t。2. 收集證據優先看官方官網、品牌頁、press kit、newsroom、公開 CSS、SVG、圖片資產。設計機構案例可以作為品牌理念和視覺語言的補充。第三方資料只作輔助，不作為主要依據。3. 提取設計 token不只是記錄顏色值，而是給每個 token 定義角色：主色用在哪裏，強調色什麼時候出現，字體如何分工，圓角、間距、組件如何服務品牌氣質。4. 寫成 DESIGN.md文件結構包括 frontmatter token 和正文說明。正文重點寫清楚顏色、字體、佈局、組件、圖像、Logo 使用邊界，同埋 agent 應該避免的偏差。5. 生成演示網頁用呢個 DESIGN.md 做一個真實可看的單文件 HTML。首屏要體現品牌，不做說明頁。頁面至少覆蓋按鈕、卡片、表單、數據或代碼區、品牌視覺母題。6. 瀏覽器驗證用 Chrome 檢查桌面和移動端：背景圖是否加載、是否有橫向溢出、控制枱是否報錯、文字是否可讀、品牌感是否成立。7. 交付結果輸出 DESIGN.md、demo HTML、截圖、來源說明，同埋哪些是直接證據、哪些是合理推斷。相關文章推薦谷歌正式開源 DESIGN.md 為開放標準，屬於 AI Design 的 CLAUDE.md 來了，Design 優質資源站也來了！Claude Design 系統提示詞泄露，如果把它做成 Skill，能復刻 Claude Design 嗎？
我開源了任意網站品牌 -> DESIGN.md 的 Skill
Google 開放標準 DEISGN.md 後，讓咱們這種非專業設計師也能復刻頂級設計品味的網站產品了！
咱們之前使用 Apple DESIGN.md 復刻過 Apple 官網，效果不理想，這回我想用自己的 Skill 復刻，朋友們可以對比看看。
之前復刻版本
咱們的 Skill 復刻版本
今天和我的 Codex 一起整理了復刻網站設計風格的步驟，測試下來效果還真得不錯，我也把它沉澱成了 Skill 分享給大家。
安裝方法：
npx skills add https://github.com/shaom/brand-to-design-md-skill --skill brand-to-design-md
使用方法：
Use brand-to-design-md to extract https://example.com into a DESIGN.md and demo HTML.
開源地址：
Brand to DESIGN.md Skill
https://github.com/shaom/brand-to-design-md-skill[1]
歡迎朋友們 ⭐️ 和 PR 👏🏻
一起看看復刻思路步驟
1. 對齊標準
先參考 Google Labs 開源的 DESIGN.md 標準，明確目標不是寫品牌介紹，而是把品牌視覺系統轉成 agent 可執行的設計上下文：token、組件規則、佈局規則、圖像規則、Logo 使用邊界和 Do / Don’t。
2. 收集證據
優先看官方官網、品牌頁、press kit、newsroom、公開 CSS、SVG、圖片資產。設計機構案例可以作為品牌理念和視覺語言的補充。第三方資料只作輔助，不作為主要依據。
3. 提取設計 token
不只是記錄顏色值，而是給每個 token 定義角色：主色用在哪裏，強調色什麼時候出現，字體如何分工，圓角、間距、組件如何服務品牌氣質。
4. 寫成 DESIGN.md
文件結構包括 frontmatter token 和正文說明。正文重點寫清楚顏色、字體、佈局、組件、圖像、Logo 使用邊界，以及 agent 應該避免的偏差。
5. 生成演示網頁
用這個 DESIGN.md 做一個真實可看的單文件 HTML。首屏要體現品牌，不做說明頁。頁面至少覆蓋按鈕、卡片、表單、數據或代碼區、品牌視覺母題。
6. 瀏覽器驗證
用 Chrome 檢查桌面和移動端：背景圖是否加載、是否有橫向溢出、控制枱是否報錯、文字是否可讀、品牌感是否成立。
7. 交付結果
輸出 DESIGN.md、demo HTML、截圖、來源說明，以及哪些是直接證據、哪些是合理推斷。
相關文章推薦
谷歌正式開源 DESIGN.md 為開放標準，屬於 AI Design 的 CLAUDE.md 來了，Design 優質資源站也來了！