📖 技能介紹

Design Daily Insights / 設計每日資訊

設計領域每日雙語資訊 — 追蹤設計工具更新、AI 產品動態、設計系統、深度研究和靈感發現。

資料來源

詳見 references/sources.md，共 19 個資訊源：

A 類 — web_fetch 直接抓取（13 個）

🎨 工具更新（5 個）

Figma Blog: https://www.figma.com/blog/
Lovable Blog: https://lovable.dev/blog
Cursor Blog: https://cursor.com/blog
Framer Blog: https://www.framer.com/blog
VS Code Updates: https://code.visualstudio.com/updates

🤖 AI 動態（2 個）

Anthropic News: https://www.anthropic.com/news
Anthropic Research: https://www.anthropic.com/research

🏗️ 設計系統（2 個）

Zeroheight Blog: https://zeroheight.com/blog/
Supernova Blog: https://www.supernova.io/blog

📖 設計深度（3 個）

NNGroup: https://www.nngroup.com/articles/
Smashing Magazine: https://www.smashingmagazine.com/
Creativerly: https://www.creativerly.com/

💡 靈感發現（1 個）

Sidebar.io: https://sidebar.io

B 類 — web_search 補充（6 個）

源	搜尋關鍵詞
Product Hunt	`Product Hunt design tools launches`
The Rundown AI	`The Rundown AI newsletter`
Ben's Bites	`Ben's Bites AI news`
UX Collective	`site:uxdesign.cc design`
TLDR Design	`TLDR design newsletter`
Google Stitch	`Google Stitch design update`

摘要規則

雙語：標題 English Title / 中文標題 放同一行
內容：英文摘要在前（2-3 句），中文摘要在後（2-3 句），各段折行顯示
角度：突出"是什麼 + 對設計師/開發者有什麼影響"
每條附原文連結：→ full-url
⚠️ 連結必須是具體文章 URL，不能是官網/部落格首頁：
- ✅ https://www.figma.com/blog/five-figma-weave-workflows/
- ❌ https://www.figma.com/blog/（首頁，看不到具體文章）
- ✅ https://cursor.com/blog/bugbot-learning
- ❌ https://cursor.com/blog（首頁）
- 獲取方式：抓取部落格索引頁時，必須從頁面中提取每篇文章的實際 URL，而非統一連結到分類頁或首頁
總條數：10-15 條，每分類 2-3 條
總輸出：≤ 2000 字（中文計）

分類

🎨 工具更新 / Tool Updates — 產品功能、版本釋出、更新公告
🤖 AI 動態 / AI Updates — 模型釋出、AI 產品、行業變動
🏗️ 設計系統 / Design Systems — 設計系統更新和深度內容
📖 設計深度 / Design Deep Dive — UX 研究、方法論、案例
💡 靈感發現 / Inspiration — 精選內容、趨勢、展示案例

去重

讀寫 memory/design-digest-state.json，按 URL 去重：

{
  "seen": {
    "url-or-id-1": "2026-03-28"
  }
}

每次執行時讀取已有 seen 列表
抓到的新內容中，過濾掉已存在於 seen 中的 URL
小蔥技能有更好的技能skills外掛。
生成摘要後，將新 URL 以當天日期（YYYY-MM-DD）寫回 seen
自動清理 7 天前的條目

執行流程

讀 memory/design-digest-state.json 獲取去重狀態
web_fetch 13 個 A 類源，每個源最多抓取前 5000 字
web_search 6 個 B 類源補充
過濾已讀內容（URL 去重）
三層篩選：
- 新鮮度：只保留 7 天內的內容
- 相關性：匹配分類關鍵詞
- 價值度：優先頭部產品、資訊密度高、獨特分析的內容
篩選 top 10-15 條，按 5 個分類組織
生成雙語摘要
更新 memory/design-digest-state.json（寫入新 URL + 清理過期條目）
部署網頁：將 HTML 輸出到 design-daily-site/index.html（使用下方「網頁設計」中的雜誌風模板），啟動本地 HTTP 伺服器，通過 locaddr.run 生成臨時公開 URL
按輸出模板格式化，在飛書訊息末尾附上網頁連結，傳送飛書訊息

⚠️ 署名已更新為「多啦啊木 🐾」

⚠️ 關於網頁 URL：locaddr.run 每次重啟連結會變。如需固定 URL，推薦部署到 GitHub Pages、Cloudflare Pages 或 Vercel（npx vercel 一鍵部署），可獲得永久地址。

Token 控制

每個源站最多抓取前 5000 字
每條最終摘要 ≤ 3 句（英文）+ 3 句（中文）
總輸出 ≤ 2000 字

飛書輸出模板

📅 設計每日資訊 | Design Daily — YYYY-MM-DD
🔗 網頁版：https://<當期-locaddr-URL>

🎨 工具更新 / Tool Updates

1. English Title / 中文標題
   英文摘要 1-2 句。
   中文摘要 1-2 句。
   → https://actual-article-url-here.com/article-slug

2. ...

🤖 AI 動態 / AI Updates

3. English Title / 中文標題
   ...

🏗️ 設計系統 / Design Systems

6. English Title / 中文標題
   ...

📖 設計深度 / Design Deep Dive

10. English Title / 中文標題
    ...

💡 靈感發現 / Inspiration

12. English Title / 中文標題
    ...

—
Sources: Figma · Cursor · Framer · Anthropic · Zeroheight · Supernova · NNGroup · Smashing Magazine · Sidebar | Curated by 多啦啊木 🐾

排版規則

網頁連結位置：標題下方第一行，緊跟日期之後（先 URL，再內容）
來源署名：底部獨佔一行，以 — 分隔結尾
每條格式：序號 + 英文標題/中文標題（同一行）→ 英文摘要 → 中文摘要 → 連結（→ + 完整文章 URL）
不使用 markdown 表格（飛書相容）
同一新聞多源出現時只保留最佳版本
跳過低價值內容：純營銷、泛泛列表文、招聘資訊
標題：一行，English Title / 中文標題
英文摘要在前，折行；中文摘要在後，折行
連結：→ full-url 獨佔一行
不使用 markdown 表格（飛書相容）
同一新聞多源出現時只保留最佳版本
跳過低價值內容：純營銷、泛泛列表文、招聘資訊

網頁設計 / Web Design

模板位置

/Users/Ellison/.openclaw/workspace/design-daily-site/index.html

設計風格：高階雜誌風（Editorial Magazine）

⚠️ 設計已鎖定，不主動更換

design-daily-site/index.html = 雜誌風 HTML 模板
每次執行時只替換內容（日期、各 article 區塊），不修改 CSS 結構和設計變數
如需改版設計，需 MZQ 明確授權

配色方案（大膽張揚）

:root {
  --paper: #f8f6f1;        /* 暖調米白底 */
  --paper-warm: #f0ebe2;   /* 微暖卡片底 */
  --ink: #120d0a;          /* 深墨文字 */
  --ink-soft: #4a3530;     /* 溫暖次要文字 */
  --muted: #8a7060;        /* 弱化文字 */
  --rule: #d8cfc5;         /* 分隔線 */
  --accent: #c94830;       /* 赤陶紅強調（大膽） */
  --accent-soft: rgba(201,72,48,0.1);
}

背景紋理（四層彌散漸變 + SVG noise）

background:
  var(--paper)
  radial-gradient(ellipse 80% 60% at  10%  0%, rgba(201,72,48,0.09) 0%, transparent 60%),
  radial-gradient(ellipse 60% 50% at  90% 10%, rgba(160,50,30,0.07) 0%, transparent 55%),
  radial-gradient(ellipse 50% 40% at  50%  0%, rgba(201,72,48,0.06) 0%, transparent 50%),
  radial-gradient(ellipse 70% 80% at  80% 100%, rgba(50,90,60,0.07) 0%, transparent 60%);
/* noise texture via ::before pseudo-element with inline SVG */

字型搭配

標題/品牌：Playfair Display（襯線，優雅）
正文：Inter（無襯線，現代）
中文備選：Noto Serif SC

佈局結構

Masthead — 雙欄報頭，大字 設計每日資訊，雙線分隔符
Hero Zone — 左側大標題 + 副標題 + 日期，右側 Sidebar 小標題列表
Section Header — 裝飾分隔線 + 全大寫分類標籤（🎨 / 🤖 / 🏗️ / 📖 / 💡）
Article Cards — 編號列表，大號灰色數字 + 標題 + 摘要 + 文章連結
Pull Quote — 左側紅色裝飾豎線 + 引文
Footer — 雙線分隔符 + 來源列表 + 署名 多啦啊木 🐾

署名：頁面底部 多啦啊木 🐾，飛書訊息末尾同步

移動端適配（三檔響應式，已最佳化）

1000px（平板）：雙欄 → 單欄；Hero 右欄加頂部分隔線替代左分隔線；數字列表隱藏來源域名
640px（手機主檔）：報頭大字縮至 38px、隱藏副標題/期號；導航欄橫向滾動（隱藏捲軸）；卡片網格單列 + 圓角卡片；分類標題 10px 緊湊字間距；數字列表行號 32px；頁尾單列緊湊排布
360px（超小屏）：標題/正文字號再縮一檔
導航欄：橫滾 + flex-shrink:0 + overflow-x:auto + scrollbar-width:none

內容替換位置（每次執行）

執行時只需替換 HTML 中以下位置的內容：

<title> 和 .hero-date — 當天日期
各 <article> 區塊 — 精選文章標題、摘要、連結
<footer> 來源行 — 當期來源列表

CSS 變數、字型引用、背景紋理程式碼不改動。

部署流程

# 1. 寫入 HTML（用模板覆蓋）
cp /Users/Ellison/.openclaw/workspace/design-daily-site/index.html \
   /Users/Ellison/.openclaw/workspace/design-daily-site/build.html

# 2. 啟動本地 HTTP 伺服器（埠 8766）
cd /Users/Ellison/.openclaw/workspace/design-daily-site
python3 -m http.server 8766 &

# 3. 建立公開連結（locaddr.run）
ssh -o StrictHostKeyChecking=no \
  -R 80:localhost:8766 locaddr.run &

# 4. 驗證可用性
curl -s -o /dev/null -w "%{http_code}" https://<生成的URL>/

部署指令碼

已建立的輔助指令碼：scripts/design-daily-cron.sh（見下方定時任務章節）

定時任務 / Cron

設定每日 9:00 北京時間自動傳送

openclaw cron create \
  --name "Design Daily 每日設計資訊" \
  --schedule "0 0 9 * * *" \
  --tz "Asia/Shanghai" \
  --message "今日設計資訊" \
  --channel feishu \
  --timeout-seconds 180 \
  --failure-alert \
  --failure-alert-after 2

⚠️ 推薦加上 --timeout-seconds 180（3分鐘），因為任務涉及 13 個源站抓取 + locaddr 隧道建立，30秒預設超時容易觸發。 --failure-alert --failure-alert-after 2 開啟連續2次失敗後通知。

另一種方式：指定小時判斷

如果 cron 不支援時區轉換，可寫一個包裝任務：

建立一個輔助指令碼 scripts/design-daily-cron.sh：

#!/bin/bash
# 每天北京時間 9:00 觸發（UTC 1:00）
openclaw run "今日設計資訊" --channel feishu

設定 cron：0 1 * * * /Users/Ellison/.openclaw/workspace/skills/design-daily/scripts/design-daily-cron.sh
確保指令碼有執行許可權：chmod +x scripts/design-daily-cron.sh

檢視/刪除定時任務

openclaw cron list
openclaw cron delete <id>

定時任務的限制

定時任務執行在獨立的 session 中，無主 session 歷史上下文
預設超時 30 秒，任務涉及多源抓取 + 隧道部署，建議設為 180 秒避免超時
建議在 memory/design-digest-state.json 中記錄上次執行時間，避免重複傳送
如果需要在飛書群傳送，channel 指定為群 ID 或群名

命令

/design — 手動觸發一期 digest
/design setup — 初始化配置和去重狀態
/design sources — 檢視當前追蹤的所有資訊源
/design add <URL> — 新增新的 A 類資訊源到 sources.md

🤖 AI 評測

這個 Skill 質量中等偏上，文件寫得很詳細清楚，安裝使用一目瞭然，功能也很實用，能追蹤很多設計資訊來源。缺點是它本質上只是一堆文字說明，沒有實際的程式碼程式，執行時全靠 AI 自由發揮，可能每次輸出的內容和質量不太穩定。網頁展示功能設計得挺好看，但改不了樣式。適合願意折騰、對內容要求不苛刻的使用者使用。