Back to articles
Designkit autogen use claude api

Designkit autogen use claude api

via Dev.toPixeliro

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,

Continue reading on Dev.to

Opens in a new tab

Read Full Article
3 views

Related Articles