feat: move Figma plugin to figma-plugin/ with proper README

- Move plugin from deeply nested output_json/figma-plugin-extracted/
to clean top-level figma-plugin/ folder
- Add comprehensive README with setup guide, DTCG + legacy JSON
examples, visual spec preview, AS-IS/TO-BE workflow, troubleshooting
- Update manifest.json with new branding
- Remove old INSTALLATION.md, QUICK_SETUP.md (consolidated into README)
- Add old plugin path to .gitignore

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.gitignore

@@ -30,3 +30,4 @@ content/
 # Data files (sample outputs, caches)
 storage/benchmark_cache.json
 output_json/*.json
+output_json/figma-plugin-extracted/

figma-plugin/README.md

@@ -0,0 +1,265 @@
+# Design System Automation — Figma Plugin
+
+Import design tokens into Figma and auto-generate a visual spec page. Works with W3C DTCG format (from the Design System Automation app) and legacy JSON formats.
+
+![Figma Plugin](https://img.shields.io/badge/Figma-Plugin-ff7262) ![Version](https://img.shields.io/badge/version-7.0-blue) ![License](https://img.shields.io/badge/license-MIT-green)
+
+---
+
+## What It Does
+
+Upload a JSON file with your design tokens. The plugin creates:
+
+- **Figma Variables** — Color, number, and string variable collections
+- **Paint Styles** — Every color as a reusable Figma paint style
+- **Text Styles** — Typography with font family, size, weight, and line height
+- **Effect Styles** — Shadows as Figma effect styles
+- **Visual Spec Page** — Auto-generated frames showing all your tokens organized by category, with AA compliance badges on every color
+
+The plugin auto-detects whether your JSON uses the **W3C DTCG format** (`$value`, `$type`) or a **legacy format** (`value`, `type`) and handles both.
+
+---
+
+## Quick Setup (5 Minutes)
+
+### 1. Download the plugin
+
+Clone this repo or download just the `figma-plugin/` folder. You need these three files:
+
+```
+figma-plugin/
+  manifest.json
+  src/code.js
+  ui/ui.html
+```
+
+### 2. Load into Figma
+
+1. Open **Figma** (desktop app)
+2. Go to **Plugins** > **Development** > **Import plugin from manifest...**
+3. Select the `manifest.json` file from this folder
+4. Done — the plugin is now available under **Plugins > Development**
+
+### 3. Run it
+
+1. Open any Figma file (or create a new one)
+2. Go to **Plugins** > **Development** > **Design System Automation — Token Importer**
+3. Upload your JSON file or paste JSON directly
+4. Click **"Apply to Document"**
+5. Check the **Assets** panel — all your styles and variables are created
+
+---
+
+## How to Get Your Token JSON
+
+### Option A: Use the Design System Automation App (Recommended)
+
+1. Go to the [Design System Automation app](https://huggingface.co/spaces/riazmo/Design-System-Automation)
+2. Enter any website URL
+3. Click Extract — the app analyzes the site and extracts all design tokens
+4. Download the **AS-IS JSON** (W3C DTCG format)
+5. Upload it to this plugin
+
+### Option B: Create JSON Manually
+
+The plugin accepts two formats:
+
+**W3C DTCG Format** (recommended — output from the app):
+```json
+{
+  "color": {
+    "brand": {
+      "primary": {
+        "$type": "color",
+        "$value": "#0066ff",
+        "$description": "Primary brand color"
+      }
+    },
+    "text": {
+      "primary": {
+        "$type": "color",
+        "$value": "#1a1a1a"
+      }
+    }
+  },
+  "font": {
+    "heading": {
+      "lg": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "32px",
+          "fontWeight": "700",
+          "lineHeight": "1.3"
+        }
+      }
+    }
+  },
+  "spacing": {
+    "md": {
+      "$type": "dimension",
+      "$value": "16px"
+    }
+  },
+  "radius": {
+    "md": {
+      "$type": "dimension",
+      "$value": "8px"
+    }
+  },
+  "shadow": {
+    "sm": {
+      "$type": "shadow",
+      "$value": {
+        "offsetX": "0px",
+        "offsetY": "2px",
+        "blur": "8px",
+        "spread": "0px",
+        "color": "#00000026"
+      }
+    }
+  }
+}
+```
+
+**Legacy Format** (also supported):
+```json
+{
+  "global": {
+    "colors": {
+      "primary": { "value": "#0066ff", "type": "color" },
+      "secondary": { "value": "#ff007f", "type": "color" }
+    },
+    "typography": {
+      "heading": {
+        "value": {
+          "fontFamily": "Inter",
+          "fontWeight": "700",
+          "fontSize": "32px",
+          "lineHeight": "1.3"
+        },
+        "type": "typography"
+      }
+    },
+    "spacing": {
+      "md": { "value": "16px", "type": "spacing" }
+    }
+  }
+}
+```
+
+---
+
+## The Visual Spec Page
+
+After importing, the plugin generates a visual spec page with separate frames for each token category:
+
+```
++------------------------------------------------------------------+
+| TYPOGRAPHY (Desktop)          TYPOGRAPHY (Mobile)                  |
+| H1  48px/Bold  Inter         H1  32px/Bold  Inter                |
+| H2  36px/Bold  Inter         H2  28px/Bold  Inter                |
+| Body 16px/Regular Inter      Body 14px/Regular Inter             |
++------------------------------------------------------------------+
+| COLORS                                                            |
+| BRAND         TEXT           BACKGROUND      FEEDBACK             |
+| +------+      +------+      +------+        +------+             |
+| |Primary|     |Primary|     |Primary|       | Error|             |
+| +------+      +------+      +------+        +------+             |
+| #0066ff       #1a1a1a       #ffffff         #dc2626              |
+| AA:Pass       AA:Pass                       AA:Pass              |
++------------------------------------------------------------------+
+| SPACING          RADIUS            SHADOWS                        |
+| 4  8  16  24     sm md lg full     xs  sm  md  lg  xl            |
++------------------------------------------------------------------+
+```
+
+Every color swatch shows its AA compliance status (Pass/Fail against white and black backgrounds).
+
+---
+
+## AS-IS vs TO-BE Workflow
+
+The full Design System Automation workflow uses this plugin twice:
+
+1. **Extract AS-IS** — Run the app on a website, download JSON, import to Figma
+2. **Review** — See the current state of the design system as a visual spec
+3. **AI Analysis** — The app's 4 AI agents analyze and suggest improvements
+4. **Accept/Reject** — Choose which suggestions to keep
+5. **Export TO-BE** — Download the improved JSON, import to Figma
+6. **Compare** — Place AS-IS and TO-BE visual specs side by side
+
+This gives you a clear before/after view of every change.
+
+---
+
+## Plugin Features
+
+| Feature | Description |
+|---------|-------------|
+| DTCG Auto-Detection | Automatically detects W3C DTCG vs legacy JSON format |
+| Figma Variables | Creates Color, Number, and String variable collections |
+| Paint Styles | Every color token becomes a reusable paint style |
+| Text Styles | Typography tokens with font, size, weight, line height |
+| Effect Styles | Shadow tokens as Figma drop shadow effects |
+| Visual Spec | Auto-generated spec page with organized frames |
+| AA Badges | Contrast ratio check on every color swatch |
+| File Upload | Upload JSON file or paste directly |
+| Token Preview | See all detected tokens before applying |
+| Progress Bar | Real-time feedback while creating styles |
+
+---
+
+## Troubleshooting
+
+**Plugin won't load?**
+- Make sure you're using the Figma desktop app (not the browser version)
+- Check that `manifest.json`, `src/code.js`, and `ui/ui.html` are all present
+- Try: Plugins > Development > Import plugin from manifest... and re-select
+
+**Styles not appearing?**
+- Open the **Assets** panel (left sidebar) and check under Local styles
+- Make sure you clicked "Apply to Document" and waited for the progress bar
+- Try refreshing: Cmd+R (Mac) or Ctrl+R (Windows)
+
+**JSON upload fails?**
+- Validate your JSON at [jsonlint.com](https://jsonlint.com)
+- Check that hex colors use the full 6-digit format: `#0066ff` (not `#06f`)
+- Make sure font sizes include units: `"32px"` (not `"32"`)
+
+**Fonts look wrong?**
+- Figma needs the font installed on your system or available through Google Fonts
+- If a font isn't found, Figma falls back to a default — install the font and re-run
+
+---
+
+## Project Structure
+
+```
+figma-plugin/
+  manifest.json      # Plugin configuration (name, entry points)
+  README.md          # This file
+  src/
+    code.js          # Main plugin logic (v7, ~1400 lines)
+  ui/
+    ui.html          # Plugin UI panel
+```
+
+---
+
+## Compatibility
+
+- **Figma**: Desktop app (latest version recommended)
+- **JSON Formats**: W3C DTCG v1, Tokens Studio, legacy `{value, type}` format
+- **Token Types**: Colors, typography, spacing, border radius, shadows
+- **Downstream**: Works with tokens exported from Tokens Studio, Style Dictionary, or the Design System Automation app
+
+---
+
+## License
+
+MIT — free to use, modify, and distribute.
+
+---
+
+Built as part of [Design System Automation](https://github.com/hiriazmo/design-system-automation) — an open-source tool that extracts, analyzes, and improves design systems from any live website.

{output_json/figma-plugin-extracted/figma-design-token-creator 5 → figma-plugin}/manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "Design Token Creator",
+  "name": "Design System Automation — Token Importer",
   "id": "1234567890",
   "api": "1.0.0",
   "main": "src/code.js",

output_json/figma-plugin-extracted/figma-design-token-creator 5/INSTALLATION.md

@@ -1,205 +0,0 @@
-# Design Token Creator - Installation Guide
-
-A custom Figma plugin that automatically creates color styles, text styles, and spacing tokens from your design tokens JSON file.
-
-## Features
-
-✅ Upload JSON design tokens  
-✅ Preview all tokens before applying  
-✅ Create color styles automatically  
-✅ Create text styles automatically  
-✅ Create spacing tokens automatically  
-✅ Progress indicator while processing  
-✅ No credits needed - completely free  
-
----
-
-## Installation Steps
-
-### Step 1: Prepare the Plugin Files
-
-1. You should have these files:
-   - `manifest.json`
-   - `src/code.js`
-   - `ui/ui.html`
-
-2. Create a folder structure:
-   ```
-   design-token-creator/
-   ├── manifest.json
-   ├── src/
-   │   └── code.js
-   └── ui/
-       └── ui.html
-   ```
-
-### Step 2: Load Plugin into Figma
-
-1. Open **Figma** and go to any file
-2. Go to **Plugins** menu → **Development** → **New plugin**
-3. Select **Link existing plugin**
-4. Choose the folder containing your plugin files
-5. Click **Open**
-
-### Step 3: Run the Plugin
-
-1. In Figma, go to **Plugins** → **Development** → **Design Token Creator**
-2. The plugin panel will open on the right side
-
----
-
-## How to Use
-
-### Step 1: Upload Your JSON File
-
-You have two options:
-
-**Option A: Choose File**
-1. Click the **"Choose File"** button
-2. Select your `design-tokens.json` file
-3. The plugin will load and display all tokens
-
-**Option B: Paste JSON**
-1. Click the **"Paste JSON"** button
-2. Paste your JSON content
-3. Click OK
-
-### Step 2: Preview Tokens
-
-The plugin will show you:
-- **Colors** - All color tokens with hex values
-- **Typography** - All text styles with size and weight
-- **Spacing** - All spacing units
-
-### Step 3: Apply to Document
-
-1. Click **"Apply to Document"** button
-2. Wait for the progress bar to complete
-3. You'll see a success message
-
-### Step 4: Check Your Styles
-
-1. In Figma, open the **Assets** panel (left sidebar)
-2. You'll see:
-   - **Color Styles** folder with all your colors
-   - **Text Styles** folder with all typography
-   - **Spacing** tokens as text styles
-
----
-
-## Your JSON Format
-
-The plugin expects this JSON structure:
-
-```json
-{
-  "global": {
-    "colors": {
-      "teal": {
-        "value": "#00A09A",
-        "type": "color"
-      },
-      "hot-pink": {
-        "value": "#FF007F",
-        "type": "color"
-      }
-    },
-    "typography": {
-      "h1": {
-        "value": {
-          "fontFamily": "Montserrat",
-          "fontWeight": "700",
-          "fontSize": "48px",
-          "lineHeight": "1.2"
-        },
-        "type": "typography"
-      }
-    },
-    "spacing": {
-      "xs": {
-        "value": "8px",
-        "type": "spacing"
-      }
-    }
-  }
-}
-```
-
----
-
-## What Gets Created
-
-### Color Styles
-- Named as: `colors/[name]`
-- Example: `colors/teal`, `colors/hot-pink`
-- Can be used in any fill or stroke
-
-### Text Styles
-- Named as: `typography/[name]`
-- Example: `typography/h1`, `typography/body`
-- Includes font family, size, weight, and line height
-
-### Spacing Tokens
-- Named as: `spacing/[name]`
-- Example: `spacing/xs`, `spacing/md`
-- Stored as text styles for reference
-
----
-
-## Troubleshooting
-
-### Plugin doesn't load
-- Make sure all three files are in the correct folder structure
-- Check that `manifest.json` is in the root folder
-- Restart Figma and try again
-
-### Styles not appearing
-- Check the Assets panel on the left sidebar
-- Make sure you clicked "Apply to Document"
-- Try refreshing the page (Cmd+R or Ctrl+R)
-
-### JSON upload fails
-- Verify your JSON is valid (use jsonlint.com)
-- Make sure it follows the expected structure
-- Check for missing commas or quotes
-
-### Styles have wrong values
-- Double-check your JSON values
-- Make sure hex colors are valid (e.g., #00A09A)
-- Verify font sizes include "px" (e.g., "48px")
-
----
-
-## Tips & Best Practices
-
-1. **Keep JSON organized** - Use clear token names
-2. **Test first** - Create a test file before applying to main designs
-3. **Update regularly** - Re-run the plugin when tokens change
-4. **Use consistent naming** - Follow the naming convention (e.g., `colors/`, `typography/`)
-5. **Backup your file** - Save your Figma file before running the plugin
-
----
-
-## Support
-
-If you encounter any issues:
-
-1. Check that your JSON is valid
-2. Verify the folder structure is correct
-3. Make sure you're using the latest Figma version
-4. Try restarting Figma
-
----
-
-## What's Next?
-
-After creating your styles:
-
-1. **Create components** using these styles
-2. **Build design system pages** showing all tokens
-3. **Share with your team** by publishing as a library
-4. **Keep tokens updated** as your design system evolves
-
----
-
-**Enjoy your new design system!** 🎨

output_json/figma-plugin-extracted/figma-design-token-creator 5/QUICK_SETUP.md

@@ -1,49 +0,0 @@
-# ⚡ Quick Setup - 5 Minutes
-
-Get the Design Token Creator plugin running in Figma in 5 minutes.
-
-## Step 1: Extract the Plugin (1 minute)
-
-1. Download `figma-design-token-creator.zip`
-2. Extract it to a folder on your computer
-3. You should see these files:
-   - `manifest.json`
-   - `src/code.js`
-   - `ui/ui.html`
-   - `README.md`
-   - `INSTALLATION.md`
-
-## Step 2: Load into Figma (2 minutes)
-
-1. Open **Figma** and open any file
-2. Go to **Plugins** → **Development** → **New plugin**
-3. Click **"Link existing plugin"**
-4. Select the extracted folder
-5. Click **"Open"**
-
-✅ Plugin is now loaded!
-
-## Step 3: Run the Plugin (1 minute)
-
-1. Go to **Plugins** → **Development** → **Design Token Creator**
-2. The plugin panel opens on the right
-
-## Step 4: Use It (1 minute)
-
-1. Click **"Choose File"** or **"Paste JSON"**
-2. Select your `design-tokens.json` file
-3. Click **"Apply to Document"**
-4. Wait for completion ✨
-
-## Step 5: Check Your Styles
-
-Open **Assets** panel on the left sidebar:
-- ✅ **Color Styles** - All your colors
-- ✅ **Text Styles** - All typography
-- ✅ **Spacing** - All spacing tokens
-
----
-
-**That's it!** Your design system is ready. 🎉
-
-For detailed instructions, see `INSTALLATION.md`

output_json/figma-plugin-extracted/figma-design-token-creator 5/README.md

@@ -1,182 +0,0 @@
-# Design Token Creator - Figma Plugin
-
-A powerful, free Figma plugin that automatically creates color styles, text styles, and spacing tokens from your design tokens JSON file.
-
-## 🎯 What It Does
-
-Upload a JSON file with your design tokens and the plugin will automatically create:
-
-- ✅ **Color Styles** - All your brand colors as Figma color styles
-- ✅ **Text Styles** - Complete typography system with font families, sizes, weights, and line heights
-- ✅ **Spacing Tokens** - All spacing units for consistent layouts
-
-## 🚀 Quick Start
-
-1. **Create an empty Figma file**
-2. **Open the plugin** (Plugins → Development → Design Token Creator)
-3. **Upload your JSON** file with design tokens
-4. **Click "Apply to Document"**
-5. **Check your Assets panel** - All styles are created! ✨
-
-## 📋 Features
-
-- 🎨 **Beautiful UI** - Clean, intuitive interface
-- 📤 **Multiple Input Methods** - Upload file or paste JSON
-- 👁️ **Token Preview** - See all tokens before applying
-- ⏳ **Progress Indicator** - Real-time feedback while creating styles
-- 🎯 **Accurate Naming** - Tokens organized by category (colors/, typography/, spacing/)
-- 💾 **No Data Loss** - Your original file remains unchanged
-- 🆓 **Completely Free** - No credits needed, no limitations
-
-## 📁 Project Structure
-
-```
-design-token-creator/
-├── manifest.json          # Plugin configuration
-├── src/
-│   └── code.js           # Main plugin code
-├── ui/
-│   └── ui.html           # Plugin interface
-├── INSTALLATION.md       # Installation guide
-└── README.md            # This file
-```
-
-## 🔧 Installation
-
-See [INSTALLATION.md](./INSTALLATION.md) for detailed setup instructions.
-
-### Quick Install
-
-1. Clone or download this folder
-2. In Figma: Plugins → Development → New plugin → Link existing plugin
-3. Select this folder
-4. Done!
-
-## 📝 JSON Format
-
-Your design tokens should follow this structure:
-
-```json
-{
-  "global": {
-    "colors": {
-      "teal": {
-        "value": "#00A09A",
-        "type": "color"
-      },
-      "hot-pink": {
-        "value": "#FF007F",
-        "type": "color"
-      }
-    },
-    "typography": {
-      "h1": {
-        "value": {
-          "fontFamily": "Montserrat",
-          "fontWeight": "700",
-          "fontSize": "48px",
-          "lineHeight": "1.2"
-        },
-        "type": "typography"
-      }
-    },
-    "spacing": {
-      "xs": {
-        "value": "8px",
-        "type": "spacing"
-      }
-    }
-  }
-}
-```
-
-## 🎨 Example Usage
-
-### Input JSON
-```json
-{
-  "global": {
-    "colors": {
-      "primary": { "value": "#0066ff", "type": "color" },
-      "secondary": { "value": "#ff007f", "type": "color" }
-    },
-    "typography": {
-      "heading": {
-        "value": {
-          "fontFamily": "Montserrat",
-          "fontWeight": "700",
-          "fontSize": "32px",
-          "lineHeight": "1.3"
-        },
-        "type": "typography"
-      }
-    }
-  }
-}
-```
-
-### Output in Figma
-- **Color Styles**: `colors/primary`, `colors/secondary`
-- **Text Styles**: `typography/heading`
-- All automatically available in your Assets panel!
-
-## 🛠️ How It Works
-
-1. **Parse JSON** - Plugin reads your design tokens
-2. **Validate** - Checks for correct format and values
-3. **Create Styles** - Generates Figma styles for each token
-4. **Apply** - Adds styles to your document
-5. **Confirm** - Shows success message with count
-
-## 💡 Tips
-
-- Use consistent naming conventions in your JSON
-- Test with a small set of tokens first
-- Keep your JSON file organized by category
-- Update tokens regularly as your design system evolves
-- Share the JSON file with your team for consistency
-
-## 🐛 Troubleshooting
-
-**Plugin won't load?**
-- Check folder structure matches exactly
-- Ensure manifest.json is in root folder
-- Restart Figma
-
-**Styles not created?**
-- Verify JSON is valid (use jsonlint.com)
-- Check token names don't have special characters
-- Make sure hex colors are valid format
-
-**Wrong style values?**
-- Double-check JSON values
-- Verify font sizes include "px"
-- Ensure hex colors start with #
-
-## 📚 Learn More
-
-- [Figma Plugin API Documentation](https://www.figma.com/plugin-docs/)
-- [Design Tokens Format](https://design-tokens.github.io/community-group/format/)
-- [Figma Styles Documentation](https://help.figma.com/en/articles/12453487-Styles)
-
-## 🎯 What's Next?
-
-After creating your styles:
-
-1. Create components using these styles
-2. Build design system documentation
-3. Publish as a shared library
-4. Share with your team
-5. Keep tokens updated as system evolves
-
-## 📄 License
-
-This plugin is free to use and modify for your own projects.
-
-## ✨ Credits
-
-Created to help design teams implement design systems efficiently in Figma.
-
----
-
-**Ready to get started?** See [INSTALLATION.md](./INSTALLATION.md) for step-by-step setup instructions.