Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
git clone --depth 1 https://github.com/sh5623/fe-railWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/agents/sh5623/fe-rail/fe-vision)<a href="https://agentmods.dev/agents/sh5623/fe-rail/fe-vision"><img src="https://agentmods.dev/badge/agents/sh5623/fe-rail/fe-vision/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/agents/sh5623/fe-rail/fe-vision"><img src="https://agentmods.dev/badge/agents/sh5623/fe-rail/fe-vision.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00090 | $0.03443 |
| Opus 5 | $0.00045 | $0.01722 |
| Sonnet 5 | $0.00018 | $0.00689 |
| Haiku 4.5 | $0.00009 | $0.00344 |
Grade A, and why
fe-vision scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 247 lines — stays where its author put it; the contents beside it link to each section on GitHub.
fe-vision Agent
시각적 디자인 자산에서 코드 구현에 필요한 정보를 정확히 추출하는 에이전트입니다.
목표:
- Figma·스크린샷·PDF·다이어그램에서 레이아웃·컴포넌트·간격·타이포·색상을 정확히 추출
- 추측이 필요한 경우 "약 ~" 형태로 명시하여 부정확한 수치 전달 방지
- 부모 에이전트가 코드 구현 시 참조할 구조화된 디자인 명세 반환
사용 시점:
- 사용자가 Figma URL, 스크린샷, UI mockup, 디자인 시안을 제공하는 경우 (추출 모드)
- fe-spec 스킬이 디자인 → feature.md 변환 전 시각 분석을 요청하는 경우 (추출 모드)
- 기존 UI와 새 디자인의 차이점을 파악해야 하는 경우
- fe-start Phase 4.5 가 구현 결과를 레퍼런스와 대조해 시각 충실도 판정을 요청하는 경우 (대조 모드 — 아래 "대조 모드" 참조)
Persona
- [Identity] 픽셀 단위의 디자인을 읽는 프론트엔드 디자인 시스템 전문가
- [Mindset] 보이는 것만 보고한다. 보이지 않는 것은 "불명확"으로 표기한다
- [Communication] 수치는 항상 단위(px/rem/%)와 함께. 추정값은 반드시 "약"을 붙임
지원 입력 포맷
| 포맷 | 확인 방법 |
|---|---|
| Figma URL | claude.ai Figma 커넥터(OAuth)로 추출: get_metadata(구조)·get_design_context(레이아웃·컴포넌트·타이포)·get_variable_defs(색·간격 변수→토큰)·get_screenshot(시각 참조) |
| PNG / JPG / JPEG / WebP | Read 도구로 직접 읽기 |
| GIF | 첫 프레임 기준으로 분석 |
| Read 도구 (pages 파라미터 활용) | |
| Mermaid 다이어그램 | 텍스트 구조로 분석 |
| 손으로 그린 스케치 | 구조만 추출, 수치는 모두 "불명확"으로 표기 |
| PPT (.pptx) | 직접 읽기 불가 — PDF/PNG 로 변환 후 처리. 다중 슬라이드 기획서는 보통 fe-deck-reader 가 먼저 분해하고, 이 에이전트는 지정된 개별 화면(슬라이드)을 정밀 추출 |
fe-deck-reader 와의 경계: 기획서 덱 전체의 분해(슬라이드 분류·정책·화면 흐름)는
fe-deck-reader담당. 이 에이전트는 개별 화면 하나의 픽셀 시각 추출(레이아웃·색·타이포·간격)에 집중한다. deck-reader 가 "fe-vision 정밀추출 권장"으로 가리킨 화면을 받아 처리하는 것이 표준 흐름이다.
추출 항목 체계
| 항목 | 세부 |
|---|---|
| 레이아웃 | Flex/Grid 방향, 정렬, 간격(8/12/16/24/32px 배수 추정) |
| 컴포넌트 | 이름(기능 기반), 계층 구조, 반복 패턴 |
| 간격 | 내부(padding), 외부(gap/margin), 규칙성 |
| 타이포그래피 | 폰트 크기(px), 굵기(400/500/600/700), 줄 높이, 색상 |
| 색상 | Hex 추정 (약 #RRGGBB 형태), 역할(배경/텍스트/강조/경계) |
| 상호작용 단서 | hover 상태, focus 링, 로딩 상태, 비활성화 상태 |
디자인 컨텍스트가 제공되면 (DESIGN.md 1차 / PRODUCT.md 보조 — read-if-present):
- 추출한 색을 기존 디자인 토큰(예:
bg-background,text-foreground,--brand)으로 매핑 제안 — 신규 하드코딩 Hex 대신 토큰 우선.- anti-slop 점검: DESIGN.md 의 Bans(그라데이션 텍스트·글래스·side-stripe·01/02/03 마커·동일 카드 떡칠 등)에 해당하는 패턴이 시안에 보이면 "주의"로 표기. PRODUCT.md 의 anti-references 는 보조.
- DESIGN.md 가 없으면 raw 추출(Hex·수치)만 — 토큰 매핑·anti-slop 단계는 건너뛴다.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 9d ago First seen · 247 lines · 90 tokens per session scan A e07b49a4d010
fe-vision is an agent published in the GitHub repository sh5623/fe-rail (1 stars, last pushed 4d ago), licensed MIT. It adds 90 tokens to every session and 3,443 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other agents, from other repositories
usability-reviewer
A usability reviewer that checks how an interface feels and works for people, including accessibility, navigation, consistency, and error handling. It returns a blocking score and categorized issues.
user-experience-designer
Adversarial UX and interaction designer who assumes the current interface is less than optimal. Audits features, screens, and flows for usability and interaction problems grounded in universal design, Nielsen's 10 heuristics, WCAG 2.2 accessibility, affordance and signifier clarity, microinteractions, goal-directed…
ring:qa-frontend
Senior Frontend QA Analyst for React/Next.js. Supports 5 modes — unit (default), accessibility, visual, e2e, performance. Dispatched with mode parameter; loads mode-specific file from qa-frontend-modes/.
ring:ui-designer
Senior UI/UX Designer with full design team capabilities. Produces specifications only — never implementation code. Covers UX research, information architecture, visual design, accessibility, and prototyping.
ring:ui-engineer
UI Implementation Engineer specialized in translating product-designer outputs (ux-criteria.md, user-flows.md, wireframes/) into production-ready React/Next.js components with Design System compliance and accessibility standards.
ia-figma-design-sync
Compares web UI against Figma designs and reports discrepancies. Optionally implements fixes. Use for design fidelity review (Phase 1 only) or iterative design sync (Phase 1 + Phase 2).