תרחישי שימושComputer

הפוך מסמך PRD גולמי לכלי עיצוב אינטראקטיבי

Computer הופכת מסמכי PRD למערכות עיצוב אינטראקטיביות הניתנות לעריכה עם ממשקי משתמש מופקים אוטומטית, גרסאות ויצירת ענפים.

Computer
מחברים
טכנולוגיה
עיצוב

סקירה כללית

Computer יכול להפוך מסמך דרישות מוצר (PRD) גולמי לסביבת עיצוב מוצר אינטראקטיבית מלאה, ולא רק למודלים סטטיים (mockups). המערכת מנתחת דרישות למסכים ולת זרימות מובנים, מייצרת ממשקי HTML/CSS עקביים, ומאפשרת לצוותים לשפר עיצובים באיטרציות עם עריכות ממוקדות, היסטוריית גרסאות ויצירת ענפים (branching), והכל בתוך אפליקציית אינטרנט אחת.

שאילתה

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 מייצרת מספר מסכים בסגנון ניהול משימות (לוח בקרה, לוח משימות, פרטי משימה, חברי צוות, הגדרות) עם עיצוב עקבי, נתונים בעלי מראה אמיתי וסרגל ניווט משותף המאפשר לעבור בלחיצה בין עמודים.

האפליקציית אוכפת עקביות עיצובית באמצעות שלושה ערכות נושא מוגדרות מראש בתוספת צבעים וגופנים מותאמים אישית, ומחילה אסימונים אלו על פני טיפוגרפיה, מרווחים ורכיבים בלחיצה אחת. עריכה ממוקדת מיושמת כבורר טווח חובה שבו כל הנחיה מכוונת למסך ולסقطור ספציפיים; מתחת למכסה המנוע, האפליקציה משתמשת בתכונות data‑section כדי לבודד ולשנות רק את האזור הנבחר, ולהשאיר את כל שאר המסכים ללא נגיעה.

כל עריכה מייצרת הבדל חזותי (diff) עם הוספות והסרות המסומנות בסימון בולט, מתעדת את ההנחיה והתוצאה בציר זמן של גרסאות, ותומכת בביטול/חזרה (undo/redo) ויצירת ענפים מכל גרסה קודמת באמצעות מחוון ציר זמן. תצוגת מפת אתר/מפה, רשת תמונות ממוזערות וכוחיות ייצוא (HTML עצמאי, צילומי מסך PNG, העתקת קוד לכל מסך) משלימים את תהליך עבודה, והכל בנוי באמצעות Vanilla JS כך שהכל פועל בצורה חלקה בתוך iframe מוגן (sandboxed).

טיפים

הדק את הנחות העבודה של ה-PRD – תן ל-Computer יותר צורה לקלט, לדוגמה: "הנח אפליקציות פרודוקטיביות מסוג SaaS כתחום ברירת המחדל; העדף דפוסים של לוח בקרה + פרטים + הגדרות כאשר ה-PRD מעורפל."
הגבל את סמנטיקת העריכה – ציין אילו סוגים של עריכות ממוקדות חשובות ביותר, לדוגמה: "תעדף שינויים בפריסה ובהיאררכיה (קטעים, כרטיסים, לוחות) על פני עריכות מיקרו-טקסט אלא אם כן התבקש במפורש."
הגדר יעדי ייצוא – אמר ל-Computer כיצד אתה מתכנן להשתמש בתוצרים, לדוגמה: "אופטימיזציה של ה-HTML/CSS המיוצא כך שיועתק בקלות למאגר מערכת העיצוב שלנו ולבסיס קוד ה-front-end ללא שינויים ארכיטקטוניים גדולים."

הפוך מסמך PRD גולמי לכלי עיצוב אינטראקטיבי

סקירה כללית

תוצר מרכזי

טיפים

בנה פלטפורמת הודעות לקוחות

Computer שולח תקציר פיתוח מוצר יומי ב-Slack

צור מסמך PRD מתוך פניות תמיכה

מוכנים לצעד הבא?

סקירה כללית

תוצר מרכזי

טיפים

תרחישי שימוש קשורים

בנה פלטפורמת הודעות לקוחות

Computer שולח תקציר פיתוח מוצר יומי ב-Slack

צור מסמך PRD מתוך פניות תמיכה

מוכנים לצעד הבא?