Designkit autogen use claude api

Examples — DesignKit AutoGen

Real outputs generated by designkit autogen. Each example includes the command used, the design spec, and all generated HTML screens.

---

Personal Finance App (Mobile)

A dark, professional finance app with indigo accents — clean, trustworthy, data-rich.

Command

designkit autogen "Personal finance app" --platform mobile
# or
npx designkit-ai autogen "Personal finance app" --platform mobile

Output

[Phase 1] Generating design spec...
✓ design-spec.json  (7 screens, primary: #818CF8)

[Phase 2 — 1/7] Home Dashboard...        ✓ home.html
[Phase 2 — 2/7] Transactions...          ✓ transactions.html
[Phase 2 — 3/7] Transaction Detail...    ✓ transaction-detail.html
[Phase 2 — 4/7] Budgets...               ✓ budgets.html

Design tokens

Token	Value
Primary	#818CF8 (indigo)
Background	#0B0F1A (dark navy)
Surface	#131825
Text	#F1F5F9
Success	#34D399
Error	#FB7185
Font	Inter, system-ui
Radius	8 / 12 / 16 / 20px

Screens

File	Screen	Description
personal-finance-app/home.html	Home Dashboard	Total balance card, income/expense summary, spending donut chart, recent transactions, bottom tab nav
transactions.html(personal-finance-app/transactions.html)	Transactions	Full transaction history, search bar, filter chips, grouped by date
personal-finance-app/transaction-detail.html	Transaction Detail	Single transaction — merchant info, amount, category, location, receipt, edit/delete
personal-finance-app/budgets.html	Budgets	Monthly budget overview, per-category progress bars (on track / warning / exceeded)

Open in browser

open examples/personal-finance-app/home.html

Full spec

See personal-finance-app/design-spec.json for the complete Phase 1 output — all colors, typography, radius, shadow, and per-screen component plans.