SpecChecker

About

SpecChecker 是一款專為前端開發人員和 UI/UX 設計師打造的設計規範檢查工具，讓您輕鬆確保網頁實作完全符合設計稿規格。

  🎯 為什麼您需要 SpecChecker？

  解決設計與開發間的痛點
  - 告別手動測量和猜測，一秒獲得精確的樣式數值
  - 自動檢測不符合設計規範的元素，避免遺漏細節
  - 減少設計師與開發者之間的來回溝通成本
  - 提升網頁品質，確保視覺呈現的一致性

  ✨ 核心功能

  📋 即時樣式檢視器
  - 滑鼠懸停即可查看任何元素的詳細樣式資訊
  - 顯示字體大小、行高、顏色、邊距、內距等關鍵數值
  - 一鍵複製樣式數值，快速應用到程式碼中

  ⚙️ 智慧規範檢查
  - 自訂字體大小、間距、圓角、色彩等設計規範標準
  - 自動標示不符合規範的元素，搭配詳細說明
  - 支援完整的設計系統管理，確保品牌一致性

  📊 全頁面掃描報告
  - 一鍵掃描整個網頁，快速找出所有規範問題
  - 生成詳細的檢查報告，包含問題位置和修正建議
  - 支援匯出報告，方便團隊協作和追蹤進度

  📸 截圖與文件
  - 內建截圖功能，記錄檢查過程和問題狀況
  - 支援設定檔匯入匯出，團隊間共享規範標準

  🖼️ iframe 完整支援
  - 支援內嵌頁面檢測，適用於現代複雜網頁架構
  - 智慧定位系統，確保工具在任何環境下正常運作

  🚀 適用對象

  - 前端開發工程師：快速檢查切版品質，確保像素級精準
  - UI/UX 設計師：驗證設計實作是否符合設計稿規格
  - 品質保證工程師：自動化檢查網頁視覺規範
  - 產品經理：確保產品界面符合品牌設計標準

  💡 使用情境

  - 設計稿還原檢查：確保開發完成的頁面與設計稿完全一致
  - 設計系統維護：檢查現有網站是否符合最新的設計規範
  - 程式碼審查：快速發現樣式問題，提升程式碼品質
  - 品牌一致性把關：確保所有頁面遵循統一的視覺標準

  🔧 技術特點

  - 基於最新的 Chrome Extension Manifest V3
  - 零學習成本，安裝即用
  - 輕量級設計，不影響頁面效能
  - 完整的安全性保護，適合企業環境使用

  立即安裝 SpecChecker，讓設計規範檢查變得簡單高效！

  ---
  支援 Chrome 88+ 版本，適用於所有網站。安裝後預設為停用狀態，需手動啟用以確保最佳使用體驗。