VisionCSS

Logo for VisionCSS
Example usage of vision "function"
Command to run VisionCSS
Generated stylesheet
New HTML class names

Inspiration

CSS can be really difficult, especially for beginners. You think you're doing one thing, but you end up doing something completely different. It can be difficult to debug and, oftentimes, you end up writing CSS that never gets used, leading to unnecessary overhead. I aimed to simplify the process of writing CSS by making it more natural and accessible to beginners.

What it does

VisionCSS allows users to write class names for HTML elements that have "functions." By formatting their class names in the following way: 'vision(className, desiredStyle)' the user can generate styles for a desired element using only natural language as input.

How I built it

I created VisionCSS in the form of an npm package that is publicly available right now as you are reading these words. The link to the GitHub page will describe how to get started with VisionCSS. The link to the npm page associated with VisionCSS will show you the version of VisionCSS available and what dependencies VisionCSS has. VisionCSS uses the OpenAI API to generate CSS styles based on natural language input. The user need not specify the type of element or where in the document the styles should be applied. All the user needs to do is use the vision function so VisionCSS can generate styles accordingly.

Challenges I ran into

When running JavaScript in a Node.js environment, it's not possible to access HTML documents via the DOM as you would in a browser environment. This is one of the key hurdles I had to overcome in order to access HTML elements whose class names were using the vision function.

Additionally, engineering the OpenAI prompt was somewhat tedious for me to get a response that had a compatible format.

What's next for VisionCSS

Utility Class Conversion

I want to extend the capability of VisionCSS so that it can convert vision functions into utility classes like Tailwind CSS.

Comment Generation

To enhance the user's understanding of the styles that are being generated for them, I seek to include comments within the CSS style selectors that describe what effect each style has.