DesignBridge

Connect design extraction with automation in one clean workflow.

DesignBridge is a unified app that connects a Design PNG Extractor with an existing Automation Dashboard v4.3. It helps teams extract design assets and metadata, review and map product details, save everything in a shared database, and run automation from one interface. It is meant for operations teams and non-technical users who need accuracy, visibility, and a simple end-to-end workflow.

Business Goals

  • Reduce manual data handoff between extraction and automation by at least 70% within the first 60 days after launch.
  • Cut processing errors caused by incorrect product or color mapping by 50% in the first 3 months.
  • Enable a single workflow for extraction, review, apply, and run automation, with at least 80% of active users completing the full flow without support.
  • Support batch processing for up to 5 tabs at once while maintaining stable performance in pilot testing.
  • Prepare the product for a future all-in-one EXE packaging decision after ZIP-based integration testing is validated.

User Goals

  • Extract PNG designs and related metadata in a few clicks.
  • Review and correct product names, colors, and assignment rules before applying data.
  • See how many profiles and designs are available before running automation.
  • Apply extracted data into the automation database without switching tools.
  • Preview, edit, and save design records from a dedicated Designs Page.

Non-Goals

  • Building a brand-new automation engine from scratch.
  • Adding pricing, billing, or subscription management.
  • Replacing the existing Python Automation Core logic during this phase.
  • Designing a fully custom graphics editor for modifying PNG files.

Ops Manager Samira, 34 - Samira manages daily extraction and automation jobs for a small production team. She needs a reliable way to verify designs and keep the database clean before automation runs.

Ops Manager Samira, 34

  • As an ops manager, I want to review extracted product and color mappings before applying them, so that automation uses correct data.
  • As an ops manager, I want to see progress and errors in one place, so that I can quickly fix failed jobs.
  • As an ops manager, I want to know if designs are enough for the requested assignment batch, so that I can avoid incomplete runs.

Automation Specialist Youssef, 29 - Youssef maintains the existing Python automation and needs the extractor to feed data into it without breaking the current workflow. He cares about reliability, performance, and clean integration.

Automation Specialist Youssef, 29

  • As an automation specialist, I want the extractor output to match the automation database format, so that I can reuse the existing core.
  • As an automation specialist, I want to test node and Python communication, so that I can confirm the integration is stable.
  • As an automation specialist, I want to run up to 5 tabs in parallel during testing, so that I can measure throughput safely.

Client User Lina, 41 - Lina is a non-technical client who needs a simple interface to start extraction, inspect results, and run automation without understanding implementation details.

Client User Lina, 41

  • As a client user, I want a clear Scraper Page and Designs Page, so that I can follow the workflow without training.
  • As a client user, I want to choose output folders and assignment modes, so that I can organize results my way.
  • As a client user, I want the app to warn me when designs are not enough, so that I can decide whether to reuse or stop.

Extraction and File Output · High priority

  • The app must extract PNG designs and their metadata, then save them in an organized output structure.
  • Start and stop extraction from a dedicated Scraper Page.
  • Save PNG images and extracted data into the chosen output folder.
  • Show extraction progress, success state, and failed items clearly.
  • Support batch output naming that keeps profiles and designs easy to trace.
  • Prevent overwrite unless the user confirms it.

Review, Mapping, and Apply · High priority

  • Users must be able to review extracted records, map them to automation fields, and apply them into the existing database.
  • Display extracted designs on a Designs Page with preview, edit, and save actions.
  • Allow manual review of product names, colors, and supported products.
  • Map extracted values to automation database fields before Apply.
  • Mark incomplete or mismatched records as needing attention.
  • Support manual Apply first, with optional later automation if confirmed.

Design Assignment Logic · High priority

  • The app must calculate whether there are enough designs for the selected profiles and assignment size, and then assign them using the selected mode.
  • Show Total Profiles, Total Designs Extracted, Designs per Profile, and Total Designs Required.
  • Support Random Designs mode and Next Designs mode.
  • Avoid duplicate use of the same design within the same assignment batch unless the user approves reuse.
  • Warn clearly when the available designs are not enough for the requested batch.
  • Allow the user to pause before assignment if the batch is incomplete.

Automation Launch and Workflow Control · Medium priority

  • Once data is applied, the user should be able to launch the existing automation workflow from the same app.
  • Run the Automation only after extraction and Apply are completed, unless the user chooses otherwise.
  • Pass mapped data to the Python Automation Core in a predictable format.
  • Display logs and status messages during automation runs.
  • Allow the user to stop or review before final execution.
  • Keep the workflow sequence visible: Extract, Save, Review, Apply, Run.

Integration Validation and Testing · Medium priority

  • The product should support controlled testing of the integration path before any final packaging decision.
  • Test communication between Node.js UI and Python Automation Core.
  • Evaluate CDP or subprocess-based communication as integration methods.
  • Test multiprocessing with up to 5 tabs in a controlled environment.
  • Validate database mapping for product names and colors before rollout.
  • Support ZIP-based delivery for internal testing before considering one EXE packaging.

First-Time Setup and Time to Value

  • Open the app and land on the Scraper Page.
  • Choose the output folder for PNG files and extracted data.
  • Review the default assignment mode and profile counts.
  • Start a small extraction test to confirm the connection.
  • Check the Designs Page, validate the data, and Apply to database.
  • Target time to first successful extraction and review: under 10 minutes.

1. Start Extraction

  • The user begins on the Scraper Page and launches the extractor for a chosen job.
  • Show clear Start Extraction and Stop controls.
  • Validate output folder before the job starts.
  • If the folder is missing or locked, show a simple error and block the run.

2. Save Output

  • The app stores PNG images and extracted metadata in the selected location.
  • Organize files by profile or batch so they are easy to review.
  • Keep extraction logs tied to the batch ID.
  • If saving fails, preserve partial results and flag the failed records.

3. Review and Map

  • The user checks extracted data, corrects names and colors, and prepares the records for automation.
  • Show supported products, colors, and metadata in editable fields.
  • Highlight missing mappings or invalid values.
  • Require confirmation before Apply when key fields are incomplete.

4. Apply to Database

  • The user pushes approved data into the automation database.
  • Write only validated records to the database.
  • Prevent duplicate inserts unless reuse is explicitly allowed.
  • Confirm the number of records applied and any skipped rows.

5. Run Automation

  • The user starts the existing automation workflow using the newly applied data.
  • Disable Run until Apply succeeds, unless manual override is confirmed.
  • Stream logs and status updates during execution.
  • If automation fails, keep the applied data available for retry.

Advanced and Edge Handling

  • Assignment calculations that compare available designs against required totals.
  • Random Designs and Next Designs modes for different operations styles.
  • Duplicate-prevention within a batch, with explicit user approval for reuse.
  • Parallel testing support for up to 5 tabs.
  • A future path to combine the full workflow into a single executable after testing.
  • Recovery flow for partial extraction or partial database apply.

UI and Usability Principles

  • White background with dark navy section headers and blue dividers.
  • Simple tables for counts, mappings, and decisions.
  • Large progress indicators and readable status messages for non-technical users.
  • Clear warning states for missing data, shortages, and failed mapping.
  • Fast preview rendering for PNG images and responsive lists for large batches.
  • Accessible spacing and contrast so the interface is usable during long work sessions.

Samira used to manage extraction in one tool, then copy files and data into another system by hand. That process took time, created mistakes in product names and colors, and made it hard to know if enough designs were available for each batch.

With DesignBridge, she starts extraction, reviews the output in a clean Designs Page, and applies approved records directly into the automation database. The app calculates whether the design pool is sufficient, prevents duplicate use in the same batch, and makes every step visible.

As a result, Samira runs automation with more confidence, Youssef spends less time fixing data issues, and the team can move faster with fewer errors. The business gains a repeatable workflow that can later be packaged into a single deliverable once integration testing is complete.

User-Centric Metrics

  • At least 85% of users complete extract, review, apply, and run without assistance.
  • Average time from extraction start to first approved Apply under 15 minutes for standard batches.
  • Reduction of mapping corrections after Apply by 50% within 3 months.
  • At least 90% of batch shortage warnings are understood and acted on correctly by users.
  • Design preview load time under 2 seconds for typical batches.

Business Metrics

  • 70% reduction in manual handoff work within 60 days.
  • 20% improvement in batch completion speed within the first quarter.
  • 80% adoption among current automation users by the end of the pilot.
  • Lower support requests related to data mismatch by 40% after launch.

Technical Metrics

  • 99.5% monthly uptime for the integration workflow.
  • Under 300 ms UI response for common actions like filtering and opening a record.
  • Successful database write rate above 99% for valid records.
  • No critical security incidents during pilot testing.

Tracking Plan

  • Track extraction_started when a user launches a job.
  • Track extraction_completed with counts of profiles, designs, and failures.
  • Track review_edit_saved when a user corrects metadata or mapping.
  • Track apply_to_database_clicked and apply_to_database_succeeded.
  • Track assignment_mode_selected for Random Designs or Next Designs.
  • Track automation_run_started and automation_run_failed or automation_run_succeeded.
  • Track shortage_warning_shown when available designs are below required total.

Technical Needs

  • Electron for the desktop wrapper if an EXE path is pursued.
  • Node.js UI layer for the new dashboard and workflow control.
  • Python service or subprocess bridge for the existing Automation Core.
  • SQLite for local testing, with a path to PostgreSQL if multi-user needs grow.
  • A clear file-based contract for PNG output and extracted metadata.
  • Queue-based job handling to support extraction progress and retries.
  • Basic log aggregation for batch status and error visibility.

Integration Points

  • Existing Python Automation Core.
  • Design PNG Extractor output files.
  • Local or shared Database used by automation.
  • Node.js to Python communication via subprocess, IPC, or CDP-like coordination.
  • File system access for output folders and logs.

Data Storage & Privacy

  • Store only the minimum metadata needed for automation and review.
  • Keep PNG files and extracted data in controlled folders with clear naming.
  • Restrict database access to approved users or local operators.
  • Support deletion of batch data when a job is removed, if requested.
  • Treat customer design assets as sensitive operational data and avoid unnecessary duplication.

Scalability & Performance

  • Support batch sizes large enough for 100 profiles and 10,000 design assignments in testing.
  • Keep the UI responsive while extraction and database writes run in the background.
  • Allow up to 5 tabs in parallel for pilot performance tests.
  • Use pagination or virtual lists for large Designs Page datasets.

Potential Challenges

  • Extractor and Python core may use incompatible data formats; mitigate with a small shared mapping contract and ZIP-based integration tests.
  • Duplicate design assignment could confuse users; mitigate with batch-level duplicate checks and a clear reuse confirmation step.
  • Parallel tab processing may destabilize the app; mitigate by starting with one tab and scaling to five only after stable results.
  • Database field mismatches may cause bad automation runs; mitigate with review, mapping validation, and blocked Apply on required-field errors.
  • All-in-one EXE packaging may add deployment complexity; mitigate by first shipping a ZIP test build and only then evaluating packaging.

Team & resourcing - Small team: 2 engineers, 1 designer, part-time PM, with support from the existing automation owner.

Phase 1: Workflow Validation · Weeks 1–2

  • Review current Extractor and Automation v4.3 behavior.
  • Confirm data format, folder structure, and integration assumptions.
  • Build a ZIP-based test plan and sample dataset for client review.

Phase 2: MVP Integration · Weeks 3–5

  • Scraper Page with output folder selection and extraction controls.
  • Database apply flow with basic review and mapping.
  • Designs Page with preview, edit, and save.
  • Logs and status panel for extraction and Apply.

Phase 3: Assignment and Automation Testing · Weeks 6–7

  • Design assignment calculations and shortage warnings.
  • Random Designs and Next Designs modes.
  • Node.js to Python integration test using subprocess or IPC.
  • Pilot test with up to 5 tabs in controlled conditions.

Phase 4: Packaging Decision · Weeks 8–9

  • Stabilized integration build.
  • Performance and error review report.
  • Decision on all-in-one EXE feasibility after ZIP testing.
  • Final client-ready handoff for the chosen deployment path.

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a desktop-first web app called DesignBridge for integrating a Design PNG Extractor with an existing Automation Dashboard v4.3. Use a clean white UI with dark navy headings, blue section numbers/dividers, and simple tables. The app must support a workflow: Extract Designs -> Save PNG + Data -> Review & Mapping -> Apply to Database -> Designs Page -> Run Automation.

Core screens:
1) Scraper Page: Start Extraction, stop/pause controls, output folder picker, progress bar, job status, logs.
2) Output Settings: choose where PNG and extracted data are saved.
3) Statistics panel: total profiles, total extracted designs, designs per profile, required total designs, shortage warnings.
4) Designs Page: preview PNGs, view/edit metadata, supported products, product colors, save changes.
5) Data Mapping: map extracted product/color names to automation database fields, validate required fields.
6) Apply to Database: write approved records into the automation database, show success/fail counts.
7) Run Automation: trigger the existing Python automation core after apply succeeds.
8) Logs & Status: show progress, errors, completed steps, and failed records.

Business rules:
- Support Random Designs and Next Designs assignment modes.
- Prevent duplicate use of the same design within one assignment batch unless the user explicitly approves reuse.
- If designs are insufficient for the requested batch, show a shortage warning and do not duplicate silently.
- Allow review and edit before Apply.
- The app should be ready for ZIP-based integration testing first, with a later option to bundle into one EXE.
- Test integration with Node.js UI and Python automation core using subprocess or IPC.
- Allow pilot testing with up to 5 tabs in parallel, but make one-tab operation the default.

Data model should include: Batch, Profile, Design, ExtractedFile, Metadata, MappingRule, Assignment, ApplyJob, AutomationRun, and LogEntry.

Recommended stack: Electron or Next.js frontend for the desktop UI, Node.js orchestration, Python subprocess bridge, SQLite for local storage in MVP, and optional PostgreSQL later. Add file system storage for PNG outputs and extracted JSON/CSV-like metadata files. Build reusable table components, validation states, toast alerts, and a job queue for extraction and automation tasks.

Implement simple analytics events for extraction_started, extraction_completed, review_edit_saved, apply_to_database_clicked, apply_to_database_succeeded, assignment_mode_selected, automation_run_started, and shortage_warning_shown.

Prioritize reliability, clear user feedback, and easy-to-understand interactions for non-technical users. Generate the full app structure, pages, data models, sample components, and mock data necessary to demo the end-to-end workflow.

Business Idea

# Cahier de Charge – Design Extractor Integration Create a **short, professional Cahier de Charge (maximum 2 pages)** for a new version of an existing automation application. Use the uploaded TeePublic Cahier de Charge as a visual reference. ## Language & Style * Write mainly in **Moroccan Darija**, using Arabic script. * Keep technical terms in English when necessary, such as UI, Dashboard, Extractor, Database, Integration, and Automation. * Make it easy for a non-technical client to understand. * Use short explanations, clear tables, and bullet points. * Avoid long technical details, code, JSON structures, and programming jargon. * Keep the document concise, organized, and client-friendly. --- ## 1. Project Role & Goal الهدف هو ندمجو **Design PNG Extractor** مع الـ Automation Dashboard v4.3 الموجود من قبل. | Component | Role | | ------------------------ | ------------------------------------------------------------------------------- | | Design Extractor | استخراج صور PNG ومعلومات التصاميم: Metadata، Supported Products، Product Colors | | Existing Automation v4.3 | استعمال البيانات المستخرجة وتشغيل الـ Automation | | Database | حفظ وتنظيم البيانات باش تكون سهلة للعرض والتعديل والاستعمال | | New UI | التحكم فـ Extraction، مراجعة البيانات، وتطبيقها فالـ Automation | **النتيجة المطلوبة:** تطبيق واحد فيه Extractor + Database + Automation Dashboard. --- ## 2. Integration & Merge Workflow شرح الـ workflow بهاد الترتيب: **Extract Designs → Save PNG + Data → Review & Mapping → Apply to Database → Designs Page → Run Automation** بالدارجة: 1. المستخدم كيبدا استخراج التصاميم. 2. البرنامج كيحفظ الصور والمعلومات المستخرجة. 3. المستخدم يراجع البيانات ويتأكد من أسماء المنتجات والألوان. 4. كيدير Apply باش تتحفظ البيانات فالـ database ديال automation. 5. التصاميم كيبانو فالـ Designs Page، ويمكن يشوفهم ويعدلهم. 6. يقدر يشغل Automation بالبيانات الجديدة. خاصنا أولاً نفهمو كيفاش خدام الـ Extractor وكيفاش كيتواصل مع الـ Python Automation Core، ومن بعد نجربو الدمج. **Plan:** نوجدو ZIP فيه المكونات، نجربو extraction وdatabase integration وautomation، ومن بعد نشوفو إمكانية جمع كلشي فـ `.exe` واحد. --- ## 3. New UI – Features Table صايب جدول واضح فيه كل UI section والدور ديالو: | UI Section | Details / Role | | ----------------- | ----------------------------------------------------------------------- | | Scraper Page | Start Extraction، اختيار Output Folder، ومتابعة Progress | | Output Settings | تحديد فين يتحفظو PNG images وExtracted Data | | Statistics | Total Profiles، Total Designs Extracted، Designs per Profile | | Design Assignment | تحديد شحال من design لكل profile | | Assignment Mode | Random Designs أو Next Designs | | Apply to Database | إدخال البيانات المستخرجة للـ automation database | | Designs Page | Preview الصور، عرض البيانات، Edit وSave | | Data Mapping | مطابقة أسماء المنتجات والألوان مع البيانات اللي كيعتمد عليها automation | | Run Automation | تشغيل الـ automation من بعد ما يكمل extraction وApply | | Logs & Status | عرض التقدم، الأخطاء، والعمليات اللي نجحات أو فشلات | --- ## 4. Design Assignment Example | Item | Example | | ----------------------- | ------: | | Total Profiles | 100 | | Total Extracted Designs | 1,000 | | Designs per Profile | 100 | | Total Designs Required | 10,000 | البرنامج خاصو يحسب العدد المطلوب ويبين واش كاينين designs كافيين. * Random: يختار designs بشكل عشوائي. * Next: ياخذ designs بالتتابع. * خاصنا نتفاداو تكرار نفس design بين profiles فـ نفس assignment batch. * إلا ماكفاوش designs، البرنامج يوضح النقص ومايديرش duplication بلا موافقة المستخدم. --- ## 5. Integration & Performance – To Test | Feature | Plan | | ---------------- | --------------------------------------------------- | | Node.js + Python | ربط الـ Extractor مع الـ Automation Core | | CDP / Subprocess | دراسة طريقة التواصل بين المكونات | | Multiprocessing | تجربة معالجة حتى 5 tabs فـ نفس الوقت | | Database Mapping | التأكد أن أسماء المنتجات والألوان كيتربطو بشكل صحيح | | All-in-One EXE | دراسة إمكانية تجميع التطبيق فـ ملف واحد | هاد الميزات خاصها تجربة قبل ما نأكدو أنها غادي تخدم بالشكل النهائي. --- ## 6. Questions – Decisions Before Development دير جدول ديال الأسئلة اللي خاصنا نجاوبو عليها قبل ما نبداو الدمج. | Question | Options / Decision | | ---------------------------------------------------------- | ------------------------------ | | واش نبدلو Scraper Page القديمة ولا نزيدو Page جديدة؟ | Replace / Add New Page | | واش نخليو Output ديال PNG وData فـ نفس folder؟ | Same Folder / Separate Folders | | واش Apply للـ database يكون Manual ولا Automatic؟ | Manual / Automatic / Both | | واش نشغلو Automation مباشرة من بعد extraction؟ | Yes / No / Optional | | واش نحتاجو Preview وEdit قبل Apply؟ | Yes / No | | واش نخدمو بـ 5 tabs من البداية ولا نبداو بـ tab واحد؟ | 1 Tab First / Test 5 Tabs | | واش ندمجو كلشي فـ EXE واحد من البداية؟ | After ZIP Testing / Other Plan | | واش نسمحو بإعادة استعمال designs فـ assignment batch جديد؟ | Yes / No / Ask Before Reuse | أي نقطة مازال ما تقرراتش، كتب حدّاها **To Confirm**. --- ## 7. Development Plan 1. نفهمو ونراجعو كيفاش خدام الـ Extractor وAutomation v4.3. 2. نجربو extraction ونشوفو شكل البيانات والـ PNG output. 3. نوجدّو ZIP للتجربة مع client. 4. نختبرو Integration، Database، وRun Automation. 5. نجربو Multiprocessing ديال 5 tabs. 6. من بعد نجاح الاختبارات، ندرسو ونوجدو All-in-One `.exe`. **Final Goal:** واجهة وحدة وسهلة، كتسمح للمستخدم يستخرج التصاميم، يراجع البيانات، يطبقها فالـ database، ويشغل automation. --- ## Visual Design * Follow the uploaded PDF's style. * Maximum 2 pages. * Dark navy headings, blue section numbers and divider lines. * White background, clean spacing. * Use tables for UI details, integration, and decision questions. * Use simple arrows for the workflow. * Keep the Darija explanations short and clear. * Do not add prices, deadlines, or features that were not provided.

Make My PRD

Design by The Resonance | Powered by GPC – The AI Transformation Company

    PRD: # Cahier de Charge – Design Extractor...