inkbridge 0.1.0-beta.17 → 0.1.0-beta.19

package/README.md

@@ -4,6 +4,10 @@
 
 Generates native Figma frames and reusable Figma component instances from your Tailwind React components, and syncs design tokens back to your codebase via GitHub PRs.
 
+<img src="https://inkbridge.ink/docs/mediacards-figma.png" alt="An Inkbridge-generated Figma page showing component variants rendered as native Figma frames" />
+
+> Read the methodology behind this — stories as the single source of truth between design and code: [inkbridge.ink/methodology](https://inkbridge.ink/methodology). Browse the full docs at [inkbridge.ink/docs](https://inkbridge.ink/docs).
+
 ## What it does
 
 | Feature | Description |
@@ -85,9 +89,9 @@ pnpm inkbridge:scan
 
 Writes `.inkbridge/component-definitions.json`. Useful for debugging scanner output.
 
-### Push to Code (Pro)
+### Push to Code
 
-Requires a Pro license and GitHub configuration.
+Sync token edits from Figma back to your codebase as a GitHub PR.
 
 1. **Plugins → Development → Inkbridge → Settings**
 2. Fill in:
@@ -101,7 +105,6 @@ Requires a Pro license and GitHub configuration.
    - **Allow New Tokens from Figma** — optional; permits creating new token keys on push (off by default)
    - **New Token Prefixes** — optional comma-separated allowlist (for example `chart-, brand-`)
    - **GitHub token** — a [fine-grained PAT](https://github.com/settings/tokens?type=beta) with `Contents` and `Pull requests` read & write
-   - **License key** — from your Inkbridge account
 3. **Save Settings**
 4. **Plugins → Development → Inkbridge → Push to Code**
 5. Enter a commit message and click **Push Tokens to Code** (it auto-detects token changes and opens the PR step)
@@ -177,13 +180,13 @@ ignores:
     "react/forbid-dom-props": ["error", {
       "forbid": [{
         "propName": "style",
-        "message": "Inkbridge ignores inline styles — use Tailwind classes (or arbitrary values like text-[#0a0]) so Figma rendering matches the browser."
+        "message": "Use Tailwind classes — Inkbridge ignores inline styles."
       }]
     }],
     "react/forbid-component-props": ["error", {
       "forbid": [{
         "propName": "style",
-        "message": "Inkbridge ignores inline styles — use Tailwind classes (or arbitrary values like text-[#0a0]) so Figma rendering matches the browser."
+        "message": "Use Tailwind classes — Inkbridge ignores inline styles."
       }]
     }]
   }
@@ -258,15 +261,16 @@ Component data is always scanned live — you only need to update when a new `in
 
 ```
 Figma plugin (sandboxed)
-    └── code.js            Main logic — cannot make network requests directly
-    └── ui.html            Hidden iframe — relays all network requests to code.js
+    └── code.js     Main logic — no direct network access
+    └── ui.html     Hidden iframe — relays I/O for code.js
 
-code.js  →  ui.html  →  localhost:4000/api/inkbridge/scan-components
-                     →  localhost:4000/api/inkbridge/patch-tokens
-                     →  https://api.github.com
+code.js → ui.html → localhost:4000/api/inkbridge/scan-components
+                  → localhost:4000/api/inkbridge/patch-tokens
+                  → https://api.github.com
 ```
 
-All network I/O is relayed through the UI iframe via `postMessage` due to the Figma sandbox restriction.
+All network I/O is relayed through the UI iframe via `postMessage`
+because the Figma plugin sandbox can't make requests directly.
 
 ---