A command that turns an existing product requirements document, or PRD, into screen planning documents and a clickable low-detail wireframe. A PRD describes what a product should do and who it is for.

Use it to produce an information structure, user flow, screen specifications, wireframes, and links between requirements and interface components.

It makes the required screens, user paths, content, and developer handoff explicit before implementation begins.

screen-spec — Command by wigtn

Install

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.

agentmods

npx agentmods add commands/wigtn/wigtn-plugins/screen-spec

Clone the repo

git clone --depth 1 https://github.com/wigtn/wigtn-plugins

Per session 148 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

When invoked 1,287 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

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	$0.00148	$0.01287
Opus 5	$0.00074	$0.00643
Sonnet 5	$0.00030	$0.00257
Haiku 4.5	$0.00015	$0.00129

Measured 2d ago against content hash 28fd19ce1050, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

screen-spec 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 2d 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.

plugins/wigtn-plugins/commands/screen-spec.md · 85 lines

How it starts

The opening of the file, as written. The whole thing — 85 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Screen Specification Generation

PRD를 입력으로 화면정의서 5종을 만든다. /prd 다음, /implement 이전의 선택적 게이트.

파이프라인: /prd → prd-reviewer → /screen-spec → /implement → /auto-commit

산출물 계약 (타협 불가)

docs/prd/screens/<feature-name>/ 아래에 파일 5개를 각각 만든다. 하나의 문서로 합치지 않는다.

#	파일	내용
1	`01-IA.md`	정보구조도 — 페이지 ↔ FR 매핑
2	`02-USER-FLOW.md`	사용자 플로우 — 분기 조건 포함
3	`03-SCREEN-SPEC.md`	화면별 명세 — Audience / Auth / States / Components / Microcopy / Responsive
4	`04-WIREFRAME.html`	클릭 가능한 lo-fi 와이어프레임 (흑백 + 의미색)
5	`05-DEV-HANDOFF.md`	FR ↔ 화면 ↔ 컴포넌트 매핑

5개 중 하나라도 없으면 실패다. 생성은 screen-spec 스킬이 수행한다.

실행 조건

PRD §5.4 Pages에서 Has FE Components 가 Yes 인 행이 1개 이상일 때만 실행한다. 0개면 백엔드 전용이므로 차단하고 /implement 로 안내한다. PRD가 없으면 /prd <feature-name> 이 먼저다. PRD 골격은 ${CLAUDE_PLUGIN_ROOT}/contracts/PRD-CONTRACT.md 가 정본 — 여기서 재진술하지 않는다.

Usage

/screen-spec <feature-name>
/screen-spec <feature-name> --interview
/screen-spec <feature-name> --platform=mobile
/screen-spec <feature-name> --pages=/submit,/my

Parameters

feature-name: 기능명 (required, PRD 파일명과 일치)
--interview: 화면 레이어 의사결정(네비 패턴·밀도·에러 톤·빈 상태·전환·모바일 우선순위)을 단일 턴 배치 Q&A로 끌어낸다
--platform=<web|mobile>: 와이어프레임 템플릿 분기. 미지정 시 PRD §1 Overview의 모바일 시그널로 자동 판정
--pages=<list>: 지정 페이지만 재생성 (쉼표 구분). 나머지 산출물은 보존
--verify-vision: (선택) 04-WIREFRAME.html을 렌더·캡처해 §5.4.1 상태와 대조. 렌더 도구가 없으면 스킵

실행

docs/prd/PRD_<feature-name>.md 에서 §2.3 User Roles(→ 화면 Audience), §3 FR, §5.4 Pages(FE 행만), §5.4.1 Page State Matrix, §5.5 User Flow를 읽는다. §5.4.1이나 §5.5가 없으면 무엇이 없는지 알리고 stop — 추측으로 채우지 않는다.
screen-spec 스킬로 5종을 순서대로 생성한다 (뒤 산출물이 앞 산출물을 입력으로 쓴다).
frontend-developer 에이전트로 리뷰한다.

--verify-vision 이 주어지면, 리뷰 전에 04-WIREFRAME.html 을 렌더·캡처해 §5.4.1의 상태 목록과 03-SCREEN-SPEC.md 를 눈으로 대조한다. 렌더 도구가 없으면 스킵하고 스킵했다고 보고한다.

리뷰 게이트 (findings 롤업)

결과	조건	처리
❌ FAIL	critical ≥1	해당 산출물(03 또는 04)만 재생성 후 재검증
⚠️ WARN	critical 0 이고 (major ≥1 또는 minor ≥5)	경고만 표시하고 진행
✅ PASS	그 외	진행

Read the full file on GitHub · 85 lines

Changes

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.

2d ago First seen · 85 lines · 148 tokens per session scan A 28fd19ce1050

Subscribe to this mod's changes

screen-spec is a command published in the GitHub repository wigtn/wigtn-plugins (45 stars, last pushed 16d ago), licensed Apache-2.0. It adds 148 tokens to every session and 1,287 once invoked, about $0.0007 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-30.

Design and UX Planning agent-skills ai-native anthropic claude-code claude-code-plugin junior-developer

profile

Save, load, inspect, update, reset, or delete diagram-design client profiles.

cathrynlavery/diagram-design · 16 tokens

design-to-code

Mockup-to-component pipeline using Google Stitch, 21st.dev, and Storybook MCP. Accepts a screenshot, a description, or a URL and produces production-ready React components, checking existing Storybook components before generating anything new. Use when implementing UI from a mockup or screenshot. To call the MCP tool…

yonatangross/orchestkit · 86 tokens

screen-spec