Generate Figma Concepts from PRD

Generates initial Figma design concepts based on a given Product Requirements Document (PRD) to accelerate the design process.

תחום: ניהול מוצר

מתי להשתמש

Use when you have a completed PRD and need to quickly visualize potential user interfaces or flows without waiting for a designer to create initial mockups.

תגיות: product-management, design-acceleration, figma, ai-prototyping, prd-to-design

SKILL.md

--- name: Generate Figma Concepts from PRD description: Generates initial Figma design concepts based on a given Product Requirements Document (PRD) to accelerate the design process. --- ## Overview This skill leverages AI to interpret a Product Requirements Document (PRD) and generate preliminary Figma design concepts. It helps Product Managers rapidly iterate on ideas and communicate visual requirements to designers more effectively, bridging the gap between product strategy and design execution. This is particularly useful in the current AI-accelerated product development landscape where PMs can now create a significant portion of initial design work. ## When to use Invoke this skill when you have a finalized PRD and require quick visual representations or initial low-fidelity mockups of the product's features, user flows, or interfaces. It's ideal for pre-design brainstorms, stakeholder alignment meetings, or for providing a concrete starting point for design teams, thereby reducing initial design cycle time. ## How it works 1. **Input PRD**: Provide the complete Product Requirements Document (PRD) as input, outlining features, user stories, use cases, and any existing brand guidelines or constraints. 2. **Identify Key Elements**: The AI will parse the PRD to identify critical UI elements, user flows, data displays, and interactive components. It will pay close attention to user stories and acceptance criteria to infer design implications. 3. **Propose Layouts and Components**: Based on the identified elements and common UI/UX patterns, the AI will propose several alternative layout structures and specific component suggestions (e.g., buttons, input fields, navigation). 4. **Generate Figma-compatible Output**: The output will be a detailed textual description structured in a way that can be easily translated into Figma or even directly imported by AI-powered design tools (like v0 or Adobe Firefly for UX) to generate visual artifacts. This may include suggested screen names, element types, and their relationships. 5. **Iterate and Refine**: Review the generated concepts, provide feedback, and request iterations. The AI can refine the concepts based on specific instructions like "make the primary action more prominent" or "add a search bar to the header." ## Example usage ```text User: I've attached our PRD for the new "Project Management Dashboard" feature. Can you generate some initial Figma concepts focusing on the main dashboard view and the task creation flow? Ensure the design adheres to a clean, minimalist aesthetic. [Attached: Project_Management_Dashboard_PRD.pdf] ``` ```text AI: Based on your "Project Management Dashboard" PRD, here are initial Figma concept descriptions. These are designed to be easily translated into low-fidelity mockups or further developed with design tools. **Concept 1: Main Dashboard View - Overview Focus** * **Screen Name**: Project Dashboard Overview * **Layout**: Two-column layout. Left sidebar for navigation (Projects, Tasks, Reports, Team). Main content area on the right. * **Main Content Area (Right)**: * **Top Section**: Project title, quick filter/search bar, "Add New Task" button (prominent). * **Middle Section**: Three key performance indicators (KPIs) cards: "Tasks Overdue," "Tasks Due Today," "Completed Tasks This Week." * **Bottom Section**: Table/List view of "My Open Tasks" (Task Name, Due Date, Assignee, Status, Priority). Sortable and filterable. * **Styling Notes**: Clean lines, subtle shadows for cards. Primary action button in a distinct brand color. **Concept 2: Task Creation Flow - Modal First Approach** * **Screen Name**: Create New Task Modal * **Trigger**: Clicking "Add New Task" button from Dashboard. * **Layout**: Central modal overlay. * **Modal Fields**: * Task Name (text input) * Description (multiline text area) * Assignee (dropdown with search) * Due Date (date picker) * Priority (radio buttons: Low, Medium, High) * Project (dropdown, pre-filled if created from project context) * Attachments (file upload area) * "Create Task" button (primary, bottom right) * "Cancel" button (secondary, bottom left) * **Styling Notes**: Modal should have a slight backdrop blur. Clear validation messages for required fields. I recommend starting with these structures in Figma and then adding more detailed visual elements and interactions. Would you like me to elaborate on specific components or suggest alternative navigation patterns? ``` ## References * [AI Isn't Replacing PMs. It's Rewriting the PM–Designer Equation](https://theproductjourney.substack.com/p/ai-isnt-replacing-pms-its-rewriting) * [Superagency in the workplace: Empowering people to unlock AI’s full potential at work](http://mckinsey.com/capabilities/tech-and-ai/our-insights/superagency-in-the-workplace-empowering-people-to-unlock-ais-full-potential-at-work) * [How GenAI reshapes product work](https://www.instagram.com/getproductbuilder/)