create-utilities

What problem does it solve?

create-utilities removes the guesswork of converting a design description into the exact utility-class string your codebase can use, so you can style components faster and more consistently.

Core Features & Use Cases

• Framework detection to choose the correct utility vocabulary for acss-kit, Tailwind, Bootstrap, or a Tailwind-compatible fallback.
• Intent-to-classes mapping that translates layout, spacing, color, typography, borders/radius, shadow, and states into an ordered class list.
• Accessibility-aware output that adds focus styling where supported or warns when the detected framework’s utilities lack focus-ring support.
• Use case: generate a class string for a “centered hero card with padding, rounded corners, subtle shadow, and a primary accent,” then apply it directly in the returned HTML.

Quick Start

Ask the AI to create utility classes for the UI described as: "a centered flex row with 1rem padding, subtle shadow, rounded corners, and primary background."