LinkHarbor

One page for your links, projects, and leads.

LinkHarbor is a simple bio link manager for creators who need a polished personal landing page without backend complexity. It helps them present social links, featured projects, and a contact form in a mobile-first page with clean theming options like minimal and glassmorphism.

Business Goals

  • Achieve a 40% v0-to-published-page conversion within 30 days of launch.
  • Reduce time to first published profile page to under 10 minutes for 80% of users.
  • Generate a 25% repeat usage rate within 60 days as creators update links and projects.
  • Reach a 15% share rate from published pages to social platforms within 45 days.

User Goals

  • Create a professional bio page quickly without needing to code.
  • Showcase multiple social channels and featured work in one place.
  • Receive inquiries through a simple contact form on the page.
  • Switch between distinct visual themes to match their personal brand.

Non-Goals

  • No authentication, account management, or saved user profiles in this v0 scope.
  • No backend storage, database, analytics dashboard, or lead inbox.
  • No custom domain management, SEO tooling, or payment collection.
  • No collaboration features, content scheduling, or A/B testing.

Creator Maya, 29 - A freelance illustrator who shares one link in her social bios and wants to centralize her Instagram, portfolio, and commission inquiries. She needs a page that looks polished on mobile and can be published in minutes.

Creator Maya, 29

  • As a creator, I want to add my social links and featured projects, so that followers can quickly see my work and where to find me.
  • As a creator, I want to preview my page in a phone-sized layout, so that I can make sure it looks good on mobile before sharing it.
  • As a creator, I want a contact form on the page, so that potential clients can message me without leaving the profile.

Indie Founder Leo, 35 - A solo SaaS founder who wants a simple personal profile page to share product demos, social channels, and contact information. He values speed, clarity, and a clean modern look.

Indie Founder Leo, 35

  • As a founder, I want to feature a few projects with titles and short descriptions, so that visitors understand my latest work immediately.
  • As a founder, I want to switch between minimal and glassmorphism themes, so that the page matches my brand style.
  • As a founder, I want my page to feel lightweight and fast, so that visitors do not bounce before clicking.

Coach Nina, 41 - A coach and speaker who needs a single link for event organizers and prospects. She wants a professional, trustworthy page that is easy to update and simple to navigate.

Coach Nina, 41

  • As a coach, I want to highlight my most important links first, so that visitors can book a call or follow me quickly.
  • As a coach, I want the contact form to be easy to use on a phone, so that people can reach out after seeing me on social media.
  • As a coach, I want accessible typography and contrast, so that my page is readable for all visitors.

Page Builder Canvas · High priority

  • Provide a screen for composing a personal bio page with the core content blocks the user can rearrange and edit.
  • Editable sections for profile name, headline, bio, social links, featured projects, and contact form.
  • Support add, edit, delete, and reorder actions for social links and projects.
  • Show instant preview updates as the user edits content.
  • Validate required fields such as profile name and at least one primary link.
  • Handle empty states with clear starter prompts and example placeholders.

Theming and Style Presets · High priority

  • Offer two default visual styles that can be applied quickly without design expertise.
  • Provide Minimal and Glassmorphism theme presets with distinct color, shadow, border, and background treatments.
  • Allow basic accent color selection within each preset.
  • Ensure theme changes are visible immediately in the preview.
  • Preserve readability and contrast in both themes on mobile and desktop.
  • Prevent invalid combinations that reduce contrast below accessible thresholds.

Responsive Profile Page · High priority

  • Render a polished public-facing profile page optimized for small and large screens.
  • Use a single-column mobile layout and a centered desktop layout with balanced spacing.
  • Keep primary actions, social links, and contact entry points above the fold when possible.
  • Support responsive image/avatar sizing and truncation for long names or project titles.
  • Ensure cards and forms adapt cleanly across common breakpoints from 375px to 1440px.
  • Keep tap targets large enough for mobile use.

Contact Form Component · Medium priority

  • Include a simple inquiry form on the page to let visitors contact the creator without backend implementation in v0.
  • Render standard fields such as name, email, and message.
  • Use shadcn/ui form patterns, labels, helper text, and validation states.
  • Show a submit button and a success or placeholder state suitable for demoing the flow.
  • Handle required field validation and basic email format checks.
  • Keep the form visually integrated with the selected theme.

Shadcn UI Composition · Medium priority

  • Build the interface using shadcn/ui primitives to maintain consistency and speed in v0 generation.
  • Use Card, Button, Input, Textarea, Tabs or Segmented Controls, and Badge components where appropriate.
  • Prefer composable blocks with clear hierarchy and spacing.
  • Keep component usage semantic and accessible with proper labels and focus states.
  • Avoid custom heavy animation or complex layout dependencies.
  • Use Tailwind utility classes for styling and responsiveness.

Create Your Profile in Minutes

  • Open the builder and see a prefilled starter layout.
  • Enter name, bio, and profile image or avatar placeholder.
  • Add social links and featured projects using simple cards.
  • Pick Minimal or Glassmorphism and choose an accent color.
  • Preview the page on mobile and desktop toggles.
  • Publish a shareable profile page in under 10 minutes from first load.

1. Start with a clean template

  • The user lands on a lightweight editor with a starter bio page already laid out. The template reduces blank-page friction and makes the core structure obvious.
  • Show default sections in a logical order: header, links, projects, contact form.
  • If the user has no content yet, display helpful empty-state copy and suggested examples.
  • Keep the initial view uncluttered so the main call to action is obvious.

2. Edit profile content

  • The user fills in personal details and adds the content that will appear publicly. The editor should feel like a simple card-based form, not a complex CMS.
  • Inline validation for required fields and reasonable length limits.
  • Support link labels, URLs, project title, project summary, and optional image or icon fields.
  • Show character counters or truncation hints for long bios and titles.

3. Choose a theme

  • The user selects between Minimal and Glassmorphism to match personal brand style. Theme changes should update the preview immediately.
  • Expose a small theme switcher with clear visual labels and previews.
  • Ensure text contrast remains readable in both themes.
  • Use subtle shadows, borders, and blur only where the glass style stays legible.

4. Preview and refine

  • The user reviews the profile page in responsive preview mode before sharing. This is where layout issues and weak copy get caught early.
  • Allow toggling between mobile and desktop preview widths.
  • Surface overflow or layout warnings for long content, broken links, or missing form labels.
  • Keep preview interactions fast and non-destructive.

5. Share the page

  • The user gets a share-ready profile URL or embed-like output for v0. Even without backend persistence, the interface should clearly communicate the final result.
  • Show a prominent copy link action and confirmation state.
  • Present the final page as a public-facing destination with obvious social and contact actions.
  • If publishing is simulated in v0, use placeholder states that make the next backend step obvious.

Advanced Features and Edge Cases

  • Theme tokens that support future custom palettes without redesigning components.
  • Optional section visibility toggles for users who do not want projects or contact forms.
  • Graceful handling of extremely long usernames, bios, link labels, and project titles.
  • Accessible keyboard navigation through editable sections and preview controls.
  • Mobile-first condensed mode for users with very few links or projects.
  • Fallback avatar and image placeholders when no photo is provided.

Visual and Interaction Principles

  • Use strong hierarchy: profile identity first, links second, projects third, contact last.
  • Maintain generous spacing and large touch targets for mobile usability.
  • Keep glassmorphism subtle enough to preserve text contrast and avoid visual noise.
  • Use accessible color contrast, visible focus states, and semantic form labels throughout.
  • Favor fast perceived performance with simple transitions and minimal motion.
  • Design cards to feel clean, modern, and creator-friendly without clutter.

Maya is a freelance illustrator who currently sends followers to a messy mix of Instagram, portfolio, and email links. Every new client asks the same question: where is the best place to see your work and contact you? She needs a single page that feels polished, works on mobile, and takes minutes to update instead of hours.

With LinkHarbor, Maya starts from a ready-made template, adds her social links and featured projects, then switches to the glassmorphism theme to match her style. She checks the mobile preview, fixes a long project title, and shares the page from one link in her bio. The result is a cleaner public presence, more inquiries through the contact form, and less time spent maintaining scattered profiles.

User-Centric Metrics

  • 80% of first-time users publish or complete a shareable page within 10 minutes.
  • 70% of created pages include at least 3 social links and 2 featured projects.
  • 60% of users switch themes at least once during setup.
  • 90% of page previews render correctly on mobile widths without horizontal scrolling.
  • Less than 5% of users encounter validation blocking on required fields after the first pass.

Business Metrics

  • 40% conversion from landing to completed page creation in the first 30 days.
  • 25% of users return within 60 days to update content or themes.
  • 15% of published pages generate at least one copy-link or share action.
  • 20% of users add a contact form section, indicating creator intent and engagement.

Technical Metrics

  • 99.9% uptime for the static/app shell experience.
  • P95 page interaction latency under 200 ms for editor actions.
  • Zero critical accessibility violations in core builder and preview flows.
  • Initial page load under 2.5 seconds on a mid-tier mobile connection.

Tracking Plan

  • Track page_builder_started when a user opens the editor.
  • Track section_added when a social link, project, or contact section is added.
  • Track theme_selected with theme name and accent color.
  • Track preview_toggled with device type mobile or desktop.
  • Track validation_error with field name and error type.
  • Track page_published or share_link_copied when the final page is shared.
  • Track contact_form_interacted when a visitor opens or submits the form UI.

Technical Needs

  • Next.js App Router with server components for shell rendering and client components for editable form interactions.
  • Tailwind CSS with shadcn/ui component primitives for cards, buttons, inputs, tabs, and dialogs.
  • Zustand or React state for local editor state in v0, with clean separation from future persistence.
  • Responsive layout system using CSS grid and flex utilities for mobile-first preview.
  • Lucide icons for social link affordances and lightweight visual cues.
  • Form validation with React Hook Form and Zod for consistent field rules and error states.
  • Static or mock data model so the v0 can demonstrate content without backend dependencies.

Integration Points

  • shadcn/ui for UI components.
  • Vercel for deployment and preview hosting.
  • Google Fonts or a similar font delivery provider for typography.
  • Lucide React for icons.
  • Optional Formspree or similar only if a future contact submission path is needed beyond v0.

Data Storage & Privacy

  • No backend persistence in v0; keep all user edits local to the session state.
  • If persistence is added later, store only profile content fields necessary for the public page.
  • Avoid collecting sensitive personal data in the contact form beyond name, email, and message.
  • Display a clear privacy note near the contact form if submissions are ever enabled.
  • Design for GDPR and CCPA readiness by allowing deletion of stored profile data and export in future phases.

Scalability & Performance

  • Keep the page composable so more sections can be added without reworking the layout.
  • Optimize for lightweight client bundles by limiting dependencies and avoiding heavy animation libraries.
  • Ensure images are responsive and lazily loaded where possible.
  • Support high-contrast and reduced-motion preferences without extra layout cost.

Potential Challenges

  • Glassmorphism can reduce readability on complex backgrounds; mitigate with controlled blur, opacity, and contrast checks.
  • Long content can break the layout on mobile; mitigate with truncation rules and responsive spacing.
  • Without backend storage, users may expect persistence; mitigate with clear v0 messaging and session-state behavior.
  • Form validation can feel strict if overdone; mitigate with simple inline rules and friendly error copy.
  • Theme customization can explode in complexity; mitigate by limiting v0 to two presets and one accent control.

Team & resourcing - Small product team - 1 designer, 2 frontend engineers, part-time PM.

Phase 1: V0 Editor Shell · Weeks 1–2

  • Next.js App Router scaffold
  • Main editor layout with sidebar or top-level sections
  • Profile content forms for name, bio, social links, and projects
  • Local state only with mock data and live preview
  • shadcn/ui cards, inputs, buttons, and form layout

Phase 2: Public Profile Preview · Weeks 3–4

  • Responsive public-facing profile page
  • Mobile and desktop preview toggle
  • Minimal and glassmorphism theme presets
  • Contact form component with validation states
  • Basic empty states and error handling

Phase 3: Polish and Accessibility · Weeks 5–6

  • Accessible focus states and keyboard navigation
  • Contrast checks and improved typography scale
  • Better spacing and content overflow handling
  • Subtle motion and performance cleanup
  • Copy-link/share-ready success states

Phase 4: Launch-Ready v0 Handoff · Week 7

  • Final component cleanup for v0 generation
  • Documentation of component structure and style tokens
  • Demo-friendly placeholder publishing flow
  • Known limitations and future backend roadmap notes

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a mobile-first bio link manager called LinkHarbor using Next.js App Router, TypeScript, Tailwind CSS, and shadcn/ui.

Product goal:
Create a simple creator profile page builder with a polished editor and a responsive public profile preview. The app should let users edit profile name, headline, bio, avatar, social links, featured projects, and a contact form section. Include two theme presets: Minimal and Glassmorphism. This is v0 only, so skip backend logic, auth, persistence, databases, and real submissions.

Primary screens and flows:
1. Editor screen with card-based sections for profile info, social links, featured projects, contact form, and theme selection.
2. Live preview panel showing the public profile page as it updates.
3. Mobile and desktop preview toggle.
4. Success state for copy-share-link or publish-like CTA, using placeholder behavior.

UI requirements:
Use shadcn/ui components for Card, Button, Input, Textarea, Badge, Tabs or segmented controls, and form helpers. Make it look premium on mobile and desktop. Keep spacing clean, large touch targets, accessible labels, focus states, and strong contrast. Include subtle glassmorphism styling as a second theme with blur, translucent surfaces, and readable text. Keep the Minimal theme clean and modern.

Data model:
Profile object with name, headline, bio, avatarUrl, accentColor, theme, socialLinks array, projects array, and contactForm fields enabled flag. SocialLink has label, url, iconType. Project has title, description, and optional link. Contact form has name, email, message, and enabled toggle.

Behavior:
Add/edit/delete/reorder social links and projects in the editor. Validate required fields with friendly inline errors. Show empty states when sections are blank. Update the preview instantly as the user types. Handle long text gracefully with truncation and responsive wrapping. Keep everything client-side with mock state only.

Implementation guidance:
Build reusable components for ProfileEditor, ThemeSelector, SocialLinksEditor, ProjectsEditor, ContactFormPreview, and ProfilePreview. Use a responsive two-column layout on desktop and stacked layout on mobile. Prefer clean semantic markup and accessible forms. Create a polished v0 that could later accept persistence and public sharing without a full rewrite.

Business Idea

I want to build a v0 component/app: A simple bio link manager that lets creators build and share personalized profile pages. Each page lists social links, featured projects, and a contact form, with theming options (minimal, glassmorphism). Built on Next.js App Router, uses shadcn/ui for cards and form elements, works great on mobile and desktop. Skip all backend logic-I’m focusing only on the screens, components, and style hints for v0 generation.

Make My PRD

Design by The Resonance | Powered by GPC – The AI Transformation Company

    PRD: I want to build a v0 component/app: A simple bio link...