SpecChecker

UI/UX design specification checker for frontend development

SpecChecker 是一款專為前端開發人員和 UI/UX 設計師打造的設計規範檢查工具，讓您輕鬆確保網頁實作完全符合設計稿規格。 🎯 為什麼您需要 SpecChecker？ 解決設計與開發間的痛點 - 告別手動測量和猜測，一秒獲得精確的樣式數值 - 自動檢測不符合設計規範的元素，避免遺漏細節 - 減少設計師與開發者之間的來回溝通成本 - 提升網頁品質，確保視覺呈現的一致性 ✨ 核心功能 📋 即時樣式檢視器 - 滑鼠懸停即可查看任何元素的詳細樣式資訊 - 顯示字體大小、行高、顏色、邊距、內距等關鍵數值 - 一鍵複製樣式數值，快速應用到程式碼中 ⚙️ 智慧規範檢查 - 自訂字體大小、間距、圓角、色彩等設計規範標準 - 自動標示不符合規範的元素，搭配詳細說明 - 支援完整的設計系統管理，確保品牌一致性 📊 全頁面掃描報告 - 一鍵掃描整個網頁，快速找出所有規範問題 - 生成詳細的檢查報告，包含問題位置和修正建議 - 支援匯出報告，方便團隊協作和追蹤進度 📸 截圖與文件 - 內建截圖功能，記錄檢查過程和問題狀況 - 支援設定檔匯入匯出，團隊間共享規範標準 🖼️ iframe 完整支援 - 支援內嵌頁面檢測，適用於現代複雜網頁架構 - 智慧定位系統，確保工具在任何環境下正常運作 🚀 適用對象 - 前端開發工程師：快速檢查切版品質，確保像素級精準 - UI/UX 設計師：驗證設計實作是否符合設計稿規格 - 品質保證工程師：自動化檢查網頁視覺規範 - 產品經理：確保產品界面符合品牌設計標準 💡 使用情境 - 設計稿還原檢查：確保開發完成的頁面與設計稿完全一致 - 設計系統維護：檢查現有網站是否符合最新的設計規範 - 程式碼審查：快速發現樣式問題，提升程式碼品質 - 品牌一致性把關：確保所有頁面遵循統一的視覺標準 🔧 技術特點 - 基於最新的 Chrome Extension Manifest V3 - 零學習成本，安裝即用 - 輕量級設計，不影響頁面效能 - 完整的安全性保護，適合企業環境使用 立即安裝 SpecChecker，讓設計規範檢查變得簡單高效！ --- 支援 Chrome 88+ 版本，適用於所有網站。安裝後預設為停用狀態，需手動啟用以確保最佳使用體驗。