Vibe Code Showcase

Initial prompt

“VibeCodeShowcase.org – Homepage (v1) Use the attached reference images as primary design inspiration. Specifically: OpenAI Developers Showcase (overall information architecture, featured section, clean editorial aesthetic, project detail pages) made in chatgpt - submit project form.pdf Made in Webflow Showcase (CMS grid layout, browsing experience, discoverability) Product Hunt (excellent inspiration for project cards, detail pages, filtering, metadata, and social proof) oai_citation:1‡product hunt - cms item.pdf Do not copy these designs directly. Instead, create a unique design that feels inspired by all three while establishing VibeCode Showcase as its own brand. Project Create VibeCodeShowcase.org A curated gallery of the world's best AI-built products. Think of it as: Product Hunt for vibe-coded apps Made in Webflow for AI projects OpenAI Showcase for polished editorial presentation The aesthetic should feel modern, premium, minimal, and design-forward. Avoid startup template aesthetics. Design language Prioritize: lots of whitespace large typography editorial layouts soft rounded corners subtle shadows smooth animations premium feel Apple-quality spacing beautiful responsive layouts fast loading The homepage should immediately communicate quality. Homepage Structure Hero At the top create a featured showcase carousel. Show two featured projects. Display one project at a time. Auto-rotate every few seconds with smooth horizontal sliding. Also allow manual navigation. Small navigation dots underneath. Each featured project should include: large beautiful screenshot project title one sentence description builder name primary CTA: View Project Think very similar to the OpenAI Showcase featured section, but create an original implementation. Below Hero Create a search + filtering section. Include: Search Bar Search by: project name creator company tools used Toggle Include a toggle: ☑ Made using Voice First Beside it place a small information icon. The info icon doesn't need functionality yet. We'll populate that content later. Filter Dropdowns Create three dropdown filters. Tools Include major AI building tools including: ChatGPT Sites Codex Lovable Replit Cursor Windsurf Bolt v0 Base44 Claude Code Firebase Studio Tempo Devin Cline Roo Code Leave room for more tools later. Location Initially include: G20 countries. We'll expand this later. First-Year Budget Dropdown: $0–500 $500–5,000 $5,000+ Label it exactly: First-Year Budget Main CMS Grid Below filters create a large CMS grid inspired primarily by Made in Webflow. Desktop: 3 columns. Tablet: 2 columns. Mobile: 1 column. Each card contains: Large screenshot of vibe coded showcase project ↓ Project title ↓ Creator section Creator section contains: colored circular avatar avatar displays creator initials only creator name Example: ● JC Jay Chopra Keep this minimal. No unnecessary metadata. Cards should have elegant hover effects. Browsing Support either: Infinite Scroll or Pagination Whichever works better inside ChatGPT Sites. Prioritize simplicity. Navigation Top navigation should include: Logo VibeCode Showcase Navigation: Showcase Featured Submit Project About Overall Feel Imagine if: Apple OpenAI Linear Made in Webflow had designed a curated gallery for AI-built software. Elegant. Minimal. Professional. Premium. Important This is Version 1. Do not overbuild. Focus on creating the best possible browsing experience. Ignore authentication. Ignore backend. Ignore moderation. Ignore CMS implementation details. Ignore databases. Use placeholder content where necessary. Concentrate entirely on the homepage experience and visual design. Future Pages (Do Not Build Yet) We'll design these next: Project Detail Page (inspired by OpenAI Showcase + Product Hunt) Submit Project Form (inspired by OpenAI's Showcase submission form) made in chatgpt - submit project form.pdf Admin Moderation Dashboard Featured Project Selection Workflow User Profiles Collections Tool Directory Only build the homepage in this iteration. Make it feel polished enough that it could realistically be featured by OpenAI or Webflow.”