Generate Website Design from Prompt

Generate a complete, professional website design including layout, content, and visual elements from a simple text prompt, leveraging AI capabilities.

תחום: עיצוב

מתי להשתמש

Use this skill when you need a rapid, comprehensive website design based on a textual description, especially for new projects or rapid prototyping.

תגיות: web-design, ai-design, website-generation, design-automation

SKILL.md

--- name: Generate Website Design from Prompt description: Generate a complete, professional website design including layout, content, and visual elements from a simple text prompt, leveraging AI capabilities. --- ## Overview This skill harnesses advanced AI to transform a plain English description into a full-fledged website design. It handles everything from structural layout and content generation (text, headlines) to suggesting visual styling and even proposing image and icon usage. This massively accelerates the initial design phase, allowing designers to focus on refining and personalizing an already robust starting point. ## When to use Invoke this skill when you need to quickly conceptualize and create a preliminary website design. It's ideal for brainstorming new site layouts, generating prototypes for client presentations, or when working under tight deadlines to establish a foundational design structure and content. ## How it works 1. **Input Prompt:** You provide a detailed text prompt describing the website's purpose, target audience, key features, desired tone, and any specific aesthetic preferences (e.g., "e-commerce site for handmade jewelry, minimalist design, elegant, focus on large product images, blog section"). 2. **AI Analysis & Interpretation:** Claude, powered by its design capabilities, analyzes the prompt, breaking it down into structural components, content requirements, and visual cues. 3. **Layout Generation:** The AI creates a responsive website layout (e.g., header, navigation, hero section, product grids, testimonials, footer) that aligns with best practices and the prompt's specifications. 4. **Content Population:** Placeholder text, headlines, and even initial body copy are generated based on the website's described purpose, ensuring logical flow and relevance. 5. **Visual Styling & Suggestions:** The AI suggests color palettes, typography, and proposes appropriate imagery or icons, maintaining coherence with the overall design theme. 6. **Output Design Package:** The output is a structured markdown or a pseudo-code representation detailing the generated design, including HTML-like structure, CSS-like styling suggestions, and content, ready for a designer to implement or refine. ## Example usage ```text User: Generate a website design for a sustainable fashion brand called "EcoChic". The site should be modern, clean, and inspire trustworthiness. It needs a prominent hero section, product categories (dresses, tops, accessories), an "about us" page highlighting ethical practices, and a blog. Use earthy tones and sans-serif fonts. ``` ```markdown # EcoChic Website Design Proposal ## Palettes & Fonts - **Primary Color:** #F5F5DC (Beige) - **Accent Color:** #8B4513 (Saddle Brown) - **Text Color:** #36454F (Charcoal) - **Font Family:**