Generate Webflow Component Code

Generates production-ready Webflow component code (HTML, CSS, JavaScript) based on a detailed design brief, leveraging AI-driven best practices for responsiveness and accessibility.

תחום: עיצוב

מתי להשתמש

Use this skill when you need to quickly generate code for a specific Webflow component that adheres to modern design principles, without manual coding.

תגיות: webflow, frontend-development, ui-ux, code-generation, design-to-code

SKILL.md

--- name: Generate Webflow Component Code description: Generates production-ready Webflow component code (HTML, CSS, JavaScript) based on a detailed design brief, leveraging AI-driven best practices for responsiveness and accessibility. --- ## Overview This skill automates the creation of Webflow-compatible HTML, CSS, and JavaScript for various UI components. It takes a comprehensive design brief as input and outputs clean, semantic, responsive, and accessible code, ready for direct integration into a Webflow project. ## When to Use Invoke this skill when you have a clear design specification for a Webflow component (e.g., a hero section, a pricing table, a navigation bar) and want to accelerate the development process by generating the initial codebase, ensuring high standards of modern web design and accessibility. ## How it Works 1. User provides a detailed design brief including component type, visual specifications (colors, fonts, spacing, imagery placeholders), interaction details, responsiveness requirements, and accessibility considerations. 2. The AI processes the brief, translating design elements into appropriate semantic HTML structures. 3. It then generates corresponding CSS, incorporating responsive design principles (e.g., Flexbox, Grid, media queries) and adhering to BEM or similar naming conventions for maintainability. 4. If dynamic behavior is required, relevant vanilla JavaScript is produced, ensuring efficient DOM manipulation and event handling. 5. The output is presented as a set of separate code blocks for HTML, CSS, and JavaScript, ready for copying and pasting into Webflow's custom code sections or direct element embedding. 6. The generated code includes comments explaining key sections and styling decisions. ## Example Usage **User Input:** "Generate a responsive hero section for a SaaS landing page. It should have a full-width background image placeholder, a centered headline in H1 (`font-size: 3em`, `color: #333`), a sub-headline in P (`font-size: 1.2em`, `color: #666`), and two call-to-action buttons below them. The first button should be primary (`background: #007bff`, `color: #fff`, rounded corners), and the second secondary (`background: none`, `border: 1px solid #007bff`, `color: #007bff`). Ensure it's fully responsive and accessible, with proper semantic HTML." **Claude Output:** ```html <section class="hero-section"> <div class="hero-background-image"> <!-- Placeholder for your background image --> </div> <div class="hero-content"> <h1 class="hero-headline">Your Catchy Headline Here</h1> <p class="hero-subheadline">A concise and compelling sub-headline that explains your unique value proposition.</p> <div class="hero-cta-buttons"> <a href="#" class="button button-primary">Get Started</a> <a href="#" class="button button-secondary">Learn More</a> </div> </div> </section> ``` ```css .hero-section { position: relative; display: flex; justify-content: center; align-items: center; min-height: 500px; /* Adjust as needed */ color: #fff; /* Default text color over image */ text-align: center; overflow: hidden; } .hero-background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://via.placeholder.com/1920x1080/007bff/ffffff?text=Background+Image') center/cover no-repeat; /* Replace with your image */ z-index: -1; } .hero-content { position: relative; z-index: 1; max-width: 960px; padding: 20px; } .hero-headline { font-size: 3em; color: #333; margin-bottom: 0.5em; } .hero-subheadline { font-size: 1.2em; color: #666; margin-bottom: 1.5em; } .hero-cta-buttons { display: flex; justify-content: center; gap: 20px; } .button { display: inline-block; padding: 12px 24px; border: none; border-radius: 8px; text-decoration: none; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .button-primary { background: #007bff; color: #fff; } .button-primary:hover { background: #0056b3; } .button-secondary { background: none; border: 1px solid #007bff; color: #007bff; } .button-secondary:hover { background: rgba(0, 123, 255, 0.1); color: #007bff; } /* Responsive Styles */ @media (max-width: 768px) { .hero-headline { font-size: 2.5em; } .hero-subheadline { font-size: 1em; } .hero-cta-buttons { flex-direction: column; gap: 15px; } .button { width: 80%; margin: 0 auto; } } @media (max-width: 480px) { .hero-headline { font-size: 2em; } .hero-content { padding: 15px; } } ``` ```javascript // No specific JavaScript required for this basic hero section beyond Webflow's built-in interactions. // If you were to add dynamic elements like a video player or custom animations, // related JavaScript would be provided here. ``` ## References * [Webflow University](https://university.webflow.com/) * [Webflow Custom Code Documentation](https://university.webflow.com/lesson/custom-code) * [MDN Web Docs - HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) * [MDN Web Docs - CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) * [W3C Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/)