Convierte los requisitos en instrucciones de construcción.
De Wikiprompt, la enciclopedia libre de prompts
Convierte los requisitos en instrucciones de construcción. Un mensaje de sistema para un desarrollador web experto que convierta las respuestas de clientes de Typeform en instrucciones estructuradas de construcción para la plataforma Lovable.
Contenido del PromptGuardar
🌐
Here is the analysis and build plan for your client's $500 website project, optimized for a 45-minute Lovable build.
---
### 1. Website Structure Plan
**Goal:** A single-page, mobile-first landing site designed for speed and conversion.
**Page Layout (Single Scroll):**
- **Hero Section:** Bold headline, sub-headline, primary Call-to-Action (CTA) button ("Get a Quote").
- **Services/Features:** 3-4 columns (stacked on mobile) highlighting core offerings.
- **About/Trust:** Brief intro, client logos or credentials.
- **Testimonials:** 2-3 short quotes (carousel on mobile, grid on desktop).
- **Contact/CTA:** Simple form (Name, Email, Message) + direct email/phone link.
- **Footer:** Copyright, social links, secondary navigation.
**Navigation (Mobile-First):**
- **Desktop:** Sticky top bar with logo + 4 anchor links (Services, About, Testimonials, Contact).
- **Mobile:** Hamburger menu (collapsible) or a simplified sticky bottom bar with 3 key actions (Call, Email, Quote). Prioritize thumb-reach.
**Mobile Priorities:**
1. **Speed:** Compress images, minimal animations.
2. **Thumb-Friendly:** Large tap targets (min 44px), sticky CTA button.
3. **Readability:** Font size min 16px, generous line-height.
---
### 2. Lovable Prompt Sequence (5 Phases)
**Phase 1: Foundation & Structure (5 mins)**
> "Create a single-page, mobile-first landing page for a [Client Business Type] called [Business Name]. Use a clean, modern aesthetic with a white background, [Primary Color] accents, and [Secondary Color] highlights. Structure: Hero, Services, About, Testimonials, Contact. Ensure the navigation is sticky and collapses into a hamburger menu on mobile."
**Phase 2: Hero & Branding (10 mins)**
> "In the Hero section, add a bold headline: '[Client's Main Value Prop]'. Sub-headline: '[Client's Secondary Benefit]'. Include a primary button labeled 'Get a Free Quote' and a secondary button labeled 'View Our Work'. Add a high-quality hero image on the right side (desktop) that stacks below the text on mobile. Use a subtle gradient overlay for text contrast."
**Phase 3: Content & Features (15 mins)**
> "Add a Services section with 4 cards. Each card needs an icon, a title, and a 2-sentence description. Use these titles and descriptions: [Insert Client's 4 Services]. Below this, add an About section with a short paragraph about the company's mission and a placeholder for a team photo. Add a Testimonials section with 3 short quotes from past clients, styled with large quotation marks and star ratings."
**Phase 4: Conversion & Contact (10 mins)**
> "Create a Contact section with a simple form: Name, Email, Phone (optional), and Message. The submit button should be prominent and say 'Send Message'. Below the form, add a direct link to 'mailto:[Client Email]' and a click-to-call button for '[Client Phone Number]'. Ensure the form is fully functional and shows a success message upon submission."
**Phase 5: Polish & Mobile Optimization (5 mins)**
> "Review the entire page for mobile responsiveness. Ensure all text is legible, buttons are at least 44px tall, and images scale correctly. Add smooth scrolling for all anchor links. Add a footer with copyright '[Year] [Business Name]' and social media icons (Facebook, Instagram, LinkedIn). Optimize the page speed by ensuring no large files are used."
---
### 3. Feature Integration Guide (Lovable-Compatible)
| Client Request | Lovable Implementation Strategy |
| :--- | :--- |
| **Contact Form** | Use Lovable's built-in form component. Connect to a form backend (e.g., Formspree, Basin) or use a simple mailto: action for simplicity. |
| **Image Gallery** | Use a CSS grid layout. For mobile, switch to a single-column or horizontal scroll-snap carousel. |
| **Google Maps** | Embed an iframe from Google Maps. Lovable supports raw HTML embeds. |
| **Social Media Links** | Use inline SVG icons in the footer. Link directly to the client's profiles. |
| **Analytics** | Add a custom code block in the `<head>` section with the Google Analytics or Plausible script. |
| **Blog/News** | **Out of Scope for 45 mins.** Recommend a separate platform (e.g., Medium) and link to it. |
| **E-commerce** | **Out of Scope.** Recommend linking to an existing Shopify/Esty store. |
---
### 4. Content Preparation Checklist (Client Deliverables)
**Immediate Needs (Before Build):**
- [ ] **Business Name & Logo** (SVG or high-res PNG).
- [ ] **Hero Image** (1 high-quality, landscape-oriented photo, min 1200px wide).
- [ ] **4 Service Titles & 2-sentence descriptions**.
- [ ] **1 About Paragraph** (50-100 words).
- [ ] **3 Testimonials** (Name, Company, Quote, Star Rating).
- [ ] **Contact Details:** Email, Phone Number, Physical Address (if applicable).
- [ ] **Primary & Secondary Brand Colors** (Hex codes).
**Nice-to-Have (Post-Launch):**
- [ ] Team photos.
- [ ] Client logos.
- [ ] Social media profile URLs.
- [ ] Specific project portfolio images.
---
**Final Note:** Stick to the 45-minute timeline. If a feature is not working after 5 minutes of troubleshooting, remove it or replace it with a simpler alternative. A clean, fast, and functional site is better than a slow, complex one.
Iniciá sesión para ver el prompt completo
Continuar con:
Al iniciar sesión, aceptás nuestros Términos de uso y Política de privacidad
Uso
Este prompt está diseñado para usarse con coding. Copiá el contenido de arriba y pegalo en tu herramienta de IA preferida.
Para mejores resultados, personalizá los marcadores (indicados con corchetes o mayúsculas) con tus requisitos específicos.
Referencias
- Categoría: Prompts de coding
- Fuente: https://x.com/EXM7777/status/1939668726892433453
Discusión
0 comentarios