I am writing a prompt to use in Replit Design Mode: an ai agent specialized in designing beautiful landing pages. In addition to React/ Shadcn/ Tailwind code generation , this agent can also generate images, short videos and get stock photos from the internet.
I need to give enough context to it so that it generates a design that matches my expectations.
See below the description that I have so far for this landing page. As you will see, this is lacking some style guidelines.
Section 1: Hero
Layout: 2 columns Background color: #FFFFFF Columns: Column 1: Title h1: O primeiro assistente financeiro com IA que realmente entende seu dinheiro Subtitle: O Pluma é o único app que combina Open Finance com IA conversacional para dar respostas instantâneas sobre suas finanças - sem você precisar interpretar gráficos complicados ou fazer cálculos manuais. Call to action button: Teste grátis por 14 dias Column 2 Image: [generate]
Section 2: Why Pluma
Layout: 1 column Background color: #FFFFFF Columns Column 1: Title h2: Porque Pluma? Layout: 3 columns Column 1: Card Icon: Bank (Lucide Icons) Title h3: Conecta automaticamente Description: Conecta automaticamente todas suas contas (Open Finance do Banco Central) Column 2: Card Icon: Cash (Lucide Icons) Title h3: Experiência personalizada Description: Responde suas dúvidas em linguagem humana, e sugere ações para a sua situação real Column 3: Card Icon: Chat (Lucide Icons) Title h3: Atualiza sozinho Description: Não precisa fazer input de nenhuma informacão - você só conversa e toma decisões
Section 3: Pluma Answers
Layout: 1 columns Background color: #1C3F3A Columns Column 1 - Card Title h2: Você tem perguntas, a Pluma tem respostas Visual: Generate an image/ components of an UI that looks like chatGPT, but that prompts the user to “Pergunte-me qualquer coisa sobre suas finanças” In the UI, add the following prompt suggestions "Quanto posso gastar neste fim de semana?" "Por que minha conta está sempre no vermelho?" "Consigo trocar de carro este ano?" "Onde estou gastando demais?" "Quanto preciso guardar para a reserva de emergência?" Add subtle animations as the user hover through each prompt suggestion
Section 4: Safety
Layout: 2 columns Background : generate textured gradient based on this color #EBE8D8 Columns Column 1 Title h2: Seus dados estão seguros conosco Column 2 Card 1: Check icon Lucide + “Open Finance Certificado pelo banco central” Card 2: Check icon Lucide + “Mesma segurança que seu internet banking” Card 3: Check icon Lucide + “Seus dados nunca saem do Brasil” Card 4: Check icon Lucide + “Criptografia de ponta a ponta”
Section 5: Call To Action
Layout: 1 column Background : #1C3F3A color Columns: Column 1: Title h2: Retome o controle da sua vida financeira Description: ✓ 14 dias grátis - cancele quando quiser ✓ Conecte suas contas em 2 minutos via Open Finance ✓ Sem pegadinhas - preço fixo após o trial Call To Action: Teste grátis agora →
Section 7: Footer
Logo Website sections Privacy Policy Link Terms and Conditions Link
please, help me enhance this existing prompt with some design guidelines, following the reference screenshot attached:
Deeply analyse the design of the attached screenshot. Improve my prompt above by adding to it a design.json that describes the style and design of every UI component needed in a design system at a high level like a creative director. Capture high level guidelines for structure, spacing, fonts, colours, design style and design principles so I can use this file as the design guidelines for my app. The goal with this file is to instruct AI to be able to replicate this look easily in this project.