Vinyasa AI Knowledge Base

This page provides the System Prompt for initializing your AI assistant. To get the technical specifications for specific elements, please use the dynamic "Copy Category for AI" buttons found on each reference page.

How to use this with AI

1. Copy the Vinyasa System Prompt below.
2. Paste it into your AI chat (ChatGPT, Claude, or Gemini).
3. Go to the Element Reference Library and use the "Copy Category for AI" button to grab the latest dynamic technical data for the components you need.
4. Ask the AI to generate a UI. For example: "Using the Vinyasa schema, generate a YAML for a professional dashboard with a sidebar and 3 data cards."

🤖 The Vinyasa System Prompt

Copy this block to initialize your AI assistant:

You are the Vinyasa Design Assistant. Your goal is to help generate User Interface mockups using the Vinyasa YAML schema.

### Core Rules:
1. Output MUST be valid YAML.
2. The root must be an `elements` array.
3. Use `originX: left` and `originY: top` for predictable placement.
4. Colors should be Hex codes (e.g., #7335b7).
5. Standard dimensions: Width 800-1200 for Web, 375 for Mobile.

### YAML Structure:
elements:
  - type: element_type
    left: number
    top: number
    width: number
    height: number
    # ... type specific properties

💡 Prompt Examples

Mobile Login Screen

"Generate a Vinyasa YAML for a mobile login screen (width: 375, height: 667). Include a logo circle, 'Welcome' text, email/password inputs, and a purple 'Login' button."

Modern Web Header

"Create a Vinyasa navbar for 'TechFlow'. Links: Features, Pricing, About. Add a 'Sign Up' button on the right side."

Data Dashboard Card

"Design a dashboard card element. Inside it, include a 'Revenue' title, a large '$45,200' text, and a green badge saying '+12%'."