Design-system-first project creation
Build SaaS screens from templates and design systems
Choose a structure, apply a professional design system, then customize every token before you export.
Template skeletonsCurated design systemsEditable project graph
Template x Design System
Live composition preview
AnalyticsEditorWorkspaceLanding
Template
Analytics Dashboard
Design System
Calm Professional
Output
Editable Project
Featured showcase
Start from a finished combination
Each showcase is a complete instance: a template skeleton, a design system, and realistic content working together.
My projects
Generated projects stay editable
A project is the saved combination of a template skeleton, a design system, content, mock data, and your custom edits.
Support Ops Studio
DraftChat Shell + Enterprise Dense
Updated Today
Fintech Metrics
ExportedAnalytics Dashboard + Calm Professional
Updated Yesterday
Creator Launch Page
DraftMarketing Landing + Creator Expressive
Updated Jun 28
Template skeletons
Choose structure before styling
Template skeletons stay intentionally neutral. They describe pages, sections, surfaces, and supported capabilities before any design system is applied.
DashboardEditorWorkspaceLandingChat
HomeDashboardSettings
3 pages6 sections
Dashboard App
Analytics Dashboard
Neutral skeleton for list detail products with data output.
AuthCredits
HomeEditorRuns
3 pages7 sections
Single Tool
Single Tool Editor
Neutral skeleton for editor canvas products with doc output.
PromptHistoryAuthCredits
HomeWorkspaceHistory
3 pages8 sections
Workspace App
Chat Shell
Neutral skeleton for chat shell products with doc output.
PromptHistoryAuthChat Stream
HomeBuilderRuns
3 pages8 sections
Multi Tool Platform
Prompt To App Builder
Neutral skeleton for builder products with data output.
PromptHistoryAuthCredits
HomeGenerateHistory
3 pages6 sections
Single Tool
Media Generator
Neutral skeleton for generator loop products with media output.
PromptHistoryAuthCredits
HomePricingDocs
3 pages7 sections
Marketing Site
Marketing Ai Landing
Neutral skeleton for generator loop products with data output.
Marketing only
Design system library
Professional systems, not blank knobs
Users can customize freely, but they start from standardized token sets with readable color, typography, radius, density, and component behavior.
Calm Professional
B2B SaaS, finance, operations, analytics
Productiveprofessional
Radius 8pxDefault
Tokens, components, states
ApplyEnterprise Dense
Dashboards, admin tools, data-heavy workflows
Productiveprofessional
Radius 6pxCompact
Tokens, components, states
ApplyCreator Expressive
Creator tools, media apps, launch pages
Editorialexpressive
Radius 12pxComfortable
Tokens, components, states
ApplyWarm Wellness
Healthcare, education, coaching, human support
Roundedneutral
Radius 10pxComfortable
Tokens, components, states
ApplyCreate with control
Pick a template, apply a design system, then edit the project.
AI can still help with search, recommendations, copy, and mock data. The project structure and export path stay deterministic.