Generate Web Design Wireframes from User Stories

This skill automatically generates low-fidelity web design wireframes based on provided user stories, accelerating the initial design phase.

תחום: עיצוב

מתי להשתמש

Use this skill when you have a set of user stories and need to quickly visualize potential page layouts or user flows in a web design project.

תגיות: web-design, wireframing, ux, ai-design-assistant

SKILL.md

--- name: Generate Web Design Wireframes from User Stories description: This skill automatically generates low-fidelity web design wireframes based on provided user stories, accelerating the initial design phase. --- ## Overview This skill streamlines the web design process by converting narrative user stories into basic, low-fidelity wireframes. It helps designers and product managers rapidly iterate on concepts and validate user flows before investing time in high-fidelity designs. ## When to use Invoke this skill when you are in the early stages of a web development project and have established user stories. It's particularly useful for quickly generating initial visual representations of how users might interact with a website or application, facilitating early feedback and alignment. ## How it works 1. **Input User Stories**: Provide a list of user stories, each describing a specific user interaction or feature requirement for the web application. 2. **Identify Key Elements**: The AI analyzes the user stories to identify common UI components (e.g., navigation, forms, buttons, content blocks) and their relationships. 3. **Propose Layouts**: Based on identified elements and typical web design patterns, the skill generates several potential wireframe layouts. 4. **Output Wireframes**: The wireframes are presented as simple textual or markdown-based representations, illustrating the placement of key components and basic user flow. ## Example usage ```claude User: I need some wireframes for a new e-commerce product page based on these user stories: - As a shopper, I want to see product images so I can visually assess the item. - As a shopper, I want to view the product price so I know if I can afford it. - As a shopper, I want to read product descriptions so I can learn more about the item's features. - As a shopper, I want to add the product to my cart so I can purchase it later. - As a shopper, I want to see related products so I can discover alternative options. Claude, generate web design wireframes from these user stories. ``` ## References * [Nielsen Norman Group - Wireframes](https://www.nngroup.com/articles/wireframes/) * [UXPin - The Future of AI in Wireframing](https://www.uxpin.com/studio/blog/the-future-of-ai-in-wireframing/)