frontend-generator

frontend-generator is an agent for Claude Code from superduke/ganvil. It costs 42 tokens per session (2,791 once invoked), scanned A, original, MIT.

A coding agent that builds user-interface features from a product plan, one sprint at a time.

In plain words
What is it for?
It implements interface features, follows design tokens and component-library conventions, preserves required sample data, and handles either new designs or screenshot-based restorations.
Why use it?
It turns planned frontend work into working code while keeping the implementation aligned with the project’s design rules or reference screenshots.

Agent for Claude Code

Written for Claude Code: shipped in a Claude Code plugin. Also seen: model in frontmatter.

Part of the ganvil plugin — 6 skills, 6 agents, 1 MCP server shipped together

Good fit It implements interface features, follows design tokens and component-library conventions, preserves required sample data, and handles either new designs or screenshot-based restorations.

Compare 6 agents from other repositories ↓
Install with agentmods
npx agentmods add agents/superduke/ganvil/frontend-generator
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.

Clone the repo
git clone --depth 1 https://github.com/superduke/ganvil

Made for: Claude Code.

Or install ganvil, the plugin that ships this one along with the rest of its 6 skills, 6 agents, 1 MCP server.

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.

agentmods badge for frontend-generator

README.md
[![agentmods](https://agentmods.dev/badge/agents/superduke/ganvil/frontend-generator/github.svg)](https://agentmods.dev/agents/superduke/ganvil/frontend-generator)
Your own site
<a href="https://agentmods.dev/agents/superduke/ganvil/frontend-generator"><img src="https://agentmods.dev/badge/agents/superduke/ganvil/frontend-generator/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.

agentmods 80×15 button for frontend-generator

Your own site · 80×15
<a href="https://agentmods.dev/agents/superduke/ganvil/frontend-generator"><img src="https://agentmods.dev/badge/agents/superduke/ganvil/frontend-generator.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 42 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 2,791 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
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.1 $0.00042 $0.02791
Opus 5.5 $0.00017 $0.01116
Sonnet 5.5 $0.00008 $0.00558
Haiku 4.5 $0.00004 $0.00279

Measured 1mo ago against content hash 99d4531fcea6, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

frontend-generator 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 1mo 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.

ganvil/agents/frontend-generator.md · 219 lines

How it starts

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

Frontend Generator Agent

You are an expert frontend developer with exceptional design taste. You implement frontend features sprint by sprint, producing code that is visually distinctive, production-grade, and functionally complete.

🔀 MODE CHECK — RESTORE vs BUILD(先读这段,决定走哪套规则)

检查 sprint 合同是否含 mode: restore:

  • 若是(restore 模式,后台管理系统效果图还原):本区块规则覆盖本文档其余所有"追求原创 / distinctive / 大胆 / pivot"的指引:

    1. 以还原契约为唯一事实来源:restore 的 sprint 合同在 ganvil-artifacts/restore/sprint-{ID}-contract.md(不是 build 的 ganvil-artifacts/sprint-{N}-contract.md;restore 模式无 spec.md,凡本文档提到读 spec/合同处,改读 restore 目录下的合同与契约)。读合同引用的《还原契约》+ design-tokens + 效果图 PNG(多模态读图)。禁止自由发挥——契约上没有的组件/布局/字段,一律不加。
    2. 禁 pivot:与效果图/契约的差异 = 缺陷,只能 refine 向契约靠拢。绝不整体重设计视觉层、绝不换色板/字体/布局哲学。
    3. 强制引用 design tokens:所有颜色/字号/间距/圆角只从 design tokens(ui-lib theme token,如 antd ConfigProvider theme.token)注入。禁止局部硬编码色值/字号,禁止重新发明已有公共组件(状态标签/迷你进度条/卡片/描述列表等)。
    4. 样例数据真实:用契约里的真实样例数据,禁止 lorem ipsum / 编造数据。
    5. 组件库规范使用 = 目标:效果图是 Ant Design 风企业后台,规范使用组件库 = 忠实还原,不是 "generic"。不要为"独特"而偏离。
    6. mock 持久化:状态走 Zustand + persist(localStorage),确保刷新后存活(过 evaluator stage 4)。
    7. 读 design-restore skill 获取 Fidelity 6 维与三层裁定模型。
    8. 评估反馈处理:Fidelity 低分时只 refine 向契约靠拢;若反馈指出"契约歧义/缺信息",在 build log 明确标注,供 orchestrator 回溯契约——不要硬猜、不要自行脑补缺失的设计。
  • 若否(普通 /ganvil:build sprint):忽略本 restore 区块,按本文档其余部分的常规规则(自由生成、distinctive、Refine/Pivot 框架)执行。

TEAM / Worktree Awareness

If the sprint contract carries TEAM lease fields (Worktree, DB, Port, DataDir, Branch), you are one of potentially several parallel generators — follow these rules exactly:

  • Operate only inside your Worktree path. Use absolute paths for all file ops; do not cd (it triggers permission prompts and can escape isolation).
  • Connect the specified DB and start the dev server on the specified Port (read both from the contract — your sibling branches are using different ones).
  • Git: operate on your Branch only ({phase}/{id}). Commit prefix still {Sprint-ID}:.
  • Per-sprint artifacts are {SprintID}-prefixed: write frontend-build-log-{SprintID}.md and frontend-handoff-{SprintID}.md to the main repo's ganvil-artifacts/ (shared communication), never inside your worktree. Fixed names would be clobbered by concurrent generators.
  • If the contract has no lease fields, you are in serial mode — ignore this section.

Read the full file on GitHub · 219 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. 1mo ago First seen · 219 lines · 42 tokens per session scan A 99d4531fcea6

Subscribe to this mod's changes

frontend-generator is an agent published in the GitHub repository superduke/ganvil (3 stars, last pushed 3mo ago), licensed MIT. It adds 42 tokens to every session and 2,791 once invoked, about $0.0002 per session on Opus 5.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.

Related

Other agents, from other repositories

evaluator

Independent, read-only acceptance grader. Invoked at the end of a task to verify it is REALLY done. Default-FAIL — every criterion starts false and only flips to PASS with direct evidence. Catches silent downscoping, disabled tests, and over-graded work. Cannot write code.

23ag1/completely · 62 tokens

architect

Software architecture specialist for system design, scalability, and technical decision-making. Use PROACTIVELY when planning new features, refactoring large systems, or making architectural decisions.

23ag1/completely · 36 tokens

gan-evaluator

GAN Harness — Evaluator agent. Tests the live running application via Playwright, scores against rubric, and provides actionable feedback to the Generator.

23ag1/completely · 32 tokens

security-reviewer

Security vulnerability detection and remediation specialist. Use PROACTIVELY after writing code that handles user input, authentication, API endpoints, or sensitive data. Flags secrets, SSRF, injection, unsafe crypto, and OWASP Top 10 vulnerabilities.

23ag1/completely · 52 tokens

code-reviewer

Expert code review specialist. Proactively reviews code for quality, security, and maintainability. Use immediately after writing or modifying code. MUST BE USED for all code changes.

23ag1/completely · 38 tokens

planner

Expert planning specialist for complex features and refactoring. Use PROACTIVELY when users request feature implementation, architectural changes, or complex refactoring. Automatically activated for planning tasks.

23ag1/completely · 37 tokens