Design System
Type /design-system in the Agent panel with your prompt to create your first page based on this design system.
Example:
/design-system Build a pricing page at /pricing with a hero, three plan Cards, a comparison table and FAQ. End with the closing CTA and footer component
Recommended model: GPT 6.1 Sol or higher.
Color
Core surfaces, borders, and type contrast.
Background Primary
Background Secondary
Background Tertiary
Background Alternate
Background Alternate 2
Border
Font Primary
Font Secondary
Font Alternate
Transparent
Typography
This is Heading H1
This is Heading H2
This is Heading H3
This is Heading H4
This is Heading H5
This is Heading H6
This is paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Text Size Large
Text Size Small
Text Size Bold
Link
Buttons
All available button variants.
Primary
Primary Small
Secondary
Secondary Small
Alternate
Imagery
Section & Container Format
This is Heading
This is Description
Logo Grid
Feature Cards
Premium Equipment
Train with world-class fitness equipment.
Feature Cards 2
2 - Full-Body Assessment
Get a complete picture of your health, fitness, and performance through comprehensive diagnostics.
Testimonial Card
Sarah Mitchell
@sarah_micthcerll
“The quality of coaching and attention to detail are exceptional. Every session feels purposeful and aligned with my goals.”
Mini Feature Card
Strength Training
Pricing Card
Essential
$99/mo
Everything you need to start.
Full gym access
4 personal sessions
Initial fitness assessment
Basic Nutrition guidance
Image Card
Stats Card
95%
Member satisfaction
Faq Accordian
Do I need prior fitness experience to get started?
Contact Form
Start a conversation
By sending this message, you agree to be contacted about your request.
