ব্যবহারের ক্ষেত্রComputer

একটি র PRD-কে ইন্টারেক্টিভ ডিজাইন টুলে রূপান্তর করুন

Computer PRD-গুলোকে স্বয়ংক্রিয়ভাবে জেনারেট করা UI, সংস্করণ এবং ব্রাঞ্চিং সহ ইন্টারেক্টিভ, এডিটেবল ডিজাইন সিস্টেমে রূপান্তরিত করে।

Computer
কানেক্টর
প্রযুক্তি
ডিজাইন

সংক্ষিপ্ত বিবরণ

Computer শুধু স্ট্যাটিক মকআপ নয়, একটি র PRD-কে সম্পূর্ণ ইন্টারেক্টিভ প্রোডাক্ট ডিজাইন এনভায়রনমেন্টে রূপান্তর করতে পারে। এটি প্রয়োজনীয়তাগুলোকে স্ট্রাকচার্ড স্ক্রিন এবং ফ্লোতে পার্স করে, সামঞ্জস্যপূর্ণ HTML/CSS UI জেনারেট করে এবং টিমগুলোকে স্কোপড এডিট, সংস্করণ ইতিহাস এবং ব্রাঞ্চিং সহ একক ওয়েব অ্যাপের ভেতরেই ডিজাইনগুলো বারবার পরিমার্জন করতে দেয়।

কোয়েরি

Build a fully functional web app called "DesignFlow AI" — an AI-powered design iteration tool that lets a Product Manager go from a PRD (product requirements document) to interactive UI designs and iterate on them in a single session. This should solve the key problems with existing AI design tools: inconsistency across pages, unwanted changes to unrelated sections when editing, lack of version control, no design system enforcement, and poor iterative refinement.

Core requirements:

PRD Input & Parsing

Provide a rich text editor where the user pastes or writes a PRD (or bullet points, user stories, problem statements)

Parse the PRD into structured sections: user roles, screens/pages needed, key flows, data models, and edge cases

Display the parsed breakdown in an editable sidebar so the user can confirm/adjust before generation

AI Design Generation

From the parsed PRD, generate a set of UI screens as interactive HTML/CSS mockups (not images)

Each screen should be rendered in an iframe preview panel

Apply a consistent design system automatically: color palette, typography scale, spacing tokens, component styles. Let the user choose from 3 preset themes (Modern SaaS, Consumer Mobile, Enterprise Dashboard) or define custom brand colors + font

Generate a screen map / sitemap showing all pages and their navigation relationships

Iterative Editing with Scoped Changes (Critical)

Provide a chat-based prompt interface to request changes

Every edit request must be SCOPED: the user selects which screen/section to modify, and the AI ONLY changes that scope. Never touch unrelated screens or sections

Show a visual diff/changelog after each iteration: highlight what changed in green, what was removed in red

Support undo/redo with full version history — a timeline slider that lets the user scrub through every iteration

Version History & Branching

Every prompt and its resulting changes are logged in a version timeline

The user can branch from any version to explore alternative directions

Each version is labeled with the prompt that created it

Multi-Screen Navigation

The generated prototype should have working navigation between screens (clickable links/buttons that navigate between pages)

Provide a thumbnail grid view of all screens for quick overview

Export Options

Export all screens as a single HTML file (self-contained)

Export as PNG screenshots

Copy the underlying HTML/CSS code for any individual screen

UI Layout

Left sidebar: parsed PRD sections + screen list with thumbnails

Center: large preview panel showing the selected screen in an iframe

Right sidebar: chat interface for iterative prompts + changelog

Top bar: theme selector, export buttons, version timeline slider

The layout should be responsive and professional-looking

Tech stack: Use vanilla HTML/CSS/JS or lightweight libraries only (no heavy frameworks that need build steps). For AI text generation, simulate the AI responses with well-crafted template-based generation — since there's no external API access in the sandbox, use intelligent template logic that maps PRD keywords to appropriate UI patterns (e.g., "dashboard" → stats cards + charts + tables; "e-commerce" → product grid + cart + checkout flow; "settings" → form layouts with toggles). Make the templates rich enough that the output feels genuinely useful, not placeholder-y. The app must be fully functional when opened — all buttons, navigation, version history, scoped editing, and export features should work. Prioritize the scoped-editing and version-history features as these are the biggest gaps in existing tools. The app runs in a sandboxed iframe so avoid any features requiring special permissions.

ফলাফল দেখুন

মূল আউটপুট

Computer একটি সম্পূর্ণ কার্যকরী DesignFlow AI ওয়েব অ্যাপ সরবরাহ করেছে যা একটি রিচ টেক্সট এডিটর থেকে PRD নেয়, সেটিকে স্ট্রাকচার্ড এলিমেন্টে পার্স করে এবং বাস্তবসম্মত নেভিগেশনের সাথে যুক্ত রিয়েলিস্টিক HTML/CSS স্ক্রিনের সেটে পরিণত করে।

পার্সিং ফ্লো স্ক্রিন, ইউজার রোল, ফ্লো, ডেটা মডেল এবং এজ কেসগুলোকে সাইডবারে এডিটেবল ট্যাগ-স্টাইল কার্ডে এক্সট্রাক্ট করে যাতে প্রোডাক্ট টিমগুলো ডিজাইন জেনারেট করার আগে স্ট্রাকচার টিউন করতে পারে। আপনি যখন জেনারেট করবেন, তখন DesignFlow AI ধারাবাহিক থিমিং, দেখতে বাস্তবসম্মত ডেটা এবং একটি শেয়ার্ড নেভিগেশন বার সহ একাধিক টাস্ক-ম্যানেজমেন্ট-স্টাইল স্ক্রিন (ড্যাশবোর্ড, টাস্ক বোর্ড, টাস্ক ডিটেইল, টিম মেম্বারস, সেটিংস) তৈরি করবে যা আপনাকে পেজগুলোর মধ্যে ক্লিক করার অনুমতি দেয়।

অ্যাপটি তিনটি প্রিসেট থিম প্লাস কাস্টম কালার এবং ফন্টের মাধ্যমে ডিজাইন কনসিস্টেন্সি প্রয়োগ করে এবং এক ক্লিকে টাইপোগ্রাফি, স্পেসিং ও কম্পোনেন্টের ক্ষেত্রে সেই টোকেনগুলো প্রয়োগ করে। স্কোপড এডিটিং একটি বাধ্যতামূলক স্কোপ সিলেক্টর হিসেবে বাস্তবায়িত করা হয়েছে যেখানে প্রতিটি প্রম্পট একটি নির্দিষ্ট স্ক্রিন এবং সেকশনকে লক্ষ্য করে; হুডের নিচে, অ্যাপটি ডেটা-সেকশন অ্যাট্রিবিউট ব্যবহার করে শুধুমাত্র নির্বাচিত অঞ্চলটিকে আলাদা করে এবং পরিবর্তন করে, অন্যান্য সমস্ত স্ক্রিনকে অক্ষত রাখে।

প্রতিটি এডিট সংযোজন এবং অপসারণ হাইলাইট করে একটি ভিজ্যুয়াল ডিফ জেনারেট করে, সংস্করণ টাইমলাইনে প্রম্পট এবং ফলাফল লগ করে এবং একটি টাইমলাইন স্লাইডারের মাধ্যমে যেকোনো পূর্ববর্তী সংস্করণ থেকে আনডু/রিডো এবং ব্রাঞ্চিং সমর্থন করে। একটি সাইটম্যাপ/ম্যাপ ভিউ, থাম্বনেইল গ্রিড এবং এক্সপোর্ট ইউটিলিটি (স্বয়ংসম্পূর্ণ HTML, PNG স্ক্রিনশট, প্রতি-স্ক্রিনের কোড কপি) ওয়ার্কফ্লো-কে সম্পূর্ণ করে, যা ভ্যানিলা JS দিয়ে তৈরি যাতে স্যান্ডবক্সড আইফ্রেমের ভেতরে সবকিছু মসৃণভাবে চলে।

পরামর্শ

PRD অনুমানগুলো কড়া করুন – Computer-কে ইনপুটের আরও আকার দিন, উদাহরণস্বরূপ: “ডিফল্ট ডোমেন হিসেবে SaaS প্রোডাক্টিভিটি অ্যাপ ধরে নিন; PRD অস্পষ্ট হলে ড্যাশবোর্ড + ডিটেইল + সেটিংস প্যাটার্নগুলোকে অগ্রাধিকার দিন।”
এডিট সেমান্টিকস সীমিত করুন – কোন ধরনের স্কোপড এডিট সবচেয়ে বেশি গুরুত্বপূর্ণ তা নির্দিষ্ট করুন, উদাহরণস্বরূপ: “স্পষ্টভাবে অনুরোধ করা না হলে মাইক্রো-কপি এডিটের চেয়ে লেআউট এবং হায়ারার্কি পরিবর্তনকে (সেকশন, কার্ড, প্যানেল) অগ্রাধিকার দিন।”
এক্সপোর্ট গন্তব্য নির্ধারণ করুন – Computer-কে বলুন আপনি কীভাবে আউটপুট ব্যবহার করার পরিকল্পনা করছেন, উদাহরণস্বরূপ: “বড় ধরনের রিফ্যাক্টর ছাড়াই আমাদের ডিজাইন সিস্টেম রিপো এবং ফ্রন্ট-এন্ড কোডবেসে সহজেই কপি করা যায় এমনভাবে এক্সপোর্ট করা HTML/CSS অপ্টিমাইজ করুন।”

একটি র PRD-কে ইন্টারেক্টিভ ডিজাইন টুলে রূপান্তর করুন

সংক্ষিপ্ত বিবরণ

মূল আউটপুট

পরামর্শ

Build a customer messaging platform

Computer Slack-এ দৈনিক পণ্য উন্নয়নের ডাইজেস্ট পাঠায়

সাপোর্ট টিকিট থেকে একটি PRD তৈরি করুন

পরবর্তী ধাপে যেতে প্রস্তুত?

সংক্ষিপ্ত বিবরণ

মূল আউটপুট

পরামর্শ

সম্পর্কিত ব্যবহারের ক্ষেত্র

Build a customer messaging platform

Computer Slack-এ দৈনিক পণ্য উন্নয়নের ডাইজেস্ট পাঠায়

সাপোর্ট টিকিট থেকে একটি PRD তৈরি করুন

পরবর্তী ধাপে যেতে প্রস্তুত?