Explore

Workflow 2: PRD → Wireframe → UI

Outcome

Turn a raw idea into clean, portfolio-ready SaaS UI screens using an AI-assisted workflow.

Time box

15 min → Understand PRD

20 min → Extract UX flows

25–30 min → Wireframes

30–40 min → UI in Figma

Step 1: Understand & Simplify the PRD (AI)

Goal: Remove ambiguity and get clarity fast.

What to Do: Take your PRD / feature doc and paste into AI.

Prompt:

You are a senior product designer.

Here is a product requirement document:

[PASTE PRD]

Break it down into:

1. Core user goal

2. Key user actions

3. Primary use cases

4. Edge cases to consider

Keep it simple and practical.

Output you want:

Clear user intent

3–5 main actions

Defined scope (avoid over designing)

Step 2: Convert PRD → UX Flow

Goal: Translate requirements into screens and interactions.

Prompt:

Convert this PRD into a UX flow for a SaaS product.

Include:

- List of screens

- What happens on each screen

- Navigation between screens

Keep it simple and user-friendly.

Output:

Screen list (Dashboard, Create, Edit, Settings, etc.)

Basic navigation flow

Key actions per screen

Tip

If the flow feels complex, simplify it manually. AI tends to overcomplicate — your job is to refine.

Step 3: Generate Wireframes (AI-Assisted)

Goal: Quickly visualize structure and layout.

Prompt:

Create a low-fidelity wireframe structure for the following screens:

[PASTE SCREEN LIST]

Describe layout for each screen including:

- Sections

- Components

- Hierarchy

What to Do

Convert output into rough wireframes

Use boxes, placeholders (don’t style yet)

Focus only on:

Layout

Information hierarchy

Step 4: Convert to UI

Goal: Turn wireframes into polished UI using a consistent system.

What to Do

Open the SaaS UI Starter Kit (Figma file included)

Map wireframes to components:

Navigation

Tables / lists

Forms

Modals

States (empty, error, loading)

Assemble screens using existing components No designing from scratch

⁠

Focus Areas

Consistency

Reusability

Clean layout

⁠

Build Order

Layout

Core components

Content

Refinement

Step 5: Add UX Copy (AI)

Goal: Make UI feel real and usable.

Prompt:

Write UX copy for the following feature:

[PASTE FEATURE]

Include:

- Button labels

- Empty states

- Error messages

- Helper text

Keep it clear and concise.

Apply in UI

Gallery

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.