Contruir um site de designer, estilo o canva, porem mais basico, direto, com uma landing page atrativa chamativa, nome logo: JN DESIGN, quero...
Generated Prompt
## APPLICATION OVERVIEW JN DESIGN is a minimalist web application that allows users to create and edit graphic designs easily. Inspired by platforms like Canva but with a more simplified approach, the application features an engaging landing page that showcases its functionality while providing users with tools to design, draw, upload images, and edit their creations seamlessly. ## CORE FEATURES 1. **Attractive Landing Page**: A visually engaging introduction to JN DESIGN, featuring a compelling hero section, an overview of key features, testimonials, and a strong call-to-action to encourage user sign-up or usage. 2. **Design Creation Tool**: A straightforward interface for users to create designs from scratch or use templates, featuring drag-and-drop functionality for ease of use. 3. **Image Upload & Editing**: Users can upload images and apply basic editing tools such as cropping, resizing, and filters to enhance their designs. 4. **Text Editing**: Users can add text to their designs, with options for font selection, size adjustment, and color customization to ensure versatility in design. 5. **Template Library**: A collection of pre-designed templates that users can choose from, allowing for quick design creation while maintaining a professional look. 6. **User Account Management**: Basic user authentication for saving designs and accessing them later, ensuring users can manage their projects effectively. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - The design emphasizes clean lines, ample white space, and a straightforward user interface that prioritizes usability and visual appeal. - **Color Mode**: Light theme with dark text on light backgrounds, ensuring readability and a pleasant user experience. - **Layout**: A single-page layout with a top navigation bar leading to sections for the hero, features, testimonials, and a footer. The design should flow smoothly from one section to the next. - **Typography**: Use modern sans-serif fonts for headings and body text to maintain clarity and simplicity. Hierarchy should be established through font size and weight to guide the user’s attention. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for building a robust and scalable application. - **Styling**: Tailwind CSS for rapid and responsive design capabilities. - **UI Components**: Utilize shadcn/ui for consistent and visually appealing UI components. - **State Management**: Consider using Zustand or React Context for managing user state and design data. ## IMPLEMENTATION STEPS 1. **Set Up Project Environment**: Initialize a new React project with TypeScript and install necessary dependencies, including Tailwind CSS and shadcn/ui. 2. **Create Landing Page Structure**: Develop the landing page components, including the hero section, features overview, and testimonials. 3. **Implement Design Creation Tool**: Build the design creation interface with drag-and-drop functionality and integration of the template library. 4. **Add Image Upload and Editing Features**: Implement a feature that allows users to upload images and apply basic editing functions. 5. **Develop User Account Management**: Set up authentication flows to allow users to create accounts and save their designs. 6. **Test User Experience**: Conduct usability testing to refine the interface and ensure the application meets user expectations. ## USER EXPERIENCE Users will land on the JN DESIGN page, greeted by a captivating hero section that outlines the app's purpose and invites them to start designing. As they navigate through the features, they will find clear calls to action prompting them to create their first design. The design tool will offer an intuitive interface that allows for easy manipulation of elements, ensuring a smooth experience from design creation to saving projects. Upon completion, users will be able to easily access and manage their saved designs within their accounts.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
