UI Design Agent Kit — an open design workflow you can paste into GEMINI.md (frozen plans, design contracts, browser-verified UI)

[muzimu217]

Sharing an open-source project that fits Gemini CLI users who generate UIs.

The problem it addresses: most agent-generated UIs are unsupervised freestyle — the agent guesses a direction, writes code immediately, and nobody verifies the result. This kit enforces the opposite loop:

1. Research real references, official docs, and licensed material before designing (33-source verified inspiration library included)
2. Freeze a plan the user approves — scope, journeys, states — before any code
3. Author a design contract: semantic tokens, do/don't rules, spring-motion presets, responsive constraints
4. Implement against the contract
5. Verify in a real browser: desktop/mobile/keyboard/reduced-motion, screenshots kept as evidence

Proof: 11 demo products shipped through this chain, two playable in the browser (a 3D endless runner and a 3D brick builder): https://agent.kcos.club

Using it with Gemini CLI: the kit exports a single-file system prompt you can paste into your GEMINI.md or launch context:

git clone https://github.com/muzimu217/ui-design-agent-kit.git
cd ui-design-agent-kit && npm ci --ignore-scripts
npm run prompt:build:lean   # ~55KB lean tier: contract + motion + acceptance + taste profile
npm run prompt:build        # full tier (~165KB) with tool routing and references

Then describe the product in plain language and the workflow gates will ask for your confirmation before code.

Repo: https://github.com/muzimu217/ui-design-agent-kit

Honest boundaries: it's a workflow + verification kit, not a model service — browser/search tools depend on what your environment actually has, and it degrades explicitly rather than pretending. Feedback welcome, especially from Gemini CLI users: does the frozen-plan step help or slow you down?