/\\\\\\\\\\\\\\\__/\\\\\\\\\\\\\\\___/\\\\\\\\\\\\\__________________________________________  
 _\///////\\\/////__\/\\\///////////___\/\\\/////////\\\__________________________________________ 
  _______\/\\\_______\/\\\______________\/\\\_______\/\\\______________________________________________ 
   _______\/\\\_______\/\\\\\\\\\\\______\/\\\\\\\\\\\\\/___/\\/\\\\\\\______/\\\\\\\\___/\\\____/\\\_____
    _______\/\\\_______\/\\\///////_______\/\\\/////////____\/\\\/////\\\___/\\\/////\\\_\//\\\__/\\\_____ 
     _______\/\\\_______\/\\\______________\/\\\_____________\/\\\___\///___/\\\\\\\\\\\___\//\\\/\\\_______
      _______\/\\\_______\/\\\______________\/\\\_____________\/\\\_________\//\\///////_____\//\\\\\______
       _______\/\\\_______\/\\\______________\/\\\_____________\/\\\__________\//\\\\\\\\\\____\//\\\_____
        _______\///________\///_______________\///______________\///____________\//////////______\///_____

TokenFoundry Preview

I built another thing.

TokenFoundry Preview is a simple UI to visualize the tokens exported by TokenFoundry.

It’s not a design system platform.
It’s just a way to see what you exported without squinting at JSON.

🔸🔸Since this is prompt based, it will most likely mess up the initial design of the previerw page, but that is also the beauty of it, now you get to fix things with your own tokens :)🔸🔸

---

✨ What It Does

• Loads exported token data
• Displays colors, spacing, typography, etc.
• Lets you visually inspect your design system structure
• Helps debug token naming and hierarchy

That’s it.

---

🚀 How It Works

1. Download the repo
2. Open the file with your prefered Ai assistant (only tested with Cursor and Claude)
3. Copy-paste the prompt and wait 5 minutes
4. Just ask Ai to "help me see this page locally" It will run the necessary dependencies (npm install, npm run dev)
5. Start building components inside of it

---

🔗 Related Project

This project works with:

👉 TokenFoundry

TokenFoundry generates the structured prompt.
TokenFoundry Preview lets you see what that structure looks like.

They’re siblings. Not a startup.

---

🛠 Use Case

• Sanity-check exported tokens
• Share a visual token reference
• Quickly inspect a design system snapshot

---

❌ What This Is Not

• Not a full design system documentation tool
• Not a Storybook alternative
• Not production-ready infra

It’s a lightweight visual layer for exported tokens.

---

📌 Status

• Experimental
• Built for exploration
• Subject to random refactors

---

If you're experimenting with AI-generated UI and structured design systems, this helps make the invisible visible.

If you're looking for enterprise-ready token management, this is not that.