03 / 06 PR 視覺與無障礙審查PR visual & a11y review

LensLion

前端視覺 QA 與無障礙（WCAG）Pull Request 自動審查 Agent

A frontend visual QA and accessibility (WCAG) pull-request review agent

看得到畫面的 Code Review：量得準，也看得出破版。

Code review that can see the page — measured precisely, and still spots the broken layout.

即將開源 · Request accessComing to open source · Request access即將開源 · Request accessOpen soon · Request access Repo 目前為私有Repo currently private

執行環境Runtime: Node.js ≥ 22Node.js ≥ 22
用法Use: GitHub Action · CLIGitHub Action · CLI
標準Standard: WCAG（可設 AA）WCAG (AA configurable)
技術Built with: axe-core
Vision model
GitHub Action
tsup
Vite
Tailwind CSS v4

(01) 為什麼Why

一般 AI Code Review 看不到畫面，axe-core 抓不到文字重疊與破版，純 Vision 模型又容易算錯數值。LensLion 把確定性量測與視覺判讀結合在一起。

Ordinary AI code review cannot see the page, axe-core misses overlapping text and broken layouts, and pure vision models get numbers wrong. LensLion combines deterministic measurement with visual judgement.

(02) 06 項items

它做什麼What it does

01
依 diff 規劃Planned from the diff

讀取 git diff，沿 Import Graph 找出受影響路由，並推論要點開的互動——改了 CheckoutModal.vue 就先打開彈窗。
Reads git diff, follows the import graph to the affected routes and infers the interactions to trigger — touch CheckoutModal.vue and it opens the modal first.
02
雙引擎Two engines

axe-core 與 DOM 啟發式提供確定性量測，Vision 模型判讀視覺破版。
axe-core and DOM heuristics give deterministic measurements; a vision model judges visual breakage.
03
編號截圖Numbered screenshots

在可疑元素畫上 #1、#2，對回 Selector 與原始碼行號，並附修正建議。
Suspicious elements are marked #1, #2, mapped back to the selector and source line, with a suggested fix.
04
低誤報Low noise

低信心建議收合；同一 PR 只更新一則留言。報告依嚴重／重要／輕微分組，截圖附替代文字。
Low-confidence suggestions are collapsed and each PR gets one comment that updates. Reports are grouped critical / important / minor, with alt text on screenshots.
05
桌面／手機 × 深／淺色Desktop / mobile × dark / light

預設 1440 與 375 兩種尺寸、兩種主題，WCAG 等級可設為 AA；可選視覺基準比對（預設差異門檻 1%）。
Defaults to 1440 and 375 widths in both themes with a configurable WCAG level such as AA; optional visual baselines (1% diff threshold by default).
06
GitHub Action 與 CLIGitHub Action and CLI

fail-on 可設 none、a11y-blocker 或 any；CLI 可只看檢查計畫或只回報新問題。
fail-on accepts none, a11y-blocker or any; the CLI can show only the plan or report only new issues.

(03) 怎麼運作How it works

一次 PR 審查One pull-request review

01
讀 diffRead the diff
找出受影響路由與互動。
Find affected routes and interactions.
02
開瀏覽器Open a browser
同網域導航，桌面／手機 × 深／淺色。
Same-origin only, desktop / mobile × dark / light.
03
量測Measure
axe-core + DOM 啟發式。
axe-core + DOM heuristics.
04
判讀Look
Vision 模型檢查視覺破版。
A vision model checks visual breakage.
05
留言Comment
編號截圖、Selector、行號與修正建議。
Numbered shots, selectors, lines and fixes.

(04) README

快速開始Quick start

Repo 目前為私有，上面的 Action 與 npx 指令要等開源後才能直接使用。

The repo is private for now, so the Action and npx commands above work once it is open-sourced.

CLICLI

$npx lenslion --url http://localhost:5173
$npx lenslion --diff main
$npx lenslion --diff main --plan-only
$npx lenslion config

GitHub Action（節錄）GitHub Action (excerpt)

$- uses: malilion/lenslion@v1
$  with:
$    start-command: npm run build && npm run preview
$    base-url: http://localhost:4173
$    fail-on: a11y-blocker

(05) 實測Measured

基準評測Benchmark

2026-11-02 · 內建靶場：1 個乾淨首頁 + 12 種已知問題 · 自有測試集2026-11-02 · built-in testbed: one clean page + 12 known issues · own test set

指標Metric	PRD 目標PRD target	僅確定性引擎Deterministic only	加上 Vision（claude-haiku-5-5）+ Vision (claude-haiku-5-5)
召回率（12 項）Recall (12 issues)	≥ 85%	100%	100%
乾淨頁誤報False positives, clean page	≤ 1	0	0
單路由 × 2 尺寸 × 2 主題1 route × 2 sizes × 2 themes	< 60 s	3.87 s	8.96 s
單次 PR 成本Cost per PR	< US$0.05	US$0	US$0.0023

(06) 安全Security

安全Security

Fork PR 不使用 pull_request_target，改用兩段式 workflow 保護 Secrets。Fork PRs never use pull_request_target; a two-stage workflow protects secrets.
瀏覽器只允許同網域導航，阻擋跨域表單送出與下載。The browser only navigates same-origin and blocks cross-origin form posts and downloads.
可用 mask 遮蔽敏感資訊，私有專案可改把截圖存到 R2 / S3。mask hides sensitive content; private projects can store screenshots in R2 / S3.

目前狀態Status

Repo 目前為私有，準備開源中。Repo currently private — coming to open source.
README 宣告 MIT 授權。README declares the MIT licence.

想先試用 LensLion？Want to try LensLion early?

所有 repo 目前都是私有的，準備開源中。想搶先試用，請透過 GitHub 個人頁聯絡。All repos are private for now and on their way to open source. To try one early, get in touch via the GitHub profile.

即將開源 · Request accessComing to open source · Request access即將開源 · Request accessOpen soon · Request access Repo 目前為私有Repo currently private

LensLion

依 diff 規劃Planned from the diff

雙引擎Two engines

編號截圖Numbered screenshots

低誤報Low noise

桌面／手機 × 深／淺色Desktop / mobile × dark / light

GitHub Action 與 CLIGitHub Action and CLI

讀 diffRead the diff

開瀏覽器Open a browser

量測Measure

判讀Look

留言Comment

目前狀態Status

想先試用 LensLion？Want to try LensLion early?