Περιπτώσεις χρήσηςComputer

Μετατρέψτε ένα ακατέργαστο PRD σε ένα διαδραστικό εργαλείο σχεδίασης

Το Computer μετατρέπει τα PRD σε διαδραστικά, επεξεργάσιμα σχεδιαστικά συστήματα με αυτόματα παραγόμενα UI, εκδόσεις και διακλαδώσεις.

Computer
Σύνδεσμοι
Τεχνολογία
Σχεδίαση

Επισκόπηση

Το Computer μπορεί να μετατρέψει ένα ακατέργαστο PRD σε ένα πλήρως διαδραστικό περιβάλλον σχεδίασης προϊόντος, όχι απλώς σε στατικές μακέτες. Αναλύει τις απαιτήσεις σε δομημένες οθόνες και ροές, παράγει συνεπή UI σε HTML/CSS και επιτρέπει στις ομάδες να βελτιώνουν επαναληπτικά τα σχέδια με στοχευμένες τροποποιήσεις, ιστορικό εκδόσεων και διακλαδώσεις, όλα μέσα σε μία ενιαία εφαρμογή web.

Ερώτημα

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 παρήγαγε μια πλήρως λειτουργική εφαρμογή web DesignFlow AI που λαμβάνει ένα PRD από έναν επεξεργαστή εμπλουτισμένου κειμένου, το αναλύει σε δομημένα στοιχεία και το μετατρέπει σε ένα σύνολο ρεαλιστικών οθονών HTML/CSS που συνδέονται μεταξύ τους με πραγματική πλοήγηση.

Η ροή ανάλυσης εξάγει οθόνες, ρόλους χρηστών, ροές, μοντέλα δεδομένων και οριακές περιπτώσεις σε επεξεργάσιμες κάρτες σε στυλ ετικέτας σε μια πλαϊνή μπάρα, ώστε οι ομάδες προϊόντος να μπορούν να ρυθμίσουν τη δομή πριν από τη δημιουργία σχεδίων. Όταν κάνετε δημιουργία, το DesignFlow AI παράγει πολλαπλές οθόνες σε στυλ διαχείρισης εργασιών (Dashboard, Πίνακας Εργασιών, Λεπτομέρειες Εργασίας, Μέλη Ομάδας, Ρυθμίσεις) με συνεπή θεματική εμφάνιση, δεδομένα που μοιάζουν αληθινά και μια κοινόχρηστη γραμμή πλοήγησης που σας επιτρέπει να κάνετε κλικ ανάμεσα στις σελίδες.

Η εφαρμογή επιβάλλει τη συνέπεια του σχεδιασμού μέσω τριών προκαθορισμένων θεμάτων συν προσαρμοσμένα χρώματα και γραμματοσειρές, και εφαρμόζει αυτά τα tokens σε τυπογραφία, αποστάσεις και στοιχεία με ένα κλικ. Η στοχευμένη επεξεργασία υλοποιείται ως ένας υποχρεωτικός επιλογέας πεδίου εφαρμογής όπου κάθε προτροπή στοχεύει σε μια συγκεκριμένη οθόνη και ενότητα· κάτω από το καπό, η εφαρμογή χρησιμοποιεί χαρακτηριστικά data-section για να απομονώσει και να τροποποιήσει μόνο την επιλεγμένη περιοχή, αφήνοντας όλες τις άλλες οθόνες άθικτες.

Κάθε επεξεργασία παράγει μια οπτική διαφορά (diff) με τις προσθήκες και τις αφαιρέσεις επισημασμένες, καταγράφει την προτροπή και το αποτέλεσμα σε ένα χρονοδιάγραμμα εκδόσεων και υποστηρίζει αναίρεση/επανάληψη και διακλάδωση από οποιαδήποτε προηγούμενη έκδοση μέσω ενός ρυθμιστικού χρονοδιαγράμματος. Μια προβολή χάρτη ιστότοπου/χάρτη, ένα πλέγμα μικρογραφιών και βοηθητικά προγράμματα εξαγωγής (αυτοδύναμη HTML, στιγμιότυπα οθόνης PNG, αντιγραφή κώδικα ανά οθόνη) ολοκληρώνουν τη ροή εργασίας, όλα χτισμένα με vanilla JS ώστε τα πάντα να εκτελούνται ομαλά μέσα σε ένα απομονωμένο iframe.

Συμβουλές

Αυστηροποίηση υποθέσεων PRD – Δώστε στο Computer περισσότερο σχήμα στην είσοδο, για παράδειγμα: «Θέστε ως προεπιλεγμένο τομέα τις εφαρμογές παραγωγικότητας SaaS· προτιμήστε τα μοτίβα dashboard + λεπτομέρειες + ρυθμίσεις όταν το PRD είναι ασαφές».
Περιορισμός σημασιολογίας επεξεργασίας – Καθορίστε ποιοι τύποι στοχευμένων τροποποιήσεων έχουν τη μεγαλύτερη σημασία, για παράδειγμα: «Δώστε προτεραιότητα στις αλλαγές διάταξης και ιεραρχίας (ενότητες, κάρτες, πλαίσια) έναντι των τροποποιήσεων μικροκειμένου, εκτός εάν ζητηθεί ρητά».
Ορισμός προορισμών εξαγωγής – Πείτε στο Computer πώς σκοπεύate να χρησιμοποιήσετε τα αποτελέσματα, για παράδειγμα: «Βελτιστοποιήστε την εξαγόμενη HTML/CSS ώστε να αντιγράφεται εύκολα στο αποθετήριο του σχεδιαστικού μας συστήματος και στη βάση κώδικα front-end χωρίς σημαντικές ανακατασκευές».

Μετατρέψτε ένα ακατέργαστο PRD σε ένα διαδραστικό εργαλείο σχεδίασης

Επισκόπηση

Βασικό Παραδοτέο

Συμβουλές

Δημιουργήστε μια πλατφόρμα μηνυμάτων πελατών

Το Computer στέλνει καθημερινή σύνοψη ανάπτυξης προϊόντος στο Slack

Δημιουργήστε ένα PRD από δελτία υποστήριξης

Έτοιμοι για το επόμενο βήμα;

Επισκόπηση

Βασικό Παραδοτέο

Συμβουλές

Σχετικές περιπτώσεις χρήσης

Δημιουργήστε μια πλατφόρμα μηνυμάτων πελατών

Το Computer στέλνει καθημερινή σύνοψη ανάπτυξης προϊόντος στο Slack

Δημιουργήστε ένα PRD από δελτία υποστήριξης

Έτοιμοι για το επόμενο βήμα;