Photon

Firefox’s Photon Design System.

Generate Convert Improve

Install / Use

/learn @FirefoxUX/Photon

About this skill

Quality Score

0/100

README

Photon Design System

This project is no longer maintained or worked on. More to come soon on our next design system documentation website.

Running Photon

Requires:

docker

To run (with hot-reloading!):

First, check out this repository into a folder.
Go to your command line, enter that folder, and run the following commands:

docker pull praqma/gh-pages
docker run --name photon -d -v $PWD/jekyll:/home/jenkins -p 4000:4000 praqma/gh-pages || docker start photon
docker exec -it photon jekyll serve --watch --host=0.0.0.0

Open up http://localhost:4000/photon/

Once you have something you like, it's time to share it with the rest of us!

To get your changes merged:

Make sure you're working on master, and submit the pull request to there.
Make your pull request as small as possible (so it's easier to review and merge them).
If it's something that needs to be merged as soon as possible, add a tag (e.g. urgent).

Related Skills

clearshot

Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.

ui-ux-pro-max-skill

57.9k

An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms

ui-ux-pro-max-skill

57.9k

An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms

onlook

25.0k

The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI