AMicro
AMicro 是專為 React 打造的微動畫(Micro-interactions)資源平台,收錄 Hover、按鈕、卡片、文字、Loading 與 Transition 等互動效果,協助開發者快速提升網站與 Web 應用的 UI 質感與使用者體驗。
TOOL LIBRARY
從介面、開發到網站經營,整理值得留存的線上工具與實用資源。
AMicro 是專為 React 打造的微動畫(Micro-interactions)資源平台,收錄 Hover、按鈕、卡片、文字、Loading 與 Transition 等互動效果,協助開發者快速提升網站與 Web 應用的 UI 質感與使用者體驗。
Codex Dream Skin 是專為 OpenAI Codex 打造的開源介面主題,提供現代化深色設計、優化按鈕與輸入框樣式,提升 AI Coding 環境的閱讀體驗與操作質感,並支援自由客製化。
Skills For Design Engineers 是開源 AI Skills 專案,將 Design Engineer 的設計經驗轉化為 AI 可用知識,涵蓋 UI、動畫、互動設計與最佳實踐,協助 Claude Code、Cursor 等 AI 工具打造更高品質介面。
OpenSEO 是專為 AI Agent 打造的開源 SEO 工具,整合關鍵字研究、SERP 分析、排名追蹤、網站健檢與 MCP Server,透過 AI Skills 自動化 SEO 工作流程,提升內容優化與網站分析效率。
Puppeteer 是開源 JavaScript 瀏覽器自動化工具,可控制 Chrome 與 Firefox 執行網頁測試、資料擷取、PDF 產生、畫面截圖與 AI Agent 工作流程,廣泛應用於網站開發與自動化。
DBX 是輕量級開源資料庫管理工具,支援 MySQL、PostgreSQL、MongoDB 等多種資料庫,內建 AI SQL 助手、ER 圖生成與資料分析功能,提供高效且現代化的開發體驗。
Unlighthouse 是一套開源網站 SEO 與效能稽核工具,可自動爬取全站頁面並批次執行 Lighthouse 分析,快速找出 Core Web Vitals、SEO、無障礙與效能問題,提升網站整體品質。
lottie 是一個專為 AI Coding Agent 設計的 Text-to-Lottie 動畫生成框架,能透過自然語言建立可正式部署的 Lottie 動畫,大幅降低網站、App 與 SaaS 產品動態設計門檻。
Taste Skill 是專為 AI Coding Agent 打造的前端設計技能框架,透過設計規則與風格模組提升 AI 生成介面的質感,改善常見的「AI 味」網頁問題,協助 Cursor、Claude Code、Codex 等工具產出更具設計感、品牌一致性與使用者體驗的網站與應用介面。
Downdetector 是全球知名的服務狀態監測平台,能即時追蹤網站、App、社群媒體與線上遊戲的異常回報情況。本文完整介紹 Downdetector 的功能特色、運作原理、故障趨勢圖、地區性異常分析與實際應用情境,幫助你快速判斷網站是否當機、服務是否發生大規模中斷。
在 PhpStorm 中匯出資料庫結構(也就是產生 DDL,Data Definition Language)其實非常方便,因為它內建了強大的 DataGrip 資料庫管理引擎,本篇將說明匯出「資料庫結構」的標準步驟:
對於規劃日本自由行、研究鐵道路線,或單純對日本交通網絡感興趣的人來說,Anita Garden Japan Rail 是一個相當特別的互動式網站。它並不是常見的 JR Pass 購票平台,也不是傳統的乘車路線查詢工具,而是一個將「日本鐵道運量」視覺化的資料網站,透過地圖與流量圖層,把整個日本鐵路系統的乘客流動狀況呈現出來。
map3d 是一個開源 3D 城市地圖工具,可將 OpenStreetMap 資料轉換為 Three.js 可用的 3D 建築與道路場景,支援 GLB 匯出,適合數位孿生、WebGL 視覺化與互動式地圖應用。
Impeccable Style 是一套專為 AI coding agent 設計的 coding style guide,強調可讀性、一致性與工程紀律,幫助 Claude Code、Cursor 等工具生成更穩定、可維護且符合團隊規範的程式碼。
HyperFrames 是 HeyGen 官方推出的開源動畫生成框架,讓 AI agent 能以程式化方式建立 motion graphics、字幕動畫與資訊視覺化內容,成為 AI 影片工作流中的核心動畫引擎。
Open Design 是 Claude Design 的開源替代方案,採 local-first 架構,透過 skills 與 design systems 驅動 AI 設計流程,支援多模型與本地部署,快速生成高品質 UI、簡報與原型。
Huashu Design 是一個將設計流程整合進 AI coding agent 的工具,透過 prompt 直接生成高保真原型、簡報、動畫與資訊圖。支援 HTML-native 工作流與多格式輸出,並結合品牌資產與設計評審,適合快速產出可交付設計成果。
design.md 是 Google 推出的 AI 設計系統格式,結合結構化 token(YAML)與自然語言說明(Markdown),讓 AI 能準確理解並生成一致 UI。支援 lint、diff、export 等工具,特別適合 AI 驅動開發與設計系統管理。