README.md

metadata

title: ImagineUI
colorFrom: blue
colorTo: purple
sdk: docker
pinned: false
license: apache-2.0

ImagineUI

An AI-powered CSS style generator that creates and iterates on designs using natural language instructions.

Problem & Solution

Problem

Designers and developers need a tool that can:

• Translate verbal descriptions into CSS styling
• Rapidly prototype and iterate on web layouts
• Learn from real-world design patterns

Target Audience

• Frontend developers needing quick style prototypes
• UI/UX designers exploring creative variations
• Writers and content creators
• Small business owners creating marketing materials
• Cross-disciplinary teams discussing design concepts

Solution

An agentic RAG application that:

• Consumes HTML templates
• Creates style variations based on natural language input
• Iterates designs through user feedback
• Learns from CSS Zen Garden designs

Setup

This project uses Poetry for dependency management.

Prerequisites

1. Python 3.11 (via brew or your system's package manager)
2. Poetry: curl -sSL https://install.python-poetry.org | python3 -

Installation

1. Clone and enter the repository:

git clone https://github.com/yourusername/ImagineUI.git
cd ImagineUI

2. Install dependencies:

poetry install
poetry run playwright install chromium

Tools

CSS Zen Garden Scraper

Collects designs from CSS Zen Garden into a structured dataset. Each design in designs/<design_id>/ contains:

• style.css: The design's CSS file
• metadata.json: Design information (author, URLs)
• screenshot_desktop.png: Screenshot at 1920px width
• screenshot_mobile.png: Screenshot at 480px width

Usage:

poetry run python scraper.py          # Run scraper
poetry run python analyze_designs.py   # Analyze designs
poetry run jupyter notebook           # Test in notebook

Development

• poetry add <package>: Add dependencies
• poetry update: Update dependencies
• poetry shell: Activate virtual environment

Project Structure

ImagineUI/
├── designs/            # Scraped CSS Zen Garden designs
│   └── <design_id>/   # Each design's files
├── scraper.py         # CSS Zen Garden scraper
├── test_scraper.ipynb # Scraper testing notebook
├── pyproject.toml     # Project dependencies
└── README.md

Technical Stack

• LLM: For understanding design instructions
• Embedding Model: For design similarity search
• Vector Database: For storing design patterns
• Orchestration: For managing the design workflow
• Monitoring & Evaluation: For quality assurance
• User Interface: For interaction and feedback

AI Designer

Problem and Audience

Problem:

I want a tool that can show me examples of a design I'm imagining.

Audience:

This app is for designers and non-designers who want to be inspired and see examples of good style design.

Solution

An agentic RAG application that scrapes designs from CSS Zen Garden and serves the best matches to the user.

Data Collection & Dataset Creation

To populate the data, run the notebook in the data_collection folder with a range of design ids. Not all are included in the repository. New data will need to be moved to the src data folder to be accessible to the application.

Build

uv sync

chainlit run src/app.py

And you're off!

Public addresses

https://huggingface.co/spaces/Technologic101/imagineui

https://github.com/Technologic101/ImagineUI/tree/main