SystemForge
Turn any website into a structured design system foundation
Plugin Preview
About this plugin
SystemForge — Generate a complete design system foundation from any website in 60 seconds.
Paste a URL. Get production-ready Figma variables, semantic tokens, text styles, and a scalable Light/Dark architecture — built with real alias chains (not flat hex values).
Watch the video!
https://www.loom.com/share/f7bf6afa87cd4607bc1086d03ee85e16
SystemForge extracts live computed styles, then uses AI (via your Claude or OpenAI API key) to identify brand intent, typography pairings, and color structure. It generates a battle-tested token system that mirrors how mature teams structure design systems.
What You Get
• 5 structured variable collections with proper aliasing
• 150+ variables across color, type, layout, primitives & theme
• Light & Dark modes with semantic mapping
• Foundation + contextual text styles
• Intentional spacing and radius scales
• Documentation frames for handoff
• An audit page showing AI decisions
Requirements
Bring your own Claude or OpenAI API key.
No data stored. No accounts. Your key, your control.
Built For
Freelancers, agencies, and design system leads who need a professional foundation instantly.
#designsystems #ecommerce #ai #tokens #variables #htmltodesignsystem #pro
Plugin Details
| Version | 1 |
|---|---|
| Created | February 13, 2026 |
| Last Updated | February 13, 2026 |
| Category | Import & export plugins |
| Creator | Joshua Vizzacco |
| Stats | 1 installs, 0 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Network Access:
AI APIs for token analysis. Screenshot APIs (microlink, thum.io) for automated site capture. CORS proxies for CSS fetching.
- Editor Types:figma
- Allowed Domains:
- https://*.lemonsqueezy.com
- https://api-cors-anywhere.lemonsqueezy.com
- https://api.allorigins.win
- https://api.anthropic.com
- https://api.codetabs.com
- https://api.lemonsqueezy.com
- https://api.microlink.io
- https://api.openai.com
- https://corsproxy.io
- https://image.thum.io
More Like This
Discover other plugins in the Import & export plugins category.
html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Convert any website into fully editable Figma designs
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Figma to HTML
Convert Figma design to HTML