Customize Any Website

Prism

Prism lets you restyle and personalize the websites you already use. Open a page, describe the look or layout you want, and turn a normal website into something that feels more like yours.

Open Current Repo How It Works
Favorite WebsitesPersonal StylesOptional Element PickingSaved VersionsAI-Assisted Customization
rigid page → personalized layout
Current Build

A browser extension for making the web feel personal.

Prism is built around a simple idea: users should be able to customize the websites they visit instead of accepting every page exactly as it ships. The current build is still in active development, but the core loop already works: describe a change, optionally use extra controls for style or precision, generate the customization, and keep saved versions you can restore later.

Workflow

Customize a website in four steps.

  1. Open a site you already useLaunch Prism on the page you want to personalize.
  2. Describe the changeAsk for cleaner cards, different spacing, a softer theme, or a new layout.
  3. Add direction if neededUse a style template for a quick visual preset, or Pick to target one exact element.
  4. Generate, save, or restorePreview the change on the live page, keep versions you like, and restore earlier looks from history.
Customization Features

Extra controls are there when you want more direction.

Style templates

Optional visual presets help you quickly set a direction — for example modern, futuristic, cartoon, or solarpunk — when you do not want to start from a blank prompt.

ModernFuturisticCartoonSolarpunk

Element picking

When a change should affect one exact part of a page, Pick lets you select it directly. It is a precision feature, not a required step.

Saves and restore

The popup keeps generated versions so you can experiment freely, bring back a look you liked, or remove versions you no longer need.

Low-Cost Patch Flow

Prism avoids asking the model to rewrite a whole webpage.

Compact page representation

The extension captures the live post-JavaScript DOM. The backend builds an anchored skeleton with meaningful structure, text, attributes, nearby context, and layout hints while collapsing repetitive branches.

Intent-level output

The model emits small patch operations, CSS variable changes, and CSS rules instead of a full HTML document. That keeps the prompt smaller and makes nano-level models useful for many current page edits.

first-look generations often below $0.01
Architecture

A browser extension talks to a local style engine that owns prompts, visual modes, and patch logic.

Extension

Popup UI, content script, background worker, page element picker, cached outputs, and options/history controls.

prism-extension/popup · src/content.js · src/background.js

Backend API

Health, style mode, and process routes serve the extension and coordinate DOM preprocessing and model calls.

/api/v1/health · /api/v1/modes · /api/v1/process

Preprocessing

Anchoring, skeletonization, and patch application are backend responsibilities, keeping the extension focused on page interaction.

anchor_skeleton.py · id_anchoring.py · patch_applier.py
Next Direction

The next step is customization that follows you across a site.

Right now Prism customizes one page at a time. The next direction is making a chosen style apply consistently across multiple pages, shared layouts, and repeated components so a whole website can feel personalized instead of just one screen.

Origin Note

Originated as a hackathon prototype, now rebuilt as an open-source product direction.

The original idea was prototyped during the IBM BOB Hackathon. The current Prism repository is now the source of truth for the rebuild: a Chrome extension for customizing favorite websites, with optional style templates, optional element picking, saved versions, and a lower-cost patch-based editing flow behind the scenes.