LLM Guide

Thrynd is the first CSS framework designed specifically for AI assistants. This guide explains how to get the best results when generating Thrynd code with ChatGPT, Claude, or other LLMs.

🤖 Target Accuracy: 95%+ correct code generation on the first try. Thrynd's structured documentation helps AI assistants understand exactly how to use each component.

How It Works

Thrynd includes a machine-readable component catalog that AI assistants can reference to generate accurate code. This catalog includes:

Usage Patterns

Clear descriptions of when and how to use each component variant.

Code Examples

Complete, copy-paste ready examples for every component.

Anti-Patterns

Common mistakes with severity levels to prevent incorrect usage.

Accessibility

Built-in WCAG requirements for every component.

Using Thrynd with AI Assistants

Effective Prompts

When asking an AI assistant to generate Thrynd code, be specific about your requirements:

✓ Good Prompt

Create a login form using Thrynd CSS with email and password fields, a "Remember me" checkbox, and a primary submit button. Use the Modern theme.

✗ Less Effective Prompt

Make a form

Too vague - doesn't specify which CSS framework, what fields, or styling preferences.

Component Catalog

The Thrynd component catalog is available at /components.json and includes structured data for all components:

{
  "button": {
    "name": "Button",
    "category": "form",
    "variants": {
      "primary": {
        "class": "btn-primary",
        "usage": "Main call-to-action, most important action on page",
        "example": "<button class=\"btn-primary\">Submit</button>"
      }
    },
    "antiPatterns": [
      {
        "wrong": "btn btn-primary",
        "right": "btn-primary",
        "reason": "Variant classes include base styles",
        "severity": "error"
      }
    ]
  }
}

Common Use Cases

Building a Dashboard

Prompt:

"Create a dashboard layout using Thrynd CSS with a sidebar navigation, header with user avatar, and a grid of stat cards showing metrics with positive/negative indicators."

Components used: Sidebar, Avatar, Stats, Card, Badge

User Profile Page

Prompt:

"Build a user profile page with Thrynd CSS including a large avatar with online status, editable form fields, and save/cancel buttons."

Components used: Avatar, Form Input, Buttons, Card

Data Table

Prompt:

"Create a responsive data table using Thrynd CSS with sortable headers, status badges, and action buttons for each row."

Components used: Table, Badge, Buttons

Best Practices

✓ Do: Mention "Thrynd CSS" explicitly in your prompt

✓ Do: Specify the theme you want to use (Modern, Classic, Minimal, etc.)

✓ Do: Describe the purpose and context of each component

✓ Do: Request accessibility features when needed

Avoid: Mixing Thrynd with other CSS frameworks in the same prompt

Avoid: Using generic terms like "make it look good" - be specific

Training Your AI Assistant

You can improve results by providing the component catalog to your AI assistant:

Example Context

I'm using Thrynd CSS framework. When I ask you to create components, use the Thrynd component classes. Buttons use: btn-primary, btn-secondary, btn-danger, btn-ghost. Cards use: card, card-elevated, card-outlined with card-body, card-header, card-footer. Always include accessibility attributes where appropriate.

Validation

AI-generated code should follow these patterns:

✓ Correct Pattern

<button class="btn-primary">
  Submit
</button>

<div class="card">
  <div class="card-body">
    Content
  </div>
</div>

✗ Incorrect Pattern

<button class="btn btn-primary">
  Submit
</button>

<div class="thrynd-card">
  <div class="body">
    Content
  </div>
</div>

📚 Next Steps: Try the Interactive Playground to experiment with AI-generated code or browse the Component Documentation for detailed examples.

← Utilities Try Playground →