From 8e888e0c9a0af0a68901dd4b8d56440d7a067adc Mon Sep 17 00:00:00 2001 From: sina_sajjadi Date: Sun, 12 Jul 2026 17:37:21 +0330 Subject: [PATCH] docs: update README to include developer system prompt details and refined installation/usage instructions --- README.md | 44 ++++++++++++++++++++++++++++++++++++++------ 1 file changed, 38 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index e3761f9..d743e95 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ Select any frame or group of layers in Figma, click **Extract**, and the plugin 3. **Capture text content** inline, including font family, size, line height, letter spacing, and alignment 4. **Export visual assets** — PNG for every non-text node, plus SVG for nodes that don't contain text children 5. **Package everything** into a downloadable `.zip` archive with a structured `data.md` file +6. **Copy the Developer System Prompt** to your clipboard automatically. This prompt instructs code-generation AI agents on how to strictly implement the extracted design with zero guesswork. --- @@ -52,16 +53,47 @@ The markdown file contains: | Node with text children | ✓ | ✗ | PNG preserves visual context; SVG skipped to avoid exposing raw text paths | | Node without text | ✓ | ✓ | Both formats exported for maximum flexibility | +### Developer System Prompt + +To make it seamless to hand off the extracted data to frontend AI agents (e.g., code-generation models), the plugin automatically copies a specialized **Developer System Prompt** to your clipboard during the ZIP extraction. + +This prompt enforces: +- **Strict Structural Fidelity**: Instructs the agent to prioritize the exact coordinates, properties, and tree structures in `data.md` over generic CSS styling defaults or auto-generated mockups. +- **Asset Pipeline Rules**: Directs the agent to organize visual assets into the target project's `/assets/images/` directory and map them correctly in the code. +- **Visual Verification**: Tells the agent to cross-verify SVG assets against matching PNG references to ensure no bounding boxes or layout boxes are missing. +- **Zero Guesswork**: Prohibits the agent from correcting typos, changing text cases, or merging styles from child nodes up to parent containers. + +--- + +## Installation + +To install and load the plugin locally in Figma: + +1. **Download the project** or clone this repository to your local machine. +2. **Open your terminal** and navigate to the project directory. +3. **Install the dependencies** by running: + ```bash + npm i + ``` +4. **Build the project** to compile TypeScript: + ```bash + npm run build + ``` +5. **Open Figma** (either in the browser or the desktop app). +6. Navigate to **Plugins** > **Development** > **Import plugin from manifest...** (or search for it under plugins menu). +7. Select the `manifest.json` file located in the root folder of this project. + --- ## How to Use -1. Open a Figma file -2. Run the **AI Data Extractor** plugin -3. Select one or more frames/layers on the canvas -4. Click **Extract Selection** -5. Wait for processing — the plugin traverses nodes, exports assets, and generates the ZIP -6. The archive downloads automatically when complete +Once the plugin is installed: + +1. **Select a frame** or layer group from your Figma design canvas. +2. **Open the plugin** (under Plugins > Development > AI Data Extractor) and click **Extract Selection**. +3. **Download the generated ZIP file** (`figma-ai-extraction.zip`) once the process is complete. +4. **Extract the ZIP archive** into a directory. +5. **Provide the extracted folder** to your AI agent model so it has access to `data.md` and the exported visual assets, then **paste the copied prompt** from your clipboard directly into the chat to instruct the agent model on how to implement the code. ---