UIDEC - UI Design Exploration under Constraints

UIDEC is a GenAI-powered creativity support tool that helps UI/UX designers explore design ideas while working within real-world constraints like brand identity, industry standards, and design systems. It generates diverse design examples based on project parameters with no need for prompt writing.

Features

• Constraint-Based Generation: Specify project details (purpose, target audience, industry, design styles) and generate designs that adhere to these constraints
• Canvas-Based Exploration: Organize and arrange generated design ideas on an infinite canvas
• Element Refinement: Refine or regenerate specific UI elements within designs
• Version History: Navigate through different generated versions
• Favorites & Collections: Save and organize design examples for later reference
• Theme Support: Apply consistent design themes across generations
• Lock/Unlock Controls: Lock colors and fonts to maintain consistency during generation

Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm
• Docker (for PocketBase)
• OpenAI API key (Tier 1+ for GPT-4 Vision access) or Anthropic API key

Installation

1. Clone the repository:

   git clone https://github.com/HCDLab/UIDEC.git
   cd UIDEC

2. Install dependencies:

   pnpm install

3. Start PocketBase:

   docker compose up -d

4. Set up PocketBase admin:

   • Open http://localhost:8090/_/
   • Create an admin account
   • Collections and seed data are created automatically via migrations

5. Configure environment variables:

   cp .env.example .env

   Edit .env and add your API keys:

   OPENAI_API_KEY=your_openai_key
   # or
   ANTHROPIC_API_KEY=your_anthropic_key
   NEXT_PUBLIC_POCKETBASE_URL=http://localhost:8090
   

6. Run the development server:

   pnpm dev

7. Open http://localhost:3000

PocketBase Setup

PocketBase migrations run automatically when the container starts. The migrations will:

• Create all required collections
• Seed the industries and screen_types dropdown data

After starting PocketBase:

1. Open http://localhost:8090/_/ and create an admin account

2. (Optional) Populate the ui_screens collection with UI screenshot dataset for design references. This dataset should contain a set of diverse, curated UI screenshots used as seeds to provide design examples during generation. Each generation will use a randomly picked UI screenshot from the dataset to ensure diversity of the generated UIs.

Required Collections

Collection	Purpose
users	User authentication (built-in)
industries	Industry dropdown options
screen_types	UI screen type options
ui_screens	UI screenshot dataset for references
favorites	User's saved favorite designs
saved_canvas	Saved canvas states
logos	User uploaded logos

Tech Stack

• Framework: Next.js 14 (App Router)
• Canvas: tldraw
• Database: PocketBase
• Styling: Tailwind CSS, Radix UI
• Data Fetching: React Query
• AI: OpenAI GPT-4 Vision / Anthropic Claude

Citation

If you use UIDEC in your research, please cite our CHI 2025 paper:

@inproceedings{10.1145/3706598.3713785,
author = {Shokrizadeh, َAtefeh and Bahati Tadjuidje, Boniface and Kumar, Shivam and Kamble, Sohan and Cheng, Jinghui},
title = {Dancing With Chains: Ideating Under Constraints With UIDEC in UI/UX Design},
year = {2025},
isbn = {9798400713941},
publisher = {Association for Computing Machinery},
address = {New York, NY, USA},
url = {https://doi.org/10.1145/3706598.3713785},
doi = {10.1145/3706598.3713785},
articleno = {1106},
numpages = {23},
keywords = {User Interface Design, Constraint, Inspiration, Ideation, Creativity Support},
location = {
},
series = {CHI '25}
}

Paper: Dancing With Chains: Ideating Under Constraints With UIDEC in UI/UX Design

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Built on tldraw by Steve Ruiz and contributors