Generate Web Design Wireframes

This skill helps generate basic wireframes for web pages based on a textual description, focusing on common UI elements and their arrangement.

תחום: עיצוב

מתי להשתמש

Use this skill when you need a quick visual representation of a web page layout from a textual brief, prior to detailed design.

תגיות: web-design, wireframe, ui-design, layout-generation

SKILL.md

--- name: Generate Web Design Wireframes description: This skill helps generate basic wireframes for web pages based on a textual description, focusing on common UI elements and their arrangement. --- ## Overview This skill takes a natural language description of a web page and translates it into a simplified textual wireframe. It focuses on identifying common web UI components such as headers, navigation, content sections (hero, features, testimonials), footers, and their relative placements. The output is a clear, text-based representation of the page's structure, suitable for early-stage design discussions. ## When to use Invoke this skill when you need to rapidly prototype or visualize a web page layout from a textual brief. It is ideal for initial design conceptualization, communicating spatial relationships of elements, and gathering feedback before investing time in high-fidelity mockups. Use it to quickly explore different structural ideas or to ensure alignment on the basic layout of a new web page or section. ## How it works 1. **Analyze the Request:** The skill first parses your input to identify key web page elements and their desired positions or relationships. 2. **Identify Components:** It recognizes common web components like `[Header]`, `[Navigation Bar]`, `[Hero Section]`, `[Content Grid]`, `[Call to Action]`, `[Testimonials]`, `[Contact Form]`, `[Footer]`, etc. 3. **Structure the Wireframe:** Based on the identified components and their described arrangement, the skill constructs a hierarchical and spatial text-based representation. 4. **Output Textual Wireframe:** The final output is a clear, ASCII-art style or bullet-point structural outline of the web page. ## Example usage **User Input:** "I need a homepage wireframe. Start with a prominent header and a top navigation bar. Below that, a hero section with a large image and a call to action button. Then, a section showcasing three product features in a grid, followed by client testimonials. End with a simple footer containing contact information." **Expected Skill Output:** ``` +-----------------------------------+ | [Header] | +-----------------------------------+ | [Navigation Bar] | +-----------------------------------+ | | | [Hero Section] | | (Large Image + CTA) | | | +-----------------------------------+ | | | [Product Features] | | (Grid: 3 items) | | | +-----------------------------------+ | | | [Client Testimonials] | | | +-----------------------------------+ | [Footer] | | (Contact Information) | +-----------------------------------+ ``` ## References * [Web Design Wireframe Best Practices](https://www.nngroup.com/articles/wireframes-good-bad-ugly/) * [Basic UI Components for Web](https://material.io/design/components/) * [Understanding Web Page Layouts](https://www.smashingmagazine.com/2020/09/web-design-layouts/)