Specpin ์ ์์: Lam Ngoc Khuong
Pin living business specs onto the elements of your running web UI. Git-native, local-first, framework-agnostic.
ํ์ฅ ๋ฉํ ๋ฐ์ดํฐ
์คํฌ๋ฆฐ์ท
์ ๋ณด
Specpin attaches business specifications (rules, descriptions, acceptance criteria) directly onto the elements of a running web UI, then renders them in-browser as you hover or browse.
It is NOT a spec-driven code generator: it generates no application code. It is a knowledge layer that pins living, Git-versioned documentation onto the interface you already have. Specs live as JSON in your repo's
Features:
โข Pin specs onto live elements: resilient multi-signal fingerprint matching (test-id, aria, selector, xpath, text, position) so specs survive refactors, scoped to their page by a URL glob.
โข Match confidence and page health: see how each spec matched (exact anchor vs. selector), review fragile matches, and drop in a data-spec-id attribute for exact matching.
โข Three display modes: tooltip, sidebar, and a draggable modal renderer. Switch with one click or Alt+Shift+M.
โข Manual capture: click an element and author a spec in place, no leaving the page. Toggle capture with Alt+Shift+C.
โข Writable local projects: edit, capture, create, delete, and group-zip export specs, even without a running sidecar.
โข Multi-project connections: one add-on serves many projects at once, routed to each page by origin, with per-project enable/disable and source badges (sidecar vs local).
โข Guide mode: spec-driven onboarding tours in two scopes (team, committed to your repo; personal, per-origin), with a spotlight overlay and an anchored popover.
โข Sidebar surface: open Specpin in Firefox's sidebar with inline spec detail and live auto-refresh.
โข Spec search: live client-side filter by title, file, tags, and description.
โข Multi-language spec content: locale-keyed strings with an in-browser language toggle and a tabbed per-locale editor.
โข Markdown-formatted specs: descriptions and business rules carry a safe Markdown subset (bold, italic, inline code, links, lists), authored via a toolbar and rendered across every surface.
โข User-selectable theme: System / Light / Dark, with dual-theme design tokens.
โข Trilingual interface (EN + VI + JA), independent from the spec content language.
Secure by default: the sidecar binds 127.0.0.1 by default (remote use is opt-in over your own HTTPS reverse proxy), uses bearer-token auth, accepts only extension-origin CORS, and guards writes against path traversal. Open-source. No data collection, no tracking, no remote code.
It is NOT a spec-driven code generator: it generates no application code. It is a knowledge layer that pins living, Git-versioned documentation onto the interface you already have. Specs live as JSON in your repo's
.specs/ directory and are served to the add-on by a small local Go sidecar over token-authenticated localhost. Nothing leaves your machine.Features:
โข Pin specs onto live elements: resilient multi-signal fingerprint matching (test-id, aria, selector, xpath, text, position) so specs survive refactors, scoped to their page by a URL glob.
โข Match confidence and page health: see how each spec matched (exact anchor vs. selector), review fragile matches, and drop in a data-spec-id attribute for exact matching.
โข Three display modes: tooltip, sidebar, and a draggable modal renderer. Switch with one click or Alt+Shift+M.
โข Manual capture: click an element and author a spec in place, no leaving the page. Toggle capture with Alt+Shift+C.
โข Writable local projects: edit, capture, create, delete, and group-zip export specs, even without a running sidecar.
โข Multi-project connections: one add-on serves many projects at once, routed to each page by origin, with per-project enable/disable and source badges (sidecar vs local).
โข Guide mode: spec-driven onboarding tours in two scopes (team, committed to your repo; personal, per-origin), with a spotlight overlay and an anchored popover.
โข Sidebar surface: open Specpin in Firefox's sidebar with inline spec detail and live auto-refresh.
โข Spec search: live client-side filter by title, file, tags, and description.
โข Multi-language spec content: locale-keyed strings with an in-browser language toggle and a tabbed per-locale editor.
โข Markdown-formatted specs: descriptions and business rules carry a safe Markdown subset (bold, italic, inline code, links, lists), authored via a toolbar and rendered across every surface.
โข User-selectable theme: System / Light / Dark, with dual-theme design tokens.
โข Trilingual interface (EN + VI + JA), independent from the spec content language.
Secure by default: the sidecar binds 127.0.0.1 by default (remote use is opt-in over your own HTTPS reverse proxy), uses bearer-token auth, accepts only extension-origin CORS, and guards writes against path traversal. Open-source. No data collection, no tracking, no remote code.
๋ฆฌ๋ทฐ์ด 0๋ช
์ด 0์ ์ผ๋ก ํ๊ฐํจ
๊ถํ ๋ฐ ๋ฐ์ดํฐ
ํ์ ๊ถํ:
- ๋ธ๋ผ์ฐ์ ํญ์ ์ ๊ทผ
- ๋ชจ๋ ์น์ฌ์ดํธ์์ ์ฌ์ฉ์์ ๋ฐ์ดํฐ์ ์ ๊ทผ
์ ํ์ ๊ถํ:
- ๋ชจ๋ ์น์ฌ์ดํธ์์ ์ฌ์ฉ์์ ๋ฐ์ดํฐ์ ์ ๊ทผ
๋ฐ์ดํฐ ์์ง:
- ๊ฐ๋ฐ์๋ ์ด ํ์ฅ ๊ธฐ๋ฅ์ด ๋ฐ์ดํฐ ์์ง์ ์๊ตฌํ์ง ์๋๋ค๊ณ ๋ฐํ๊ณ ์์ต๋๋ค.
์ถ๊ฐ ์ ๋ณด
- ๋ถ๊ฐ ๊ธฐ๋ฅ ๋งํฌ
- ๋ฒ์
- 0.0.15
- ํฌ๊ธฐ
- 259.59 KB
- ๋ง์ง๋ง ์ ๋ฐ์ดํธ
- ํ๋ฃจ ์ (2026๋ 7์ 9์ผ)
- ๊ด๋ จ ์นดํ ๊ณ ๋ฆฌ
- ๋ผ์ด์ ์ค
- Apache License 2.0
- ๊ฐ์ธ์ ๋ณด์ฒ๋ฆฌ๋ฐฉ์นจ
- ์ด ๋ถ๊ฐ ๊ธฐ๋ฅ์ ๋ํ ๊ฐ์ธ์ ๋ณด์ฒ๋ฆฌ๋ฐฉ์นจ ์ฝ๊ธฐ
- ๋ฒ์ ๋ชฉ๋ก
- ๋ชจ์์ง์ ์ถ๊ฐ
์ด ํ์ฅ ๊ธฐ๋ฅ์ ๊ฐ๋ฐ์๊ฐ ์ฌ๋ฌ๋ถ์ด ์์ ๊ธฐ์ฌ๋ก ์ง์์ ์ธ ๊ฐ๋ฐ์ ์ง์ํด ์ค ๊ฒ์ ์์ฒญํฉ๋๋ค.