Craftly

byPiyush Raj

Build a complete, original SaaS web application called “Craftly”. Craftly is a natural-language website and web-app builder for students, creators, freelancers, and small businesses. A user should be able to describe an idea, generate a project concept, preview it, and improve it through simple instructions. IMPORTANT DESIGN DIRECTION The website must look like it was designed by a skilled human product-design team. Do not make it look like an AI-generated template, startup template, or clone of Base44, Freebuff, Lovable, Bolt, or any other existing product. Create an original visual identity for Craftly. Do not copy any company’s logo, name, colors, layout, wording, illustrations, icons, screenshots, or user interface. Avoid: - Generic purple-blue AI gradients - Excessive glowing effects - Neon colors - Huge meaningless headlines - Fake testimonials - Fake user counts - Fake company logos - Repeated rounded cards everywhere - Excessive glassmorphism - Random emojis - Stock photos of people pointing at laptops - “Powered by AI” appearing in every section - AI-sounding marketing language - Unnecessary animations - Placeholder text such as “Lorem ipsum” - Broken links and buttons that do nothing DESIGN STYLE Use a calm, premium, editorial SaaS design with: - Warm off-white background - Charcoal text - Deep forest-green as the main accent - Muted sand and light gray secondary colors - One restrained orange accent for important actions - Strong typography hierarchy - Generous but practical whitespace - Thin borders - Subtle shadows - Small corner radius, approximately 8px to 12px - Clean layout with a strong 12-column grid - Carefully aligned sections - Professional icons from a consistent icon library - High contrast and excellent readability The design should feel thoughtful, trustworthy, calm, and useful. It should look like a real product that could be launched by an independent software company. BRAND Product name: Craftly Tagline: “Turn a clear idea into a working website.” Tone: Helpful, confident, simple, and human. Target users: Students, creators, freelancers, small businesses, and early-stage founders. Use original copy throughout the product. Do not use exaggerated claims such as “revolutionary,” “magic,” “instant success,” or “build anything in seconds.” PUBLIC WEBSITE Create these public pages: 1. Home page 2. Features page 3. Templates page 4. Pricing page 5. About page 6. Contact page 7. Login page 8. Sign-up page HOME PAGE STRUCTURE Create a refined homepage with: 1. Header - Craftly wordmark - Navigation links: Product, Templates, Pricing, About - Text link: Log in - Primary button: Start building - Mobile navigation menu 2. Hero section Headline: “Turn a clear idea into a working website.” Supporting text: “Craftly helps you shape pages, content, and simple workflows from one thoughtful starting point.” Buttons: - Start building - Explore templates Add a realistic product preview on the right side showing a website-builder workspace. The preview must look like a genuine software interface, not an abstract gradient or fake dashboard. 3. Trust and explanation section Explain in plain language: “Start with the outcome, not a blank canvas.” 4. How it works section Show three steps: - Describe your project - Shape the first version - Share it with the world Use simple numbered layouts, not excessive cards. 5. Product preview section Show a polished builder interface containing: - Project name - Prompt input - Page list - Preview area - Small editing panel - Publish button The preview must be visually believable and internally consistent. 6. Feature section Explain: - Clear starting points - Useful page structure - Simple revisions - Shareable results 7. Templates section Show four original templates: - Personal portfolio - Local business - Course landing page - Product waitlist Each template must have its own visual style and useful sample content. 8. Responsible product section Explain that Craftly helps users start and organize their work; users remain responsible for reviewing content before publishing. 9. Final call-to-action Heading: “Make the first version easier to begin.” Button: “Start building” 10. Footer Include navigation, contact link, privacy link, terms link, and a short brand description. APPLICATION DASHBOARD After sign-up, create a functional dashboard with these screens: 1. Welcome screen - Friendly introduction - Button to create a project - Recently opened projects 2. Projects screen - List of projects - Search projects - Filter by status - Create new project button - Empty state for new users 3. New project screen - Project name input - Project type selector - Large prompt textarea - Example prompts - Generate first draft button 4. Builder screen Create a professional three-panel layout: - Left panel: pages and sections - Middle panel: live preview - Right panel: design and content settings Include: - Desktop and mobile preview buttons - Save button - Undo and redo buttons - Preview button - Publish button - Project settings button 5. Chat editing panel Users can type instructions such as: - “Make the headline shorter” - “Change the main color to forest green” - “Add a testimonials section” - “Create a contact page” - “Make this layout better on mobile” For this MVP, the editing panel may update predefined content and design values. It must work reliably even if no external AI API key is available. 6. Publish screen - Project URL preview - Publish status - Copy link button - Unpublish button - Export project button FUNCTIONAL REQUIREMENTS Build a working MVP, not only a visual mockup. Include: - Responsive design for phones, tablets, and desktops - Client-side routing - Functional navigation - Working sign-up and login screens - Demo authentication if a backend is not configured - Project creation - Project saving in local storage for the first version - Project editing - Template selection - Live preview updates - Working publish simulation - Copy-link interaction - Toast notifications - Loading states - Empty states - Error states - Accessible buttons and form labels - Keyboard-friendly interactions If an external AI API is unavailable, create a realistic local demo generator using templates. The app must still work from start to finish without requiring paid services. TECHNICAL REQUIREMENTS Use: - React - Vite - Tailwind CSS - React Router - Lucide React icons - Plain JavaScript or TypeScript - Reusable components - Clean folder structure - Local storage for MVP data Do not add unnecessary libraries. Create reusable components for: - Header - Button - Modal - Input - Textarea - Select - Toast - Template card - Project card - Builder sidebar - Preview frame - Empty state - Loading state Keep all project data and demo content organized in clear files. Add comments only where they make the code easier to understand. CONTENT REQUIREMENTS Write original, realistic copy. Do not create fake statistics, fake customer logos, fake reviews, or unverified claims. Use believable demo projects: - “Maya’s Design Portfolio” - “Riverside Bakery” - “StudySprint Course” - “Northstar Product Waitlist” Use realistic sample text that sounds like a person wrote it. Keep sentences concise and avoid repetitive AI-style wording. VISUAL QUALITY REQUIREMENTS Before finishing: - Check every page on a narrow mobile screen - Check that text does not overflow - Check that buttons work - Check that navigation works - Check that forms have labels - Check that the preview looks coherent - Check that colors are consistent - Remove all placeholder text - Remove all unused imports - Remove all console errors - Do not leave unfinished sections - Do not use fake links that lead nowhere - Do not show technical errors to normal users Create a polished, original, human-designed experience. Prioritize consistency, usability, believable content, and performance over decorative effects. First show me a short implementation plan. Then build the MVP in small, testable steps. After each major step, check that the app runs correctly before continuing.