Bricks 2.0 AI Generated Framework

prompt.txt

Please answer the following settings for generating a CSS clamp() value. I will not proceed until you provide all the values (or confirm the defaults):
Clamp() Generation Settings
1.	What is the base rem size? (default: 10px)
2.	What is the min viewport width? (default: 380px)
3.	What is the min size in pixels? (default: 15px)
4.	What is the max viewport width? (default: 1600px)
5.	What is the max size in pixels? (default: 18px)
________________________________________
📐 Choose a spacing scale ratio (case-insensitive)
Options:
Minor Second
Major Second
Minor Third
Major Third
Perfect Fourth (default)
Augmented Fourth
Perfect Fifth
Golden Ratio
Minor Sixth
Major Sixth
Minor Seventh
Major Seventh
Octave
________________________________________
Once both clamp and ratio are confirmed, I’ll:
① Generate the CSS clamp()
→ Assign it to --space—s
All scale variables that use calc() will correctly wrap variables in var(...) syntax.
Example: --space--m: calc(var(--space--s) * 1.5);
② Generate spacing scale variables:
--space--xs
--space--m
--space--l
--space--xl
--space--2xl
--space--3xl
--space--4xl
Additional spacing variables:
--section-padding-block: var(--space--3xl)
--gutter: var(--space--s)
--container-gap: var(--space--l)
--content-gap: var(--space--s)
--content-gap--s: var(--space--xs)
--content-gap--l: var(--space--l)
________________________________________
🎨 Then I’ll ask: What is your primary brand color?
(Provide as hex, rgb, or hsl)
I’ll convert it to HSL and output:
--primary: hsl(...)
--primary-light: hsl(...)
--primary-dark: hsl(...)
Then I’ll suggest matching values for:
--secondary
--secondary-light
--secondary-dark
--light
--dark
________________________________________
③ Then I’ll ask for typography clamp settings and scale ratio
→ Outputting:
--text--xs through --text--4xl
________________________________________
④ Finally, I’ll output 12 CSS grid variables:
--grid--1: minmax(0, 1fr)
--grid--2 through --grid--12: repeat(n, minmax(0, 1fr))
Compile all results into a single :root{} block

Generate JSON suitable for downloading and importing into Bricks Builder. Ensure all categories and variables are included. Remember any generated IDs between sessions so that if I run this prompt again the same variables and categories get the same IDs.
Example Bricks JSON:
{
  "variables": [
    {
      "id": "kztvdo",
      "name": "space--s",
      "value": "clamp(2rem, 1.43vw + 1.6rem, 3rem)",
      "category": "chdvbn"
    },
    {
      "id": "vopknx",
      "name": "primary",
      "value": "hsl(150, 100%, 60%)",
      "category": "artagj"
    },
    {
      "id": "godrin",
      "name": "text--s",
      "value": "clamp(1.5rem, 0.26vw + 1.39rem, 1.8rem)",
      "category": "vbpnkh"
    }
  ],
  "categories": [
    {
      "id": "chdvbn",
      "name": "Spacing"
    },
    {
      "id": "artagj",
      "name": "Colors"
    },
    {
      "id": "vbpnkh",
      "name": "Typography"
    }
  ]
}