json-from-design-prompt

Create a comprehensive JSON design system profile by analyzing the provided screenshots. Extract all visual design patterns, component structures, and styling conventions that would enable Cursor AI to consistently replicate this design language across new implementations.

---

### ✅ Specific Requirements:

#### 🎨 Element-Specific Color Mapping:

For each visual element, specify **EXACTLY** where colors are applied:

* Card backgrounds vs card borders vs card content
* Button backgrounds vs button text vs button icons
* Icon fills vs icon containers vs icon backgrounds
* Text colors for different hierarchy levels
* Background gradients and their **precise application areas**

#### 🧪 Accurate Color Extraction:

Provide **precise hex values** by analyzing:

* Gradient start/end colors and their direction (e.g. `135deg`)
* Shadow colors and opacity values
* Hover state color variations
* Border colors vs fill colors
* Text color contrast ratios

#### 🧠 Context-Aware Styling Rules:

Document **styling by context**, not just element:

* `"Card containers have gradient X, but card icons use solid color Y"`
* `"Primary buttons use gradient A on background, secondary buttons use color B"`
* `"Navigation icons are color C, but action icons are color D"`

#### ✨ Visual Effect Placement:

Specify **which elements receive which effects**:

* Elements with shadows (and exact specs: offset, blur, opacity)
* Elements with gradients (with directions and color stops)
* Border radius (specific radius values per component)
* Elements with hover/interaction animations

#### 🔁 Component State Mapping:

For every component, document:

* Default state styling
* Hover state (what changes, how it animates)
* Active/pressed state
* Disabled state (grayed out, muted, etc.)
* Focus state (e.g. outlines, glows)

---

### 🧾 Output Format:

Structure the output as a detailed JSON object that maps styling to specific elements and contexts:

```json
{
  "elementStyling": {
    "cards": {
      "background": "linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%)",
      "border": "#E0E0E0",
      "shadow": "0 4px 12px rgba(0,0,0,0.1)",
      "borderRadius": "16px",
      "icons": {
        "fill": "#FFFFFF",
        "background": "none"
      }
    },
    "buttons": {
      "primary": {
        "background": "#007AFF",
        "text": "#FFFFFF",
        "hover": {
          "background": "#0056CC"
        },
        "disabled": {
          "background": "#D0D0D0",
          "text": "#888888"
        }
      }
    }
  }
}
```

---

### 🚫 DO NOT Rules:

Include a `"rules"` section that prevents styling misuse:

```json
"rules": {
  "DO_NOT": [
    "Do not apply card gradients to button icons.",
    "Do not use icon background colors as text highlights.",
    "Do not reuse button hover color on form input borders.",
    "Do not apply shadows to text labels unless specified."
  ]
}
```

---

### 🧭 Design Style Extraction:

Provide a **generalized visual style breakdown** to summarize the aesthetic in human-readable form. Structure like this:

```json
"designLanguage": {
  "keywords": [
    "minimal", "soft gradients", "glassmorphism", "elevated cards", "high contrast text", "layered depth"
  ],
  "descriptions": [
    "Uses gentle linear gradients as main visual anchor, primarily on cards and buttons.",
    "Card components have soft shadows and rounded corners, creating a subtle elevation effect.",
    "Icons are monochrome or softly colored, often embedded within transparent or blurred containers.",
    "Buttons feel tactile with bold contrast and animated hover transitions.",
    "Typography is clean and modern, with clear hierarchy through font weight and color contrast.",
    "Overall aesthetic balances vibrant accents with soft backgrounds, giving a polished and modern feel."
  ]
}
```

---

### 🎯 AI Replication Goal:

Cursor AI should use this JSON as the **single source of truth** to:

* Apply gradients to the correct elements (e.g., cards, not icons)
* Color component parts correctly (e.g., text vs borders)
* Preserve visual consistency in states (hover, focus, pressed)
* Avoid over-styling or cross-styling mismatches via `"DO_NOT"` rules
* Reproduce the visual voice even across new components, guided by `"designLanguage"`