Client Portal With Grok

The tool you need

What you're building

1. 1

   Step 1

   Pick your design reference

   Before you prompt, go to Dribbble and search for "client portal" or "dashboard minimal". Pick one shot whose style you like, copy the image, and drop it into your prompt with the text below.

   ✏️

   Why this matters. Without a reference, Grok defaults to a generic SaaS look. One image locks the visual direction, and everything it builds after that stays consistent.

   Mark as done
2. 2

   Step 2

   Paste the main prompt

   Paste this with your Dribbble image attached. Replace what's in [brackets].

   PromptCopy

   Build me a client portal for my design agency, [Agency Name].
   
   Match the visual style of the attached image: light background, lots of white space, one accent color ([accent hex, e.g. #E0603D]) used only for primary buttons, small uppercase gray labels above section titles, and a clean sans-serif. It should feel premium and calm, not like a generic SaaS dashboard.
   
   Structure:
   - Each client gets their own portal at /portal/[client-slug]
   - A left sidebar with my logo at the top, three sections (Discovery, In Progress, Deliverables), and a small client card at the bottom showing the client's initial and name
   - Each section in the sidebar shows its state: a checkmark when done, a dot when active, a lock icon when locked
   
   Section 1 - Discovery
   An onboarding form with 8 questions, one question per screen, with a thin progress bar at the top and a "02 / 08" counter. Big question title, a one-line helper text under it, a single input, a Next button in the accent color, and a small "press Enter" hint. Questions:
   1. What does your business do?
   2. Who is your ideal customer?
   3. What are you launching or changing that needs a new brand?
   4. Which 3 brands do you admire, and why?
   5. Which words should describe your brand? Which should never?
   6. What do you already have (logo, colors, fonts, website)?
   7. Where will the brand live first (website, app, packaging, social)?
   8. What does success look like in 6 months?
   
   Section 2 - In Progress
   A kanban board with four columns: To Do, In Progress, Review, Done. Each card has a title, an optional one-line subtitle, small assignee avatars, and a status dot with a label like "Working". Show a "Live" badge at the top right. Page title: "Your project is in motion." with the subtitle "Watch the work unfold. This board updates live as our team moves through your identity - it's yours to follow, no action needed."
   
   Section 3 - Deliverables
   A list of deliverables: Logo Suite, Color System, Typography, Brand Guidelines, Social Templates. Each one opens its own page with: a small uppercase label, the deliverable title, a Download button in the accent color, a large dark preview area, a two-line description, an info row showing Formats & Size and Delivered date, and Previous / Next links at the bottom to move between deliverables.
   
   Add realistic sample data for one client so I can see the whole thing working.

   Mark as done
3. 3

   Step 3

   Set your rules

   Once the first version renders, send this as a follow-up in the same chat. This is the part that turns a nice-looking demo into a real workflow.

   PromptCopy

   Now set the rules for how a client moves through the portal:
   
   - The three stages are sequential. In Progress is locked until the Discovery form is submitted. Deliverables is locked until every card on the board is in Done.
   - Locked sections show a lock icon in the sidebar and are not clickable.
   - When a stage is completed, show a checkmark next to it in the sidebar and automatically move the client to the next stage.
   - The Discovery form saves progress, so a client can leave and come back to the question they were on.
   - On the board, a card in the Review column shows the subtitle "Awaiting your notes" so the client knows it's their turn.
   - In Deliverables, the Download button only appears once a file is attached. Otherwise show "Coming soon".
   
   Keep all the styling exactly as it is.

   Mark as done
4. 4

   Step 4

   Refine and publish

   Want changes? Just describe them. A few I used:

   PromptCopy

   Make the Discovery form calmer: more space above the question, a slightly smaller title, and a lighter helper text.

   PromptCopy

   Add a second sample client with a different name and initial so I can switch between /portal/northwind and /portal/vela.

   PromptCopy

   Replace the placeholder logo with my logo (attached) and keep it small in the top-left of the sidebar.

   When it looks right, hit Publish. Grok gives you a shareable grok.me link, and that's the link you send to your client.

   Mark as done

Tips