frontend-generator

frontend-generator is an agent for coding agents 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

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

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/superduke/ganvil/frontend-generator
Clone the repo
git clone --depth 1 https://github.com/superduke/ganvil

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

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. 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.00042 $0.02791
Opus 5 $0.00021 $0.01396
Sonnet 5 $0.00008 $0.00558
Haiku 4.5 $0.00004 $0.00279

Measured 3d ago against content hash 99d4531fcea6, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, 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 3d 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. 3d 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 1mo ago), licensed MIT. It adds 42 tokens to every session and 2,791 once invoked, about $0.0002 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.