design-gate

A frontend review command that compares implemented code with its design specification, shared style tokens, component rules, and Figma designs. Figma is a tool commonly used to create and share interface designs.

In plain words
What is it for?
Use it to check one or more changed frontend components and receive a pass-or-fail result with a list of gaps.
Why use it?
It identifies differences between the intended design and the code, and can require recorded design approval when run in strict mode.

Command

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/rajconnects/founder-stack/design-gate
Clone the repo
git clone --depth 1 https://github.com/rajconnects/founder-stack
Per session 51 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 992 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.00051 $0.00992
Opus 5 $0.00026 $0.00496
Sonnet 5 $0.00010 $0.00198
Haiku 4.5 $0.00005 $0.00099

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

Security

Grade A, and why

design-gate 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/commands/design-gate.md · 46 lines

How it starts

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

You are running the design gate.

Arguments: $ARGUMENTS

Steps

  1. If the scope portion of $ARGUMENTS is empty, determine scope by running git diff --name-only HEAD~5 -- '*.tsx' '*.ts' '*.css' and deduplicating to changed components/files. Otherwise use the provided scope. Detect --strict separately.

1b. Approval-marker check. For each component in scope, compute the scope slug (lowercase + alphanumerics + dashes) and check for .claude/.design-approved-<scope-slug> and .claude/.design-bypass-<scope-slug>.

  • If .design-bypass-<scope-slug> exists: prepend a loud warning regardless of --strict:
    > [bypass] This scope shipped via `/frontend-build --bypass`. Design approval was skipped — confirm with the operator that the bypass was justified.
    
    Continue to step 2 (audit still runs).
  • If .design-approved-<scope-slug> is missing AND --strict is NOT set: prepend a soft warning (verdict still computed by the audit):
    > [warn] No `.design-approved` marker for <component>. The components_spec and flow_spec entries may be hand-authored or pre-date the UX design layer. Audit will run; consider `/ux-wireframe <component>` then `/ux-mockup <component>` if results are unexpected. Use `/design-gate <scope> --strict` to enforce.
    
    Continue to step 2.
  • If .design-approved-<scope-slug> is missing AND --strict IS set: skip the audit and return verdict FAIL with reason missing-design-approval. List exactly which scopes lacked markers and the remediation: "Run /ux-wireframe then /ux-mockup , or invoke /frontend-build with --bypass if you must ship without design sign-off." Stop. Do not launch the auditor.
  1. Launch the design-auditor subagent with a self-contained prompt:

    • The resolved scope (component names / file paths) as changed_files so the agent does not rediscover scope by grepping frontend_root.
    • Inline the relevant fields from .claude/project.json (tokens path, components_spec, flow_spec, figma config) — read it once here, don't make the agent re-read it.
    • Token-sync and Figma get_variable_defs are opt-in via --full; default is per-component audit only.
    • Ask for the standard audit output.
  2. Print the audit result verbatim, with any approval-marker warnings (from step 1b) prepended. Do NOT soften FAILs, do NOT "interpret" gaps into your own words — the auditor's output is the gate.

  3. If verdict is FAIL, list the specific next actions at the end: "Fix the N flagged items in design-auditor output, then re-run /design-gate." Do not auto-fix unless the user asks.

  4. Session hygiene hint (PASS only). Append one line: If the next task is unrelated to this scope, consider a session reset (in Claude Code: /clear). See docs/session-hygiene.md. Do not print on FAIL or on bypass-marker warnings — the user is still in remediation mode.

Read the full file on GitHub · 46 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 · 46 lines · 51 tokens per session scan A f0fd4f654260

Subscribe to this mod's changes

design-gate is a command published in the GitHub repository rajconnects/founder-stack (2 stars, last pushed 1mo ago), licensed MIT. It adds 51 tokens to every session and 992 once invoked, about $0.0003 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.