Generate Web Design Mockups from Wireframes

This skill takes a textual description of a conceptual web design wireframe and generates a high-fidelity visual mockup, filling in design details and adhering to modern UI/UX principles.

תחום: עיצוב

מתי להשתמש

Use this skill when you have a basic wireframe idea and need to quickly visualize a more complete web design, exploring different aesthetic and functional layouts.

תגיות: web-design, mockup-generation, ui/ux, design-automation, frontend-design

SKILL.md

--- name: Generate Web Design Mockups from Wireframes description: This skill takes a textual description of a conceptual web design wireframe and generates a high-fidelity visual mockup, filling in design details and adhering to modern UI/UX principles. --- ## Overview This skill streamlines the initial stages of web design by converting textual descriptions of wireframes into detailed, visually appealing mockups. It leverages AI to interpret design intentions, apply common UI/UX patterns, and produce a polished representation ready for feedback or further iteration. This accelerates the design process, allowing designers to focus on higher-level creative decisions. ## When to use Utilize this skill when you have a conceptual wireframe outlined in text and need to quickly generate a visual mockup. This is ideal for early-stage design exploration, client presentations, or when you want to see how different textual descriptions translate into concrete visual designs without manually drawing each element. ## How it works 1. **Input Wireframe Description**: Provide a detailed textual description of your web page wireframe, including sections, components, content ideas, and desired styles (e.g., "A hero section with a large image and headline, followed by a three-column feature section with icons and short descriptions, then a contact form."). Be as specific as possible about the layout and content. 2. **Specify Design Preferences (Optional)**: You can include preferences for color schemes, fonts, overall aesthetic (e.g., "minimalist," "bold," "corporate"), and specific UI components (e.g., "flat buttons," "card-based layout"). 3. **AI Interpretation and Generation**: The AI will parse your description, interpret the spatial relationships and functional requirements, and then generate a high-fidelity visual mockup. This involves selecting appropriate imagery, typography, colors, and component styles. 4. **Review and Refine**: The generated mockup will be presented for your review. You can then provide feedback or modify your initial description to iterate and refine the design until it meets your expectations. ## Example usage ```text Generate a web design mockup for a portfolio website. The homepage should have a full-width hero section with a background image, a prominent "Hello, I'm [Your Name]" headline, and a call-to-action button "View My Work". Below that, a section showcasing recent projects in a grid layout of three columns, each with an image, project title, and a brief description. Finally, a footer with social media links and copyright information. Use a clean, modern aesthetic with a dark blue and white color scheme. ``` ## References * [The State of UX in 2024](https://www.nngroup.com/articles/state-of-ux-2024/) * [Modern Web Design Trends to Watch in 2024](https://www.awwwards.com/blog/web-design-trends/) * [Anthropic Claude Design Tool](https://www.insidehook.com/internet/anthropic-claude-design-ai-released)