## Welcome to PrimeUI This guide shows how teams can move from idea to production inside a neutral AI SaaS workflow: define structure, generate layouts, validate content quality, and export implementation-ready artifacts. Use it as a practical quickstart before diving into deep-reference docs.

## Quick Start Commands ```bash tab="pnpm" pnpm install pnpm dev ``` ```bash tab="npm" npm install npm run dev ``` ## 1. Create a Workspace [step] 1. Create a new workspace and choose the baseline template that best matches your delivery model. 2. Add collaborators and assign roles for content, design, and engineering review. 3. Set initial context: target users, use-case scope, tone, and compliance constraints.
Use stable names that remain valid across roadmap changes. - Prefer lowercase and dashes: `ai-assistant-docs`, `billing-portal`, `admin-workspace`. - Use product-domain names over campaign names where possible. - Keep temporary names for disposable experiments only.
## 2. Shape the Sitemap [step] Open **Sitemap** to define the page tree and route hierarchy. Each node should map to a clear user intent. When adding a page, select its type first so generation presets and templates align with the page goal: Use this for product positioning, feature narratives, and conversion-focused CTAs. Use this for plan packaging, feature comparison, and procurement-oriented questions. Use this for technical implementation guides, API onboarding, and troubleshooting paths. Use this for legal and trust pages such as terms, privacy, DPA, and acceptable use policies. Use this for changelog, incident communication, and reliability transparency updates. Reorder nodes with drag-and-drop. The final hierarchy drives breadcrumbs, navigation grouping, and export route generation. Lock structure before polishing messaging. Stable IA reduces churn across URLs, nav, and handoff artifacts. ## 3. Work in Wireframes [step] After selecting a sitemap node, open **Wireframes** and iterate on structure: - Generate multiple variants to explore alternative information flows. - Duplicate variants before major edits to preserve comparison points. - Reorder and replace blocks to test readability, sequencing, and CTA clarity. - Mark a variant as **Ready** when layout and content intent are approved. Use `Cmd/Ctrl + C` and `Cmd/Ctrl + V` for fast duplication. Use `Delete/Backspace` to remove focused blocks and keep review cycles short. ## 4. Validate Before Handoff [step] Run this quality pass before export: 1. Confirm heading hierarchy and section sequencing. 2. Validate CTA intent and next-step clarity on key pages. 3. Check tone consistency across landing, pricing, and docs. 4. Replace placeholders and verify example data realism. ## Recommended Project Layout Use a simple, predictable folder structure for exported repositories: ## Publishing Checklist Confirm the exported project starts as a production-ready Next.js app with the expected app router structure and baseline layouts. Verify Tailwind CSS v4 is wired correctly and core design tokens render consistently across key pages before deeper customization. Validate that you can publish the project on any hosting platform you prefer, including Vercel, with minimal deployment-specific changes. ## Delivery Matrix | Workflow phase | Primary owner | Success signal | | ------------------- | --------------------- | ------------------------------------------------------------ | | Scope definition | Product + GTM | Audience, goals, and page intents are documented | | Structure planning | Product Design | Sitemap and route hierarchy are stable | | Variant exploration | Design + Content | At least two viable wireframe directions are reviewed | | Quality validation | Content + Engineering | Terminology, CTA clarity, and examples pass review | | Handoff readiness | Engineering | Exported starter builds and key routes render without issues | ## Output When you approve a variant, PrimeUI exports a starter repository with production-ready sections and routes so your team can continue in its own delivery pipeline. ```tsx filename="layout.tsx" import "@/styles/globals.css" export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( // suppressHydrationWarning added according to https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app {children} ) } ``` ## Summary 1. **Create a workspace** with clear ownership and scope. 2. **Shape the sitemap** so every page has the correct type and placement. 3. **Iterate in wireframes** to evaluate structure and messaging. 4. **Validate before handoff** to reduce production rewrite. 5. **Export and integrate** into your engineering workflow. ## Explore Next Keep this flow in mind and continue with deep guides for sitemap operations, wireframe editing, and export customization.