Card gallery - Redesign the Seenix dashboard to prioritize clarity, actionability, and task flow instead of visual effects.
Generated Prompt
```markdown ## APPLICATION OVERVIEW Seenix is a web application designed as an AI visibility auditor, focusing on helping users understand why AI systems (like ChatGPT, Claude, and Gemini) do not cite their website. The primary purpose is to provide a streamlined dashboard that emphasizes clarity and actionability, guiding users through the task of fixing visibility issues with minimal distractions. ## CORE FEATURES 1. **AI Citability Summary Block**: Displays an AI Citability Score (0-100), a plain language status (e.g., “AI will not cite your site”), and a concise explanation for immediate understanding. 2. **Prioritized Task Queue**: Organizes issues into three sections: Critical blockers, High impact fixes, and Improvements, each with simplified problem descriptions and actionable “Fix now” buttons. 3. **Progress Tracker**: Shows the user’s progress with a linear path to AI Citability, including step completion and estimated time remaining, enhancing motivation and engagement. 4. **Contextual Help Panel**: A right-side panel providing explanations of issues and insights into how AI reads websites, ensuring users have the necessary context for each task. 5. **Minimalist Interface**: Focused on readability and spacing, the interface avoids visual noise with clean layouts, white backgrounds, and soft borders. 6. **Immediate Feedback System**: Each fix updates the progress tracker in real-time, allowing users to feel momentum and see the impact of their actions immediately. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - Clean, simple design featuring ample white space and a minimal color palette that emphasizes typography. - **Color Mode**: Light theme with dark text on light backgrounds for optimal readability. - **Layout**: The dashboard will follow a linear, checklist-style layout resembling a repair console, with the summary block at the top, followed by the prioritized task queue, and a contextual help panel on the right. - **Typography**: Use a modern sans-serif font (e.g., Inter or Roboto) with a clear hierarchy: - Headings: Bold, larger size - Subheadings: Medium weight, slightly smaller - Body text: Regular weight, standard size ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for robust type-checking and component reusability. - **Styling**: Tailwind CSS for utility-first styling and rapid design iteration. - **UI Components**: Utilize shadcn/ui for pre-built React components that align with the minimalist aesthetic. - **State Management**: Use React Context API or Redux, depending on the complexity of state management needed for user progress and task tracking. ## IMPLEMENTATION STEPS 1. **Set Up Environment**: Initialize a new React project with TypeScript and Tailwind CSS. 2. **Create Components**: Develop the main components: - SummaryBlock - TaskQueue - TaskCard - ProgressTracker - HelpPanel 3. **Design Layout**: Implement the linear layout structure with a focus on spacing and readability. 4. **Incorporate State Management**: Set up state management for the task queue and user progress. 5. **Implement UI Functionality**: Add functionality to the TaskCards to handle the “Fix now” actions and update the progress tracker. 6. **Testing**: Conduct usability testing to ensure that the dashboard meets user expectations for clarity and actionability. ## USER EXPERIENCE The user experience will be streamlined and intuitive. Upon entering the dashboard, users will immediately see their AI Citability Score and status, followed by a prioritized list of tasks to address. Each task will provide clear, actionable steps with minimal jargon, ensuring that users can quickly understand what needs to be fixed. The visual progress tracker will keep users informed of their progress and motivate them to complete fixes efficiently. The contextual help panel will further enhance understanding, making the dashboard feel like a linear repair workflow rather than just an analytics tool. ```
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!
