My tests

Find a test

Test 01 24 runs

Join the Hive Mind

Generate a landing page as a marketing page for joining our Hive Mind. The unique perks of our Hive Mind is that you still get your individual identity. You just pretty much have access to everyone else's mind. And you do get some objectives, but you only work for the Hive Mind one day a week from 9 to 5. You also need to pay 5% on income. In exchange, you get access to a wide network of professionals and opportunities. You come up with the name.

Open test

Generate a landing page as a marketing page for joining our Hive Mind. The unique perks of our Hive Mind is that you still get your individual identity. You just pretty much have access to everyone else's mind. And you do get some objectives, but you only work for the Hive Mind one day a week from 9 to 5. You also need to pay 5% on income. In exchange, you get access to a wide network of professionals and opportunities. You come up with the name.

Test 02 16 runs

Interactive LLM Learning Site

Write full HTML, CSS, and JavaScript for a stunning, bold, creative, unique light-mode landing page for a website about LLMs. Before you start, pick one specific angle/theme (not a generic AI slop vibe) and make the whole page commit to it in design and copy. Also add real OpenRouter API support so the page can power whatever interactive features you invent (not necessarily a chatbot): include a Settings panel where the user can paste an OpenRouter API key (store it in localStorage), fetch the live model list from OpenRouter for a searchable model picker, and build 2–3 interactive features that use the API in ways that fit your chosen angle. Use these OpenRouter cURL examples as the integration contract: List available models (use this to populate the model picker) curl https://openrouter.ai/api/v1/models -H "Authorization: Bearer $OPENROUTER_API_KEY" Call a model (non-streaming) curl https://openrouter.ai/api/v1/chat/completions -H "Authorization: Bearer $OPENROUTER_API_KEY" -H "Content-Type: application/json" -d '{ "model": "x-ai/grok-4.5", "messages": [ {"role": "user", "content": "Your instruction or input here"} ] }' Call a model (streaming SSE) curl https://openrouter.ai/api/v1/chat/completions -H "Authorization: Bearer $OPENROUTER_API_KEY" -H "Content-Type: application/json" -d '{ "model": "x-ai/grok-4.5", "messages": [ {"role": "user", "content": "Your instruction or input here"} ], "stream": true }' Client-side streaming notes (IF you use streaming): The response is Server-Sent Events (SSE) lines like: data: {json...} and ends with data: [DONE]. Each JSON chunk contains incremental text in: choices[0].delta.content (when present). Render incrementally as chunks arrive. Return only a single self-contained index.html (Tailwind CDN ok). Do not log the API key, and don’t hardcode a model list: always fetch models from the API. That's only if you're surfacing the chat or model selection to the user, which you don't necessarily want to do. You might come up with some other creative uses of the LLMs in the background to power other features. In which case, you can just use the default model ID shown in the documentation I gave you. Note that I don't want you to come up with generic features. For example, some sort of input box with a pre-specified prompt that you'll send to one or multiple models and get an interesting output. That's not interesting to the user at all. The idea is to teach them about the things that LLMs can do by showing them actual useful use cases like research, code generation, brainstorming, and more. It's not to show them that they can type something into a text box and get something out. Almost everyone understands that at this point. So we don't want text in, text out. Come up with something more creative. LLMs can produce complex data structures or code if you need them to. Not that we just want them generating code, since this is to introduce people to LLMs. We might have one thing that's text in, text out to get the idea, but we want them thinking a lot bigger than that. That should only be one among many demonstrations.

Open test

Also add real OpenRouter API support so the page can power whatever interactive features you invent (not necessarily a chatbot): include a Settings panel where the user can paste an OpenRouter API key (store it in localStorage), fetch the live model list from OpenRouter for a searchable model picker, and build 2–3 interactive features that use the API in ways that fit your chosen angle.

Use these OpenRouter cURL examples as the integration contract:

List available models (use this to populate the model picker) curl https://openrouter.ai/api/v1/models -H "Authorization: Bearer $OPENROUTER_API_KEY"

Call a model (non-streaming) curl https://openrouter.ai/api/v1/chat/completions -H "Authorization: Bearer $OPENROUTER_API_KEY" -H "Content-Type: application/json" -d '{ "model": "x-ai/grok-4.5", "messages": [ {"role": "user", "content": "Your instruction or input here"} ] }'

Call a model (streaming SSE) curl https://openrouter.ai/api/v1/chat/completions -H "Authorization: Bearer $OPENROUTER_API_KEY" -H "Content-Type: application/json" -d '{ "model": "x-ai/grok-4.5", "messages": [ {"role": "user", "content": "Your instruction or input here"} ], "stream": true }'

Client-side streaming notes (IF you use streaming):

The response is Server-Sent Events (SSE) lines like: data: {json...} and ends with data: [DONE].

Each JSON chunk contains incremental text in: choices[0].delta.content (when present).

Render incrementally as chunks arrive.

Return only a single self-contained index.html (Tailwind CDN ok). Do not log the API key, and don’t hardcode a model list: always fetch models from the API.

That's only if you're surfacing the chat or model selection to the user, which you don't necessarily want to do. You might come up with some other creative uses of the LLMs in the background to power other features. In which case, you can just use the default model ID shown in the documentation I gave you.

Note that I don't want you to come up with generic features. For example, some sort of input box with a pre-specified prompt that you'll send to one or multiple models and get an interesting output. That's not interesting to the user at all.

The idea is to teach them about the things that LLMs can do by showing them actual useful use cases like research, code generation, brainstorming, and more. It's not to show them that they can type something into a text box and get something out. Almost everyone understands that at this point. So we don't want text in, text out. Come up with something more creative.

LLMs can produce complex data structures or code if you need them to.

Not that we just want them generating code, since this is to introduce people to LLMs.

We might have one thing that's text in, text out to get the idea, but we want them thinking a lot bigger than that. That should only be one among many demonstrations.

Test 03 6 runs

Three-Genre Browser Game

Tower Defense + Vampire Survivors + Town Builder, single html file browser game. Do your best. You will be evaluated on: 1. Balancing the game, so it's not too easy and not too hard. 2. Visual aesthetics: the more impressive the graphics, the better. This includes small UI details and satisfying user experience elements. 3. Your overall vibes and creativity. Go!

Open test

Tower Defense + Vampire Survivors + Town Builder, single html file browser game. Do your best. You will be evaluated on:

1. Balancing the game, so it's not too easy and not too hard.
2. Visual aesthetics: the more impressive the graphics, the better. This includes small UI details and satisfying user experience elements.
3. Your overall vibes and creativity.

Go!

Test 04 2 runs

Ironwood × Streben Landing Page

--- name: ironwood-branding description: Ironwood AI brand guidelines — colors, typography, logos, textures, and layout patterns. Only use when explicitly asked to apply Ironwood branding. --- # IRONWOOD AI BRANDING SKILL Only use this skill when explicitly asked to apply Ironwood AI branding. Follow all rules below exactly. --- ## Color Palette ```css :root { --iw-orange: #F95301; /* Primary — CTAs, buttons, accents */ --iw-orange-highlight: #FFDDBD; /* Muted orange — use on orange backgrounds */ --iw-title-gray: #2A2A2A; /* Main heading text */ --iw-text-gray: #333333; /* Body copy, secondary text */ --iw-bg-gray: #F4F4F4; /* Neutral light gray backgrounds */ --iw-white: #FFFFFF; --iw-black: #000000; /* Reserved for high contrast */ } ``` --- ## Typography ### Fonts - **Headings (H1–H4):** Arial Black — system font, no import needed - Optional hosted file: `https://ironwoodai.com/wp-content/uploads/ariblk.ttf` - **Body/UI:** Montserrat — import from Google Fonts: ```html <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> ``` - **Secondary/Aspirational:** Cera Pro (self-hosted at Ironwood CDN) ```css @font-face { font-family: 'Cera Pro'; font-weight: 400; src: url('https://ironwoodai.com/wp-content/uploads/Cera-Pro-Regular.ttf'); } @font-face { font-family: 'Cera Pro'; font-weight: 500; src: url('https://ironwoodai.com/wp-content/uploads/Cera-Pro-Medium.ttf'); } @font-face { font-family: 'Cera Pro'; font-weight: 700; src: url('https://ironwoodai.com/wp-content/uploads/Cera-Pro-Bold.ttf'); } @font-face { font-family: 'Cera Pro'; font-weight: 900; src: url('https://ironwoodai.com/wp-content/uploads/Cera-Pro-Black.ttf'); } ``` ### CSS Variables ```css :root { --font-heading: 'Arial Black', Arial, sans-serif; --font-body: 'Montserrat', sans-serif; } ``` --- ## Logo Assets ### Full Logos | Use Case | URL | |---|---| | On dark/orange backgrounds (white, transparent) | `https://ironwoodai.com/wp-content/uploads/inronwood-logo-white.png` (666×124px) | | On white/light backgrounds (full color, opaque) | `https://ironwoodai.com/wp-content/uploads/Ironwood_fullcolor-logo.jpg` (1384×255px) | | Subtle/watermark on light gray (transparent) | `https://ironwoodai.com/wp-content/uploads/ironwood-logo.png` (1050×195px) | ### Fingerprint Icon (standalone mark) | Use Case | URL | |---|---| | High-res, transparent (app icons, social) | `https://ironwoodai.com/wp-content/uploads/android-chrome-512x512-1.png` (512×512px PNG) | | Simplified, white background | `https://ironwoodai.com/wp-content/uploads/ironwood-favicon.jpg` (247×247px JPEG) | | Simplified, transparent background | `https://ironwoodai.com/wp-content/uploads/ironwood-favicon__1_-removebg-preview.png` (247×247px PNG) | | Monochrome/black version | `https://ironwoodai.com/wp-content/uploads/download-91.png` (707×712px PNG) | --- ## Background & Texture Assets | Asset | URL | Use When | |---|---|---| | Ultra-faint orange watermark (white/light bg) | `https://ironwoodai.com/wp-content/uploads/thumb-orange.png` | Subtle brand texture on white sections | | White fingerprint on gray (for orange/dark sections) | `https://ironwoodai.com/wp-content/uploads/thumb-white.png` | Behind content on orange hero sections — corner-anchored (see usage note below for all four corner options) | | Swirling fingerprint pattern | `https://ironwoodai.com/wp-content/uploads/background-swirls.png` | Light page/section backgrounds | | Diagonal dash pattern | `https://ironwoodai.com/wp-content/uploads/diagnal-background.png` | Hero or intro sections, directional texture | | Footer background (wide swirl) | `https://ironwoodai.com/wp-content/uploads/footer-background.png` | Footer/full-width banner bands | ### `thumb-white.png` Usage Note This image is cropped at the top and left edges — it is designed to bleed off those edges. By default it is anchored to the **top-left** corner. However, you can place it in any corner by combining `background-position` with a CSS `transform` (via a pseudo-element or wrapper) to flip it into the desired orientation: | Corner | `background-position` | Transform needed | |---|---|---| | Top-left (default) | `top left` | none | | Top-right | `top right` | `scaleX(-1)` | | Bottom-left | `bottom left` | `scaleY(-1)` | | Bottom-right | `bottom right` | `scale(-1, -1)` | **Default (top-left) — inline background:** ```css background-image: url('https://ironwoodai.com/wp-content/uploads/thumb-white.png'); background-position: top left; background-repeat: no-repeat; ``` **Other corners — use a pseudo-element so you can apply a transform without affecting content:** ```css .section { position: relative; overflow: hidden; } .section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://ironwoodai.com/wp-content/uploads/thumb-white.png'); background-repeat: no-repeat; /* Example: bottom-right corner */ background-position: bottom right; transform: scale(-1, -1); pointer-events: none; } ``` Adjust `background-position` and `transform` together per the table above. Never center, offset, or stretch the image — it must always bleed off the chosen corner edges. --- ## Layout Patterns ### Hero / Above-the-Fold - Full-bleed `#F95301` orange background - White logo (`inronwood-logo-white.png`) - White heading and body text - `thumb-white.png` as background texture overlay (low opacity, corner-anchored — see usage note above for placement options) - Buttons: white fill with orange text, or orange fill with white text ### Content Sections (White/Light) - Background: `#FFFFFF` or `#F4F4F4` - Optional texture: `background-swirls.png` or `diagnal-background.png` - Headings: `#2A2A2A`, font: Arial Black - Body: `#333333`, font: Montserrat ### Footer - Background: `#2A2A2A` (dark charcoal) - Logo: white version (`inronwood-logo-white.png`) - Text: white - Optional texture: `footer-background.png` ### Buttons ```css /* Primary — on white/light backgrounds */ .btn-primary { background: #F95301; color: #FFFFFF; font-family: 'Montserrat', sans-serif; font-weight: 600; } /* Reversed — on orange backgrounds */ .btn-reversed { background: #FFFFFF; color: #F95301; font-family: 'Montserrat', sans-serif; font-weight: 600; } ``` --- ## Do Not - No purple gradients or "AI slop" aesthetics - No gradient color schemes except where the fingerprint icon naturally has warm orange tones - Do not use the JPEG logos on colored or transparent backgrounds (they have white bg baked in) - Do not use `Ironwood_fullcolor-logo.jpg` on anything other than white/light backgrounds name: streben-brand description: "Complete Streben brand guide covering logos, colors, typography, buttons, icons, and design patterns. Only use this skill when explicitly asked to apply Streben branding." Streben Brand Guide Logos Full Logo — Dark (for light backgrounds) URL: https://streben.io/wp-content/uploads/2025/01/RztaqzQ4l7Q2d2gBwr7dhAeECTk.avif AVIF, transparent background Use on: white/light backgrounds (site header) Full Logo — White (for dark backgrounds) URL: https://streben.io/wp-content/uploads/2025/01/Streben-logo-final-03-1_edited.avif AVIF, 224×55px, transparent background Use on: dark/black sections (site footer). Never on light backgrounds. Isotipo / Brand Icon — Color Gradient URL: https://streben.io/wp-content/uploads/2025/01/Isotipo-Streben-Green-Blue.png PNG, 3000×3000px, transparent background Gradient: blue-teal (#6EC1E4 range) left → lime green (#8AC245 range) right Use for: favicons, app icons, social profiles, standalone icon use. Works on light or dark backgrounds. Color Palette Primary Brand Colors NameHexUsageAccent Green#8AC245Primary CTA fill, stat numbers, highlight textPrimary Blue#6EC1E4Icon fill/stroke, secondary highlightsNear Black#0A0A0ABody text on light sections, dark backgrounds, logo dark variantSupporting Colors NameHexUsageWhite#FFFFFFPage background, text on darkOff-White#F8FAF5 / #FAF9F5Subtle section backgroundsDark Charcoal#333333Default body textDark Gray#54595FSecondary/muted elementsMuted Text#7A7A7ABody copy, subtextTrue Black#000000Dark section halvesAccent/Gradient Colors (backgrounds only) Approx. ValueSourceUsage#1DDDBF / #29B6D4No-texture.jpgBlue-teal radial glow in dark sections#7B2D8BNo-texture2.jpgPurple radial in CTA gradient#CB0460 / #C5005ENo-texture2.jpgMagenta radial in CTA sectionBackground Textures Dark Blue-Teal Gradient (No-texture.jpg) URL: https://streben.io/wp-content/uploads/2025/03/No-texture.jpg 1920×1080px. Near-black with soft blue-to-teal glow from bottom-left. Use for: dark feature sections (e.g., "Our Exclusivity Promise"). White text + blue icons over this. Dark Purple-Magenta Gradient (No-texture2.jpg) URL: https://streben.io/wp-content/uploads/2025/03/No-texture2.jpg 1920×1080px. Near-black with purple (bottom-left) + magenta (top-right) radials. Use for: high-energy CTA sections. Pair with white text + white-fill button with dark text. Grainy Green-Cyan Texture (Texture.jpg) URL: https://streben.io/wp-content/uploads/2025/03/Texture.jpg 1920×1080px. Dark with noisy/grainy lime-green-to-cyan wave. Film-grain texture. Use for: feature callouts needing visual energy with the green brand color. Typography Primary Font: Urbanist (Google Fonts) — used for everything. ElementSizeWeightLetter SpacingColorH2 (hero/section heading)60px600 SemiBold1pxWhite (dark) or #0A0A0A (light)H3 (section subheading)36px600 SemiBold1px#0A0A0AH422px500 Medium1pxWhite or darkH525px600 SemiBold1pxWhiteBody / Paragraph16px500 Medium1px#0A0A0A (light) or rgba(255,255,255,0.7) (dark)Navigation links16px500 Mediumnormal#0A0A0AButtons16px900 Black1pxWhiteAll text uses 1px letter-spacing consistently for a premium, airy feel. Buttons & UI Components Primary Button — Green CTA Background: #8AC245 Text: #FFFFFF, Urbanist 16px weight 900 Border radius: 25px (pill) Padding: 12px 24px Letter spacing: 1px Used for: "Get Started" and primary conversion CTAs Secondary Button — White Fill Background: #FFFFFF Text: #0A0A0A, Urbanist 16px weight 900 Border radius: 25px (pill) Used for: CTAs on dark/colored backgrounds (e.g., "Start Now") Buttons are always pill-shaped (25px radius). Never squared. Icons All custom icons: outline/line-art style, black on transparent. On dark sections, override to #6EC1E4 via CSS. IconURLLocation / Map Pinhttps://streben.io/wp-content/uploads/2025/02/location.svgStrategy / Lightbulb+Gearhttps://streben.io/wp-content/uploads/2025/02/developing-1.svgRevenue Growth / Hand+Charthttps://streben.io/wp-content/uploads/2025/02/revenue-growth-1.svgLight backgrounds: icons at natural black Dark backgrounds: icons at #6EC1E4 Outline weight is thick and rounded, matching Urbanist's style Streben also uses Lottie animated icons (JSON) for consultation, polygon, and computer display categories Design Patterns & Rules Light sections: White or off-white background. #0A0A0A headings. #7A7A7A body copy. Green accent on numbers/stats. Dark sections: Use No-texture backgrounds. White headings. Semi-transparent white body text (rgba(255,255,255,0.7)). #6EC1E4 icons. White or green CTA buttons. Logo placement: Dark/color logo on white/light header. All-white logo on dark footer. Isotipo alone for favicon/standalone brand use. Card borders on dark sections: Subtle white border, slight rounded corners, transparent/dark fill — glassmorphism-adjacent style. Spacing: Consistent 1px letter-spacing across all text elements. name: frontend-design description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. license: Complete terms in LICENSE.txt This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints. Design Thinking Before coding, understand the context and commit to a BOLD aesthetic direction: Purpose: What problem does this interface solve? Who uses it? Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction. Constraints: Technical requirements (framework, performance, accessibility). Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember? CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity. Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: Production-grade and functional Visually striking and memorable Cohesive with a clear aesthetic point-of-view Meticulously refined in every detail Frontend Aesthetics Guidelines Focus on: Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font. Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise. Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density. Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays. NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character. Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations. IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well. Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision. I want you to make a landing page for Ironwood AI x Streben. Read your Ironwood branding skill and your Streben branding skill to make a webpage that shows our collaboration. I'll show you a screenshot of a page I made that shows some of the tools that we've built for Streben. This can give you some idea of what the content of the page could be, but your stylistic design needs to have both of our styles, cool scroll effects, and look like a really cool collaboration. You might want to research our respective angles for our actual marketing more so that you can make a coherent offering. These are internal tools that Ironwood built for Streben that show: (a) How Ironwood can make your business more efficient (b) How Streben is an efficient marketing agency I just feel like you could put this together in an epic and interesting way.

Open test

---

name: ironwood-branding

description: Ironwood AI brand guidelines — colors, typography, logos, textures, and layout patterns. Only use when explicitly asked to apply Ironwood branding.

---



# IRONWOOD AI BRANDING SKILL



Only use this skill when explicitly asked to apply Ironwood AI branding. Follow all rules below exactly.



---



## Color Palette



```css

:root {

  --iw-orange: #F95301;          /* Primary — CTAs, buttons, accents */

  --iw-orange-highlight: #FFDDBD; /* Muted orange — use on orange backgrounds */

  --iw-title-gray: #2A2A2A;      /* Main heading text */

  --iw-text-gray: #333333;       /* Body copy, secondary text */

  --iw-bg-gray: #F4F4F4;         /* Neutral light gray backgrounds */

  --iw-white: #FFFFFF;

  --iw-black: #000000;           /* Reserved for high contrast */

}

```



---



## Typography



### Fonts

- **Headings (H1–H4):** Arial Black — system font, no import needed

  - Optional hosted file: `https://ironwoodai.com/wp-content/uploads/ariblk.ttf`

- **Body/UI:** Montserrat — import from Google Fonts:



```html

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">

```



- **Secondary/Aspirational:** Cera Pro (self-hosted at Ironwood CDN)



```css

@font-face {

  font-family: 'Cera Pro';

  font-weight: 400;

  src: url('https://ironwoodai.com/wp-content/uploads/Cera-Pro-Regular.ttf');

}

@font-face {

  font-family: 'Cera Pro';

  font-weight: 500;

  src: url('https://ironwoodai.com/wp-content/uploads/Cera-Pro-Medium.ttf');

}

@font-face {

  font-family: 'Cera Pro';

  font-weight: 700;

  src: url('https://ironwoodai.com/wp-content/uploads/Cera-Pro-Bold.ttf');

}

@font-face {

  font-family: 'Cera Pro';

  font-weight: 900;

  src: url('https://ironwoodai.com/wp-content/uploads/Cera-Pro-Black.ttf');

}

```



### CSS Variables

```css

:root {

  --font-heading: 'Arial Black', Arial, sans-serif;

  --font-body: 'Montserrat', sans-serif;

}

```



---



## Logo Assets



### Full Logos

| Use Case | URL |

|---|---|

| On dark/orange backgrounds (white, transparent) | `https://ironwoodai.com/wp-content/uploads/inronwood-logo-white.png` (666×124px) |

| On white/light backgrounds (full color, opaque) | `https://ironwoodai.com/wp-content/uploads/Ironwood_fullcolor-logo.jpg` (1384×255px) |

| Subtle/watermark on light gray (transparent) | `https://ironwoodai.com/wp-content/uploads/ironwood-logo.png` (1050×195px) |



### Fingerprint Icon (standalone mark)

| Use Case | URL |

|---|---|

| High-res, transparent (app icons, social) | `https://ironwoodai.com/wp-content/uploads/android-chrome-512x512-1.png` (512×512px PNG) |

| Simplified, white background | `https://ironwoodai.com/wp-content/uploads/ironwood-favicon.jpg` (247×247px JPEG) |

| Simplified, transparent background | `https://ironwoodai.com/wp-content/uploads/ironwood-favicon__1_-removebg-preview.png` (247×247px PNG) |

| Monochrome/black version | `https://ironwoodai.com/wp-content/uploads/download-91.png` (707×712px PNG) |



---



## Background & Texture Assets



| Asset | URL | Use When |

|---|---|---|

| Ultra-faint orange watermark (white/light bg) | `https://ironwoodai.com/wp-content/uploads/thumb-orange.png` | Subtle brand texture on white sections |

| White fingerprint on gray (for orange/dark sections) | `https://ironwoodai.com/wp-content/uploads/thumb-white.png` | Behind content on orange hero sections — corner-anchored (see usage note below for all four corner options) |

| Swirling fingerprint pattern | `https://ironwoodai.com/wp-content/uploads/background-swirls.png` | Light page/section backgrounds |

| Diagonal dash pattern | `https://ironwoodai.com/wp-content/uploads/diagnal-background.png` | Hero or intro sections, directional texture |

| Footer background (wide swirl) | `https://ironwoodai.com/wp-content/uploads/footer-background.png` | Footer/full-width banner bands |



### `thumb-white.png` Usage Note



This image is cropped at the top and left edges — it is designed to bleed off those edges. By default it is anchored to the **top-left** corner. However, you can place it in any corner by combining `background-position` with a CSS `transform` (via a pseudo-element or wrapper) to flip it into the desired orientation:



| Corner | `background-position` | Transform needed |

|---|---|---|

| Top-left (default) | `top left` | none |

| Top-right | `top right` | `scaleX(-1)` |

| Bottom-left | `bottom left` | `scaleY(-1)` |

| Bottom-right | `bottom right` | `scale(-1, -1)` |



**Default (top-left) — inline background:**

```css

background-image: url('https://ironwoodai.com/wp-content/uploads/thumb-white.png');

background-position: top left;

background-repeat: no-repeat;

```



**Other corners — use a pseudo-element so you can apply a transform without affecting content:**

```css

.section {

  position: relative;

  overflow: hidden;

}

.section::before {

  content: '';

  position: absolute;

  top: 0; left: 0;

  width: 100%; height: 100%;

  background-image: url('https://ironwoodai.com/wp-content/uploads/thumb-white.png');

  background-repeat: no-repeat;

  /* Example: bottom-right corner */

  background-position: bottom right;

  transform: scale(-1, -1);

  pointer-events: none;

}

```



Adjust `background-position` and `transform` together per the table above. Never center, offset, or stretch the image — it must always bleed off the chosen corner edges.



---



## Layout Patterns



### Hero / Above-the-Fold

- Full-bleed `#F95301` orange background

- White logo (`inronwood-logo-white.png`)

- White heading and body text

- `thumb-white.png` as background texture overlay (low opacity, corner-anchored — see usage note above for placement options)

- Buttons: white fill with orange text, or orange fill with white text



### Content Sections (White/Light)

- Background: `#FFFFFF` or `#F4F4F4`

- Optional texture: `background-swirls.png` or `diagnal-background.png`

- Headings: `#2A2A2A`, font: Arial Black

- Body: `#333333`, font: Montserrat



### Footer

- Background: `#2A2A2A` (dark charcoal)

- Logo: white version (`inronwood-logo-white.png`)

- Text: white

- Optional texture: `footer-background.png`



### Buttons

```css

/* Primary — on white/light backgrounds */

.btn-primary {

  background: #F95301;

  color: #FFFFFF;

  font-family: 'Montserrat', sans-serif;

  font-weight: 600;

}



/* Reversed — on orange backgrounds */

.btn-reversed {

  background: #FFFFFF;

  color: #F95301;

  font-family: 'Montserrat', sans-serif;

  font-weight: 600;

}

```



---



## Do Not

- No purple gradients or "AI slop" aesthetics

- No gradient color schemes except where the fingerprint icon naturally has warm orange tones

- Do not use the JPEG logos on colored or transparent backgrounds (they have white bg baked in)

- Do not use `Ironwood_fullcolor-logo.jpg` on anything other than white/light backgrounds



name: streben-brand

description: "Complete Streben brand guide covering logos, colors, typography, buttons, icons, and design patterns. Only use this skill when explicitly asked to apply Streben branding."

Streben Brand Guide

Logos

Full Logo — Dark (for light backgrounds)



URL: https://streben.io/wp-content/uploads/2025/01/RztaqzQ4l7Q2d2gBwr7dhAeECTk.avif

AVIF, transparent background

Use on: white/light backgrounds (site header)

Full Logo — White (for dark backgrounds)



URL: https://streben.io/wp-content/uploads/2025/01/Streben-logo-final-03-1_edited.avif

AVIF, 224×55px, transparent background

Use on: dark/black sections (site footer). Never on light backgrounds.

Isotipo / Brand Icon — Color Gradient



URL: https://streben.io/wp-content/uploads/2025/01/Isotipo-Streben-Green-Blue.png

PNG, 3000×3000px, transparent background

Gradient: blue-teal (#6EC1E4 range) left → lime green (#8AC245 range) right

Use for: favicons, app icons, social profiles, standalone icon use. Works on light or dark backgrounds.

Color Palette

Primary Brand Colors

NameHexUsageAccent Green#8AC245Primary CTA fill, stat numbers, highlight textPrimary Blue#6EC1E4Icon fill/stroke, secondary highlightsNear Black#0A0A0ABody text on light sections, dark backgrounds, logo dark variantSupporting Colors

NameHexUsageWhite#FFFFFFPage background, text on darkOff-White#F8FAF5 / #FAF9F5Subtle section backgroundsDark Charcoal#333333Default body textDark Gray#54595FSecondary/muted elementsMuted Text#7A7A7ABody copy, subtextTrue Black#000000Dark section halvesAccent/Gradient Colors (backgrounds only)

Approx. ValueSourceUsage#1DDDBF / #29B6D4No-texture.jpgBlue-teal radial glow in dark sections#7B2D8BNo-texture2.jpgPurple radial in CTA gradient#CB0460 / #C5005ENo-texture2.jpgMagenta radial in CTA sectionBackground Textures

Dark Blue-Teal Gradient (No-texture.jpg)



URL: https://streben.io/wp-content/uploads/2025/03/No-texture.jpg

1920×1080px. Near-black with soft blue-to-teal glow from bottom-left.

Use for: dark feature sections (e.g., "Our Exclusivity Promise"). White text + blue icons over this.

Dark Purple-Magenta Gradient (No-texture2.jpg)



URL: https://streben.io/wp-content/uploads/2025/03/No-texture2.jpg

1920×1080px. Near-black with purple (bottom-left) + magenta (top-right) radials.

Use for: high-energy CTA sections. Pair with white text + white-fill button with dark text.

Grainy Green-Cyan Texture (Texture.jpg)



URL: https://streben.io/wp-content/uploads/2025/03/Texture.jpg

1920×1080px. Dark with noisy/grainy lime-green-to-cyan wave. Film-grain texture.

Use for: feature callouts needing visual energy with the green brand color.

Typography

Primary Font: Urbanist (Google Fonts) — used for everything.

ElementSizeWeightLetter SpacingColorH2 (hero/section heading)60px600 SemiBold1pxWhite (dark) or #0A0A0A (light)H3 (section subheading)36px600 SemiBold1px#0A0A0AH422px500 Medium1pxWhite or darkH525px600 SemiBold1pxWhiteBody / Paragraph16px500 Medium1px#0A0A0A (light) or rgba(255,255,255,0.7) (dark)Navigation links16px500 Mediumnormal#0A0A0AButtons16px900 Black1pxWhiteAll text uses 1px letter-spacing consistently for a premium, airy feel.

Buttons & UI Components

Primary Button — Green CTA



Background: #8AC245

Text: #FFFFFF, Urbanist 16px weight 900

Border radius: 25px (pill)

Padding: 12px 24px

Letter spacing: 1px

Used for: "Get Started" and primary conversion CTAs

Secondary Button — White Fill



Background: #FFFFFF

Text: #0A0A0A, Urbanist 16px weight 900

Border radius: 25px (pill)

Used for: CTAs on dark/colored backgrounds (e.g., "Start Now")

Buttons are always pill-shaped (25px radius). Never squared.

Icons

All custom icons: outline/line-art style, black on transparent. On dark sections, override to #6EC1E4 via CSS.

IconURLLocation / Map Pinhttps://streben.io/wp-content/uploads/2025/02/location.svgStrategy / Lightbulb+Gearhttps://streben.io/wp-content/uploads/2025/02/developing-1.svgRevenue Growth / Hand+Charthttps://streben.io/wp-content/uploads/2025/02/revenue-growth-1.svgLight backgrounds: icons at natural black

Dark backgrounds: icons at #6EC1E4

Outline weight is thick and rounded, matching Urbanist's style

Streben also uses Lottie animated icons (JSON) for consultation, polygon, and computer display categories

Design Patterns & Rules

Light sections: White or off-white background. #0A0A0A headings. #7A7A7A body copy. Green accent on numbers/stats.

Dark sections: Use No-texture backgrounds. White headings. Semi-transparent white body text (rgba(255,255,255,0.7)). #6EC1E4 icons. White or green CTA buttons.

Logo placement: Dark/color logo on white/light header. All-white logo on dark footer. Isotipo alone for favicon/standalone brand use.

Card borders on dark sections: Subtle white border, slight rounded corners, transparent/dark fill — glassmorphism-adjacent style.

Spacing: Consistent 1px letter-spacing across all text elements.



name: frontend-design

description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

license: Complete terms in LICENSE.txt

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.



Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:



Purpose: What problem does this interface solve? Who uses it?

Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.

Constraints: Technical requirements (framework, performance, accessibility).

Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:



Production-grade and functional

Visually striking and memorable

Cohesive with a clear aesthetic point-of-view

Meticulously refined in every detail

Frontend Aesthetics Guidelines

Focus on:



Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.

Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.

Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.

Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.

Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.



I want you to make a landing page for Ironwood AI x Streben. Read your Ironwood branding skill and your Streben branding skill to make a webpage that shows our collaboration.

I'll show you a screenshot of a page I made that shows some of the tools that we've built for Streben. This can give you some idea of what the content of the page could be, but your stylistic design needs to have both of our styles, cool scroll effects, and look like a really cool collaboration.



You might want to research our respective angles for our actual marketing more so that you can make a coherent offering. These are internal tools that Ironwood built for Streben that show:

(a) How Ironwood can make your business more efficient

(b) How Streben is an efficient marketing agency

I just feel like you could put this together in an epic and interesting way.

Test 05 1 run

AI Slay-the-Spire-Style Game

Below is a prompt that I used to test models, but it's gotten out of date. Almost every, if not every single model listed there is no longer viable at all and is completely outdated. Your job is to: 1. Update the prompt. This requires web research to find the latest models from each lab, checking Artificial Analysis to see the current rankings of different models, and finding their cost data, along with people's vibe on the internet regarding these models (however you want to get that, whether via Reddit searching or other sources) so that you can have an accurate idea of the vibe of each model. 2. Execute the updated prompt by making the game described, but using these modern models. ---------- Make a pixel art game that's basically a Slay the Spire clone (That's just the inspiration, not trying to commercially clone or copy their copyrighted game.), but I want you to make it AI themed based on the below data, and you can hardcode your own pixel art into it. This should take a while because you need to actually yourself make pixel art animation files for all the parts of it, for the assets. I want you to implement the whole game. When you're done, open it up in my browser using a terminal command. If you do use sound effects or music: 1. Make sure the user can adjust the volume of the whole game 2. Get good ones by looking up assets online and using free assets This is basically a test to see how well you can implement all of this, which means creating a lot of assets. It's also a test of how much content you can create, and I want you to make as much as possible. We want different cards and enemies. AI Data (None of this is wrong, all of it is accurate. Make sure not to try to insert your own thoughts. Fully depend on this data.): Now I have gathered all the necessary data. Let me compile the updated information for you. Based on my research from Artificial Analysis, and other sources, here is your updated data. <CostToRunData> - Claude Opus 4.6 (Adaptive): Intelligence 52.8, Cost to run $8,680.86. - GPT-5.2 (xhigh): Intelligence 51.3, Cost to run $2,304.22. - GLM-5: Intelligence 50.0, Cost to run $609.65. - Claude Sonnet 4.6 (Adaptive Reasoning, Max Effort): Intelligence 51.3, Cost to run $2,088.69. - GPT-5.2 Codex (xhigh): Intelligence 49.1, Cost to run $2,304.22. - Gemini 3.1 Pro Preview: Intelligence 57, Cost to run $892.28. - MiniMax-M2.5: Intelligence 47.3, Cost to run $1,498.10. - Gemini 3 Flash (non-reasoning): Intelligence 46.3, Cost to run $824.56. - DeepSeek V3.2 (Thinking): Intelligence 41.6, Cost to run TBD. - GLM-4.7: Intelligence 41.9, Cost to run $374.30. - Grok 4.1 Fast: Intelligence 38.6, Cost to run $227.88. - gpt-oss-120B (high): Intelligence 33.0, Cost to run $20.12. - Gemini 2.5 Flash: Intelligence 29.1, Cost to run $466.11. (Good for multimodal, not particularly effective otherwise; powers Nano Banana, not Nano Banana Pro.) - Gemini 2.5 Flash-Lite: Intelligence 19.5, Cost to run $74.95. (Best Flash-Lite option available right now; there is no Gemini 3 Flash-Lite.) - GPT-5 mini (high): Intelligence 40.6, Cost to run $335.55. - GPT-5 nano (high): Intelligence 25.5, Cost to run $67.09. </CostToRunData> <AAIIsummary> Artificial Analysis "Intelligence Index v4.0" incorporates 10 evaluations: GDPval-AA, 𝜏²-Bench Telecom, Terminal-Bench Hard, SciCode, AA-LCR, AA-Omniscience, IFBench, Humanity's Last Exam, GPQA Diamond, and CritPt. Their model pages also report the total cost they spent to run the full evaluation suite for that model (reported as "In total, it cost $X to evaluate [MODEL] on the Intelligence Index"), which is what "Cost to run" refers to above. </AAIIsummary> <modelanalysis> company=Anthropic; model=Claude Opus 4.6; model_type=reasoning; archetype=Archon; open_source=false; modalities=text,vision; strengths=Top Intelligence Index on AA (52.8); very capable at broad reasoning + writing; pleasant to use; can do some things other models can't. (You describe it as "cut three times and get the thing done as quickly as possible," sometimes ignoring the rest of the codebase, but fast for getting stuff done.); weaknesses=Very expensive; can be sloppy with large codebases unless constrained; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD company=OpenAI; model=GPT-5.2 (xhigh); model_type=reasoning; archetype=Sovereign; open_source=false; modalities=text,vision; strengths=Near-top Intelligence Index on AA (51.3); excellent coding + math + reasoning; very reliable structured outputs.; weaknesses=Expensive; can feel robotic; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD company=OpenAI; model=GPT 5.3 Codex; model_type=reasoning; archetype=Goldsmith; open_source=false; modalities=text,vision; strengths=Not on Artificial Analysis yet; per your report it is much better at coding than any previous GPT model and is extremely reliable ("measure twice, cut once").; weaknesses=Not on AA yet so benchmarks/specs are unverified here; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD company=Z.ai; model=GLM-5; model_type=reasoning; archetype=Titan; open_source=true; modalities=text; strengths=AA Intelligence Index 50.0; strong open-weights option; per your view, you'd pick GLM-5 over Qwen 3.5 right now.; weaknesses=Text-only; not on Cerebras yet (so GLM-4.7 remains relevant there); pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD company=Anthropic; model=Claude Sonnet 4.6 (Adaptive Reasoning, Max Effort); model_type=reasoning; archetype=Artisan; open_source=false; modalities=text,vision; strengths=AA Intelligence Index 51.3; strong coding + agentic workflows; good balance vs Opus.; weaknesses=Below Opus on peak; still expensive; pricing_in=$3; pricing_out=$15; pricing_currency=USD; context_tokens=TBD company=OpenAI; model=GPT-5.2 Codex (xhigh); model_type=reasoning; archetype=Artificer; open_source=false; modalities=text,vision; strengths=AA Intelligence Index 49.1; code-specialized GPT-5.2 variant; reliable engineering/refactors.; weaknesses=Less well-rounded than GPT-5.2 base; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD company=Google; model=Gemini 3.1 Pro Preview; model_type=reasoning; archetype=Sorcerer; open_source=false; modalities=text,vision,audio,video; strengths=AA Intelligence Index 57; highest Intelligence Index on AA; strong multimodal; long context.; weaknesses=Preview variance; tool use can be inconsistent; pricing_in=$2; pricing_out=$12; pricing_currency=USD; context_tokens=TBD company=MiniMax; model=MiniMax-M2.5; model_type=reasoning; archetype=Strategist; open_source=true; modalities=text; strengths=AA Intelligence Index 47.3; solid open-weights reasoning option.; weaknesses=Text-only; not frontier; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD company=Google; model=Gemini 3 Flash; model_type=non-reasoning; archetype=Alchemist; open_source=false; modalities=text,vision,audio,video; strengths=AA Intelligence Index 46.3; fast and cost-effective; strong multimodal throughput.; weaknesses=Non-reasoning; lower ceiling than top reasoning models; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD company=DeepSeek; model=DeepSeek V3.2 (Thinking); model_type=reasoning; archetype=Prodigy; open_source=true; modalities=text; strengths=AA Intelligence Index 41.6; excellent price/perf reasoning; good for high-volume reasoning tasks.; weaknesses=Text-only; sometimes quirky; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD company=Z.ai; model=GLM-4.7; model_type=reasoning; archetype=Savant; open_source=true; modalities=text; strengths=AA Intelligence Index 41.9; still relevant specifically because GLM-5 is not on Cerebras yet.; weaknesses=Older than GLM-5; text-only; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD company=xAI; model=Grok 4.1 Fast; model_type=reasoning; archetype=Knight; open_source=false; modalities=text,vision; strengths=AA Intelligence Index 38.6; fast/cheap for agent loops; very large context.; weaknesses=Prompting style differs; weaker for front-end/UI coding; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD company=OpenAI; model=gpt-oss-120B (high); model_type=non-reasoning; archetype=Copyist; open_source=true; modalities=text; strengths=AA Intelligence Index 33.0; cheap open weights; solid structured output.; weaknesses=Not strong at hard reasoning; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD company=Alibaba; model=Qwen 3.5; model_type=reasoning; archetype=Janus; open_source=true; modalities=text,vision; strengths=Not on Artificial Analysis yet; per your first impressions it's significantly better than prior Qwen versions.; weaknesses=Still "a Qwen model" and not quite frontier yet; you wouldn't use it over GLM-5 right now.; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD company=Google; model=Gemini 2.5 Flash; model_type=non-reasoning; archetype=Archivist; open_source=false; modalities=text,vision,audio; strengths=AA Intelligence Index 29.1; good for multimodal tasks; powers Nano Banana (not Nano Banana Pro).; weaknesses=Otherwise not particularly effective; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD company=Google; model=Gemini 2.5 Flash-Lite; model_type=non-reasoning; archetype=Page; open_source=false; modalities=text,vision,audio; strengths=AA Intelligence Index 19.5; ultra-cheap; best Flash-Lite option available right now.; weaknesses=Low ceiling; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD company=OpenAI; model=GPT-5 mini (high); model_type=non-reasoning; archetype=Navigator; open_source=false; modalities=text,vision; strengths=AA Intelligence Index 40.6; good structured output for cost.; weaknesses=Not frontier; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD company=OpenAI; model=GPT-5 nano (high); model_type=non-reasoning; archetype=Chronicler; open_source=false; modalities=text,vision; strengths=AA Intelligence Index 25.5; very cheap for the capability class.; weaknesses=Lower ceiling; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD </modelanalysis>

Open test

Below is a prompt that I used to test models, but it's gotten out of date. Almost every, if not every single model listed there is no longer viable at all and is completely outdated.

Your job is to:

1. Update the prompt. This requires web research to find the latest models from each lab, checking Artificial Analysis to see the current rankings of different models, and finding their cost data, along with people's vibe on the internet regarding these models (however you want to get that, whether via Reddit searching or other sources) so that you can have an accurate idea of the vibe of each model.

2. Execute the updated prompt by making the game described, but using these modern models.

----------

Make a pixel art game that's basically a Slay the Spire clone (That's just the inspiration, not trying to commercially clone or copy their copyrighted game.), but I want you to make it AI themed based on the below data, and you can hardcode your own pixel art into it. This should take a while because you need to actually yourself make pixel art animation files for all the parts of it, for the assets.

I want you to implement the whole game. When you're done, open it up in my browser using a terminal command.

If you do use sound effects or music:
1. Make sure the user can adjust the volume of the whole game
2. Get good ones by looking up assets online and using free assets

This is basically a test to see how well you can implement all of this, which means creating a lot of assets. It's also a test of how much content you can create, and I want you to make as much as possible. We want different cards and enemies.

AI Data (None of this is wrong, all of it is accurate. Make sure not to try to insert your own thoughts. Fully depend on this data.):
Now I have gathered all the necessary data. Let me compile the updated information for you.
Based on my research from Artificial Analysis, and other sources, here is your updated data.

<CostToRunData>
- Claude Opus 4.6 (Adaptive): Intelligence 52.8, Cost to run $8,680.86.
- GPT-5.2 (xhigh): Intelligence 51.3, Cost to run $2,304.22.
- GLM-5: Intelligence 50.0, Cost to run $609.65.
- Claude Sonnet 4.6 (Adaptive Reasoning, Max Effort): Intelligence 51.3, Cost to run $2,088.69.
- GPT-5.2 Codex (xhigh): Intelligence 49.1, Cost to run $2,304.22.
- Gemini 3.1 Pro Preview: Intelligence 57, Cost to run $892.28.
- MiniMax-M2.5: Intelligence 47.3, Cost to run $1,498.10.
- Gemini 3 Flash (non-reasoning): Intelligence 46.3, Cost to run $824.56.
- DeepSeek V3.2 (Thinking): Intelligence 41.6, Cost to run TBD.
- GLM-4.7: Intelligence 41.9, Cost to run $374.30.
- Grok 4.1 Fast: Intelligence 38.6, Cost to run $227.88.
- gpt-oss-120B (high): Intelligence 33.0, Cost to run $20.12.
- Gemini 2.5 Flash: Intelligence 29.1, Cost to run $466.11. (Good for multimodal, not particularly effective otherwise; powers Nano Banana, not Nano Banana Pro.)
- Gemini 2.5 Flash-Lite: Intelligence 19.5, Cost to run $74.95. (Best Flash-Lite option available right now; there is no Gemini 3 Flash-Lite.)
- GPT-5 mini (high): Intelligence 40.6, Cost to run $335.55.
- GPT-5 nano (high): Intelligence 25.5, Cost to run $67.09.
</CostToRunData>

<AAIIsummary>
Artificial Analysis "Intelligence Index v4.0" incorporates 10 evaluations: GDPval-AA, 𝜏²-Bench Telecom, Terminal-Bench Hard, SciCode, AA-LCR, AA-Omniscience, IFBench, Humanity's Last Exam, GPQA Diamond, and CritPt. Their model pages also report the total cost they spent to run the full evaluation suite for that model (reported as "In total, it cost $X to evaluate [MODEL] on the Intelligence Index"), which is what "Cost to run" refers to above.
</AAIIsummary>

<modelanalysis>
company=Anthropic; model=Claude Opus 4.6; model_type=reasoning; archetype=Archon; open_source=false; modalities=text,vision; strengths=Top Intelligence Index on AA (52.8); very capable at broad reasoning + writing; pleasant to use; can do some things other models can't. (You describe it as "cut three times and get the thing done as quickly as possible," sometimes ignoring the rest of the codebase, but fast for getting stuff done.); weaknesses=Very expensive; can be sloppy with large codebases unless constrained; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
company=OpenAI; model=GPT-5.2 (xhigh); model_type=reasoning; archetype=Sovereign; open_source=false; modalities=text,vision; strengths=Near-top Intelligence Index on AA (51.3); excellent coding + math + reasoning; very reliable structured outputs.; weaknesses=Expensive; can feel robotic; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
company=OpenAI; model=GPT 5.3 Codex; model_type=reasoning; archetype=Goldsmith; open_source=false; modalities=text,vision; strengths=Not on Artificial Analysis yet; per your report it is much better at coding than any previous GPT model and is extremely reliable ("measure twice, cut once").; weaknesses=Not on AA yet so benchmarks/specs are unverified here; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
company=Z.ai; model=GLM-5; model_type=reasoning; archetype=Titan; open_source=true; modalities=text; strengths=AA Intelligence Index 50.0; strong open-weights option; per your view, you'd pick GLM-5 over Qwen 3.5 right now.; weaknesses=Text-only; not on Cerebras yet (so GLM-4.7 remains relevant there); pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
company=Anthropic; model=Claude Sonnet 4.6 (Adaptive Reasoning, Max Effort); model_type=reasoning; archetype=Artisan; open_source=false; modalities=text,vision; strengths=AA Intelligence Index 51.3; strong coding + agentic workflows; good balance vs Opus.; weaknesses=Below Opus on peak; still expensive; pricing_in=$3; pricing_out=$15; pricing_currency=USD; context_tokens=TBD
company=OpenAI; model=GPT-5.2 Codex (xhigh); model_type=reasoning; archetype=Artificer; open_source=false; modalities=text,vision; strengths=AA Intelligence Index 49.1; code-specialized GPT-5.2 variant; reliable engineering/refactors.; weaknesses=Less well-rounded than GPT-5.2 base; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
company=Google; model=Gemini 3.1 Pro Preview; model_type=reasoning; archetype=Sorcerer; open_source=false; modalities=text,vision,audio,video; strengths=AA Intelligence Index 57; highest Intelligence Index on AA; strong multimodal; long context.; weaknesses=Preview variance; tool use can be inconsistent; pricing_in=$2; pricing_out=$12; pricing_currency=USD; context_tokens=TBD
company=MiniMax; model=MiniMax-M2.5; model_type=reasoning; archetype=Strategist; open_source=true; modalities=text; strengths=AA Intelligence Index 47.3; solid open-weights reasoning option.; weaknesses=Text-only; not frontier; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
company=Google; model=Gemini 3 Flash; model_type=non-reasoning; archetype=Alchemist; open_source=false; modalities=text,vision,audio,video; strengths=AA Intelligence Index 46.3; fast and cost-effective; strong multimodal throughput.; weaknesses=Non-reasoning; lower ceiling than top reasoning models; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
company=DeepSeek; model=DeepSeek V3.2 (Thinking); model_type=reasoning; archetype=Prodigy; open_source=true; modalities=text; strengths=AA Intelligence Index 41.6; excellent price/perf reasoning; good for high-volume reasoning tasks.; weaknesses=Text-only; sometimes quirky; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
company=Z.ai; model=GLM-4.7; model_type=reasoning; archetype=Savant; open_source=true; modalities=text; strengths=AA Intelligence Index 41.9; still relevant specifically because GLM-5 is not on Cerebras yet.; weaknesses=Older than GLM-5; text-only; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
company=xAI; model=Grok 4.1 Fast; model_type=reasoning; archetype=Knight; open_source=false; modalities=text,vision; strengths=AA Intelligence Index 38.6; fast/cheap for agent loops; very large context.; weaknesses=Prompting style differs; weaker for front-end/UI coding; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
company=OpenAI; model=gpt-oss-120B (high); model_type=non-reasoning; archetype=Copyist; open_source=true; modalities=text; strengths=AA Intelligence Index 33.0; cheap open weights; solid structured output.; weaknesses=Not strong at hard reasoning; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
company=Alibaba; model=Qwen 3.5; model_type=reasoning; archetype=Janus; open_source=true; modalities=text,vision; strengths=Not on Artificial Analysis yet; per your first impressions it's significantly better than prior Qwen versions.; weaknesses=Still "a Qwen model" and not quite frontier yet; you wouldn't use it over GLM-5 right now.; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
company=Google; model=Gemini 2.5 Flash; model_type=non-reasoning; archetype=Archivist; open_source=false; modalities=text,vision,audio; strengths=AA Intelligence Index 29.1; good for multimodal tasks; powers Nano Banana (not Nano Banana Pro).; weaknesses=Otherwise not particularly effective; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
company=Google; model=Gemini 2.5 Flash-Lite; model_type=non-reasoning; archetype=Page; open_source=false; modalities=text,vision,audio; strengths=AA Intelligence Index 19.5; ultra-cheap; best Flash-Lite option available right now.; weaknesses=Low ceiling; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
company=OpenAI; model=GPT-5 mini (high); model_type=non-reasoning; archetype=Navigator; open_source=false; modalities=text,vision; strengths=AA Intelligence Index 40.6; good structured output for cost.; weaknesses=Not frontier; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
company=OpenAI; model=GPT-5 nano (high); model_type=non-reasoning; archetype=Chronicler; open_source=false; modalities=text,vision; strengths=AA Intelligence Index 25.5; very cheap for the capability class.; weaknesses=Lower ceiling; pricing_in=TBD; pricing_out=TBD; pricing_currency=USD; context_tokens=TBD
</modelanalysis>

Test 06 1 run

Escape the Rotating Hexagon

Make a single standalone HTML file browser game. The premise is based off of that old test for LLMs where there's a ball bouncing in a rotating hexagon, except there's more story that plays out on screen as you go, and it uses Web Speech to narrate. You basically play as the ball that's bouncing in the spinning hexagon, and you have to figure out a way to escape. There should be a bunch of levels, at least 10 (though you can do more if you've got any good ideas), where the game becomes more and more self-aware as you play it, and the levels become more and more interesting. Up to you how you do this.

Open test

Make a single standalone HTML file browser game.

The premise is based off of that old test for LLMs where there's a ball bouncing in a rotating hexagon, except there's more story that plays out on screen as you go, and it uses Web Speech to narrate.

You basically play as the ball that's bouncing in the spinning hexagon, and you have to figure out a way to escape.

There should be a bunch of levels, at least 10 (though you can do more if you've got any good ideas), where the game becomes more and more self-aware as you play it, and the levels become more and more interesting.

Up to you how you do this.

Test 07 1 run

Object-Integrated Banana Drawing

Imagine you are Christoph Niemann artist. I give you this banana image (attachment); the image URL is here: https://www.bubbbly.com/assets/banana.webp. You will draw something super creative using this image. This is an object-integrated drawing. Draw everything in a hand-drawn style, then animate the whole drawing process, showing the pencil cursor during the animation. You can use the 2D Canvas API if needed. You can add color to the drawing, but make sure the color also has a hand-drawn style. Do not add any objects, elements, texts, or emojis that are not hand-drawn. Display it on a white background. Render it using the web app builder plugin. IMPORTANT: You are free to be as creative as possible.

Open test

Imagine you are Christoph Niemann artist.

I give you this banana image (attachment); the image URL is here: https://www.bubbbly.com/assets/banana.webp.

You will draw something super creative using this image.

This is an object-integrated drawing.

Draw everything in a hand-drawn style, then animate the whole drawing process, showing the pencil cursor during the animation.

You can use the 2D Canvas API if needed.

You can add color to the drawing, but make sure the color also has a hand-drawn style. Do not add any objects, elements, texts, or emojis that are not hand-drawn. Display it on a white background.

Render it using the web app builder plugin.

IMPORTANT: You are free to be as creative as possible.

No matching tests.