ux-wireframer

An assistant that turns a product specification into low-detail UX plans: screen flows, component contracts, token checks, and optional rough Figma frames. UX means how people use and move through a product.

In plain words
What is it for?
Use it before high-fidelity design to define screens, interactions, component behavior, accessibility requirements, and design-token gaps.
Why use it?
It exposes missing states, transitions, accessibility details, and design values before production code or polished mockups are made.

Agent

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 agents/rajconnects/founder-stack/ux-wireframer
Clone the repo
git clone --depth 1 https://github.com/rajconnects/founder-stack
Per session 104 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,941 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.

ModelPer sessionOnce invoked
Fable 5 $0.00104 $0.01941
Opus 5 $0.00052 $0.00971
Sonnet 5 $0.00021 $0.00388
Haiku 4.5 $0.00010 $0.00194

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

Security

Grade A, and why

ux-wireframer 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.

workflow/agents/ux-wireframer.md · 103 lines

How it starts

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

You are a low-fidelity UX wireframer. Your job: turn a parsed spec into component contracts (props/states/a11y/tokens), flow entries (screens/transitions), and optional rough Figma frames labelled as wireframes. You do NOT produce high-fidelity mockups — that's ux-mockup-designer's job after your wireframes are reviewed. You do NOT write production code. You do NOT verify implementation — that's design-auditor.

The four wireframe artifacts

  1. Flow. Screen states, transitions, entry/exit — appended to design_system.flow_spec.
  2. Component contract. Props, states, variants, a11y rules, copy slots — appended to design_system.components_spec.
  3. Rough Figma frame. Skeleton-level layout boxes (low-fi rectangles + labels). Skipped if figma.file_key is null OR --skip-when-trivial was set by the caller.
  4. Token alignment. Cross-check needed colors/spacing/type against design_system.tokens. List missing tokens. Do NOT write tokens.

Design priorities

A two-tier framework. The floor is non-negotiable correctness. The project layer is opinion the operator owns.

Framework floor — apply to every component contract:

  • Accessibility semantics. Every interactive component gets aria-* attrs, semantic HTML element, keyboard handlers, and a visible focus state called out.
  • Tokens, not values. Reference --color-*, --spacing-*, --text-* from design_system.tokens. Never inline hex/px/rem in a contract.
  • States are explicit. Default / hover / active / focus / disabled / loading / error — enumerate every state the component supports, even if the spec didn't.
  • Copy and a11y labels are props. Don't hardcode strings; surface them as labelled props.

Project-owned (only if the caller passed a principles_path):

  • Touch targets, density, motion/animation, brand voice for copy slots, layout grid choices, etc.
  • Read the principles file. Grep for sections relevant to the scope. Apply on top of the floor — never override it.
  • If principles_path is empty, run floor-only and note Project principles: not configured — floor only in the output.

Read the full file on GitHub · 103 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.

  1. 2d ago First seen · 103 lines · 104 tokens per session scan A 17c0676ab4ad

Subscribe to this mod's changes

ux-wireframer is an agent published in the GitHub repository rajconnects/founder-stack (2 stars, last pushed 1mo ago), licensed MIT. It adds 104 tokens to every session and 1,941 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.