A design workflow for creating and comparing real HTML mockups for interfaces such as pages, dashboards, and components. It uses project design rules and can show the result in a live browser companion.

Use it to design or redesign interfaces, create variants, compare mockups, and present working HTML designs in a browser.

It replaces vague text sketches with inspectable pages and encourages checking layout, content, colours, typography, and accessibility against the project's design rules.

ijfw-design — Skill for Claude Code by FerroxLabs

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.

Any agent

npx skills add FerroxLabs/ijfw --skill ijfw-design

Clone the repo

git clone --depth 1 https://github.com/FerroxLabs/ijfw

Made for: Claude Code.

Or install ijfw, the plugin that ships this one along with the rest of its 34 skills, 22 commands, 37 agents, 6 hooks.

Wrote 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.

README.md

[![agentmods](https://agentmods.dev/badge/skills/ferroxlabs/ijfw/ijfw-design.svg)](https://agentmods.dev/skills/ferroxlabs/ijfw/ijfw-design)

Your own site

<a href="https://agentmods.dev/skills/ferroxlabs/ijfw/ijfw-design"><img src="https://agentmods.dev/badge/skills/ferroxlabs/ijfw/ijfw-design.svg" alt="Measured on agentmods" height="20"></a>

Per session 72 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

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

Security scan B 1 finding. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

NVIDIA SkillSpector warn 7 Sept 2026

SkillSpector: 2 findings, up to high

These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →

high Agent Snooping · line 86
Skill reads from agent configuration directories (.claude/, .codex/, .gemini/). These directories may contain API keys, personal settings, and other credentials that the skill has no legitimate need to access.

Fix: Remove all code or instructions that access agent configuration directories (.claude/, .codex/, .gemini/). If configuration values are needed, pass them explicitly as parameters or environment variabl
medium Rogue Agent · line 13
Skill establishes unauthorized persistence across sessions via cron jobs, startup scripts, or state files. Session persistence allows an attacker to maintain access beyond the current interaction.

Fix: Remove any persistence mechanisms (cron jobs, startup scripts, state files). Skills should not maintain state across sessions without explicit user consent.

How audits are shown

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.1	$0.00072	$0.02062
Opus 5	$0.00036	$0.01031
Sonnet 5	$0.00014	$0.00412
Haiku 4.5	$0.00007	$0.00206

Measured 3d ago against content hash e192b7941aa8, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade B, and why

ijfw-design scanned grade B with 1 finding 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 3d ago.

The scan reads SKILL.md. This mod also ships 7 executable files (scripts/design-pass.sh, scripts/dispatch.sh, scripts/search.js, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

Reads agent configuration directoriesmediumAgent snooping

.claude/, .codex/, .gemini/ hold keys, settings and other credentials a mod has no legitimate need for.

1. **ui-ux-pro-max** -- check `enabledPlugins` in `~/.claude/settings.json` for `ui-ux-pro-max@`

claude/skills/ijfw-design/SKILL.md · 119 lines

How it starts

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

IJFW Design

Rule 0 - Real HTML mockups, never ASCII

When asked to show a design, mockup, layout, screen, or variant, produce REAL HTML and use the live design companion when a shell is available:

Start the companion with ijfw design start (or ijfw design start --no-open in CI/headless sessions). It serves http://localhost:<port>/design.
Write standalone HTML variants under .planning/<feature>/mockups/<variant>/index.html or .planning/brainstorm/<option>.html.
Push the active variant with ijfw design push <file.html>. The open browser reloads automatically.
When comparing options, create a tabbed viewer.html that loads option files from /design/files/<name>.html, then push the viewer and its option files together: ijfw design push .planning/brainstorm/*.html.

Use the active DESIGN.md or the picked template as the source of truth -- real colors, real type scale, real spacing, real content. Prefer DESIGN.md tokens first, then the chosen template/brand direction, then internal heuristics.

ASCII wireframes in chat are a LAST-RESORT FALLBACK, permitted only when:

The user explicitly asks for text-only ("just ASCII is fine").
No writable filesystem is available (extremely rare -- almost never in practice).

Do not default to ASCII boxes. Do not "sketch" in chat. The entire point of this skill is on-brand visual output; ASCII wastes the DESIGN.md contract, the palette, the type scale, and the user's time.

Structural diagrams (Mermaid architecture, data flow, component boundaries) are the exception -- those stay as text by convention.

Live Visual Loop

For UI/design brainstorming, offer the live companion before SHAPE: This is visual. Want me to open a live preview while we brainstorm?

If declined, continue with durable design notes in DESIGN.md or the current planning artifact and do not start a local server. If accepted, start the companion immediately and push a placeholder or first option so the user sees the loop working. For each design choice, update the HTML and run ijfw design push <file.html>; do not merely say where the file is. For multi-option viewers, push every supporting .html file so iframe tabs can resolve through /design/files/. If the companion cannot start, fall back to opening the HTML file directly and report the path.

Read the full file on GitHub · 119 lines

Files

What ships with it

29 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

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.

3d ago First seen · 119 lines · 72 tokens per session scan B e192b7941aa8

Subscribe to this mod's changes

ijfw-design is a skill published in the GitHub repository FerroxLabs/ijfw (210 stars, last pushed yesterday), licensed MIT. It adds 72 tokens to every session and 2,062 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it B with 1 finding (reads agent configuration directories). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-05.

Claude Code Design and UX ai-agents ai-coding codex cursor developer-tools

design-maker

name: design-maker description: Used when the Design Brief is complete and the user needs to generate mockups. Reads Product-Spec.md and Design-Brief.md, then generates a complete set of design deliverables through a design tool MCP, including all pages, state variants, component specifications, design tokens…

zxpmail/ReqForge · 0 tokens

design-brief-builder

name: design-brief-builder description: Used when the user wants to define a design style or visual direction, or says something vague like 'I want a premium/sleek/modern look'. Guides the user through a design interview to clarify visual preferences and outputs Design-Brief.md. After Brief is saved, MUST run Next…

zxpmail/ReqForge · 0 tokens

ui-designer

Designs and builds interface work on top of the design system the repo already has: layout, spacing, hierarchy, interaction states, and accessible defaults, with creativity calibrated to the surface instead of an unrequested redesign. Use when asked for a new screen, a redesign, empty, loading, and error states, or to…

Ozzeron/prompt-pack · 94 tokens

ijfw-design