Reskin AI

Re-Vibe code the front end of any website! 🎨✨

A Chrome extension that can reshape any website you visit by using AI to generate CSS overrides. The extension feeds HTML skeleton data to an LLM and asks it to generate CSS modifications to transform the page's appearance.

Hate the way those banking apps look? 🏦
Don't think a UI sparks joy? 😤
Redesign it yourself! With Vibes ✨

Transform any website's appearance with AI-powered styling that matches your aesthetic preferences. From drab to fab in seconds!

Demo-Reskin.mov

Features

• 🎨 AI-Powered Styling: Uses LLM to generate CSS overrides for any website
• 🚀 Real-time Transformation: Instantly applies styling changes to web pages
• 🔧 Simple Setup: Easy-to-use Chrome extension with React interface
• 🎯 Universal Compatibility: Works on any website with HTML content

Architecture

• Frontend: Chrome extension built with React + Tailwind CSS
• Backend: Simple Express.js server with TypeScript
• AI Integration: LLM-powered CSS generation from HTML skeleton data

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Google Chrome browser

Quick Setup

1. Clone and Install Dependencies

git clone <repository-url>
cd facelift-ai
npm install
cd backend && npm install

2. Copy Shared Files

npm run copy-shared

3. Build the Extension

npm run build

4. Start the Backend

cd backend
npm run dev

The backend will start on http://localhost:3001

5. Load the Extension in Chrome

To load an unpacked extension in developer mode:

1. Go to the Extensions page by entering chrome://extensions in a new tab

   • (By design chrome:// URLs are not linkable)
   • Alternatively, click the Extensions menu puzzle button and select "Manage Extensions" at the bottom of the menu
   • Or, click the Chrome menu, hover over "More Tools", then select "Extensions"

2. Enable Developer Mode by clicking the toggle switch next to "Developer mode"

3. Click the "Load unpacked" button and select the extension folder from this project.

4. The Facelift AI extension should now appear in your extensions list

6. Use the Extension

1. Navigate to any website
2. Click the Facelift AI extension icon in your browser toolbar
3. The extension will analyze the page and generate AI-powered styling suggestions
4. Apply the generated styles to transform the page appearance

Development

Project Structure

facelift-ai/
├── backend/                 # Express.js server
│   ├── src/
│   │   ├── server.ts       # Main server file
│   │   ├── model.ts        # AI integration
│   │   └── shared/         # Shared types
│   └── package.json
├── extension/              # Chrome extension files
│   ├── manifest.json      # Extension manifest
│   ├── content.js         # Content script
│   ├── background.js      # Background script
│   └── dist/              # Built extension files
├── src/                   # Frontend React app
│   ├── components/        # React components
│   ├── services/          # API services
│   └── shared/           # Shared types
├── shared/               # Shared TypeScript types
└── scripts/              # Build and setup scripts

Available Scripts

Root Level

• npm run build - Build the extension
• npm run dev - Start development server
• npm run copy-shared - Copy shared types to frontend/backend

Backend

• npm run dev - Start development server with hot reload
• npm run build - Build for production
• npm start - Start production server

Development Workflow

1. Copy Shared Files: npm run copy-shared (if you modified shared types)
2. Build Extension: npm run build (from root)
3. Start Backend: cd backend && npm run dev
4. Reload Extension: Go to chrome://extensions/ and click reload
5. Test Changes: Navigate to any website and reload the page, then test the extension

Environment Variables

Create a .env file in the backend directory:

# Add your AI service API keys here
OPENAI_API_KEY=your_openai_api_key_here

How It Works

1. Content Analysis: The extension's content script captures the HTML structure of the current page
2. AI Processing: HTML skeleton data is sent to the backend, which uses an LLM to generate CSS overrides
3. Style Application: Generated CSS is applied to the page using dynamic style injection
4. Real-time Updates: Users can regenerate styles or modify existing ones through the extension popup

Quick Fixes

Extension Not Loading

• Ensure you're loading the extension folder (not the root project folder)
• Check that the build completed successfully
• Verify the manifest.json file is valid

Backend Connection Issues

• Confirm the backend is running on port 3001
• Check that no other services are using the same port
• Verify your firewall settings allow localhost connections

Build Errors

• Run npm run copy-shared to ensure shared types are up to date
• Clear the extension/dist folder and rebuild
• Check that all dependencies are installed

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

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

Support

For issues and questions, please create an issue in the repository.