UX/AI Design Workflow: From Brief to Implementation

A step-by-step guide to building products with AI assistance, from initial idea to working prototype

Overview: Understanding AI as a Tool

AI is a tool, not magic

Modern language models are not intelligence in the human sense, but complex statistical systems that predict the most likely next token based on patterns learned from huge datasets. AI operates on probabilities, which makes it powerful for working with language, code, and structured information, but also explains its limitations — hallucinations, inconsistency, and loss of context.

Workflow hasn't changed — the tools have changed

The fundamentals of product design remain the same:

  • Understanding the user and their problems
  • Defining requirements and constraints
  • Iterative design process
  • Technical implementation
  • Validation and measurement of results

AI doesn't replace these stages — it speeds up routine tasks at each of them, freeing up time for strategic thinking and creative solutions.

There is no "prompt engineering" — there is clear communication

Working effectively with AI is simply about clearly communicating your intentions, just as you would communicate with a colleague. Focus on:

  • Clearly describing the context of the task
  • Specific requirements and constraints
  • Examples of the desired outcome
  • Breaking down complex tasks into simple steps

Core Principles of Working with AI

1. Documentation is the brain of the project

The most important principle: create and maintain detailed project documentation. Documentation serves two critical functions:

  • For you: Structures thinking, preserves decisions and rationales, serves as a single source of truth
  • For AI: Provides context, prevents hallucinations, ensures consistency

Without documentation, AI quickly "forgets" the context, leading to inconsistent decisions and errors.

2. Micro iterations and continuous verification

Adhere to the principle of "small step — verification — next step":

  • Break each task into as small, atomic subtasks as possible
  • Implement one subtask at a time
  • Test the result immediately
  • Only after confirming correctness, proceed to the next step

This approach is critical because AI can generate plausible but incorrect code. Early error detection saves hours of debugging.

3. Context is paramount

AI works as good as the context provided. Every time you work with AI:

  • Refer to the project documentation
  • Point out relevant files and components
  • Recall the architectural decisions made
  • In tools like Cursor, use @-mention functions to explicitly include relevant files

4. AI as an assistant, not an author

Treat AI as a junior developer or assistant who is good at following clear instructions but needs supervision:

  • You define the architecture and make decisions
  • AI helps with implementation, generates boilerplate code, suggests options
  • You always check and validate the result

5. Capture solutions to problems in documentation

When you encounter a problem and find a solution:

  • Ask AI to add a description of the problem and solution to the project documentation
  • Document not only what worked, but also why the problem occurred
  • Create a "Problem Solved" or "Troubleshooting" section

6. Versioning and rollback

Use Git actively:

  • Commit after every successful step
  • Write meaningful commit messages
  • Don't be afraid to roll back to a previous working version if AI leads to a dead end

Step 1: Brief — The Foundation of Your Project

Before you start coding, you need a brief. Not because it's "right" or "textbook", but because without it, you and AI will be wandering in the dark. The brief is a map that you and the language model will navigate toward the goal.

Brief Structure

The brief should be structured so that it can be easily used as context for AI. Five key sections:

  1. Problem description and success metrics — Describe the user's real problem and how you will measure its solution
  2. Target audience and user scenarios — Who will use the product and what key scenarios are critical to the MVP
  3. Business model and metrics — How the product will make money and what metrics are important
  4. Competitive advantage — How your product is different from existing solutions
  5. Technical constraints — Technical, time, budget constraints for the MVP
Example prompt:
Create a comprehensive project brief for [PROJECT_NAME]. Include: 1) Problem description and success metrics - describe the user's real problem and how to measure success, 2) Target audience and user scenarios - demographics, pain points, prioritized scenarios for MVP, 3) Business model and metrics - monetization strategy and key metrics, 4) Competitive advantage - how this product differs from existing solutions, 5) Technical constraints - time, budget, and technical limitations for MVP. Format it as a structured markdown document ready to be saved in Docs/1_Overview/1_1-brief.md

Important: Create the brief directly in Cursor (or your AI tool) in the project folder. Use Markdown files (e.g., `Docs/1_Overview/1_1-brief.md`) — this allows AI to see the full context through codebase indexing.

Step 2: Requirements Elaboration

Based on the brief, detail functional and non-functional requirements. This becomes the foundation for technical specifications and design decisions.

What to Document

  • Functional requirements (list of features and capabilities)
  • Non-functional requirements (performance, security, scalability)
  • User scenarios (use cases) prioritized for MVP
  • Technical requirements and constraints
  • API specifications and data structure
Example prompt:
Based on the project brief in Docs/1_Overview/1_1-brief.md, create detailed requirements documentation. Include: 1) Functional requirements - complete list of features for MVP with priorities, 2) Non-functional requirements - performance benchmarks, security requirements, scalability needs, 3) User scenarios - detailed use cases for each prioritized scenario, 4) Technical requirements - platform, frameworks, integrations needed, 5) Data structure - key entities and their relationships. Save as Docs/2_Requirements/2_1-functional-requirements.md

Step 3: UX Design and Information Architecture

Design the user experience based on the brief and requirements. The description of the audience and scenarios from the brief will define UX solutions, information architecture, and UI patterns.

Design Process

  • Create user personas based on target audience
  • Design user flows for key scenarios
  • Create information architecture (sitemap, navigation structure)
  • Design wireframes and prototypes
  • Define design system and UI patterns
Example prompts:
Based on the brief and requirements, create detailed user personas for [PROJECT_NAME]. Include: demographics, professional context, current tools and habits, pain points, needs, and goals. Make each persona specific and actionable for design decisions. Save as Docs/3_Design/3_1-user-personas.md
Create user flows for the key scenarios from the brief: [LIST SCENARIOS]. For each flow, document: steps the user takes, decision points, potential friction points, and how the app helps them. Include both happy path and error states. Save as Docs/3_Design/3_2-user-flows.md
Design the information architecture for [PROJECT_NAME]. Create a sitemap structure including: main categories, key pages, user account sections, and navigation patterns. Consider SEO and user navigation. Document the rationale for each structural decision. Save as Docs/3_Design/3_3-information-architecture.md

Step 4: Technical Specification and Architecture

Based on the brief and requirements, formulate architectural solutions, technology choices, and API specifications.

What to Document

  • Technology stack and framework choices
  • System architecture and component structure
  • API specifications and endpoints
  • Database schema and data models
  • Security considerations
  • Deployment strategy
Example prompt:
Based on the requirements and design documents, create a technical specification for [PROJECT_NAME]. Include: 1) Technology stack - recommended frameworks and tools with rationale, 2) System architecture - component structure and how they interact, 3) API design - endpoints, request/response formats, authentication, 4) Database schema - tables, relationships, indexes, 5) Security measures - authentication, authorization, data protection, 6) Deployment plan - hosting, CI/CD, monitoring. Save as Docs/4_Technical/4_1-technical-specification.md

Step 5: Iterative Implementation

Start building the product using micro-iterations. Break down implementation into small, atomic tasks. After each step — verify, adjust, next step.

Implementation Strategy

  • Start with core functionality (MVP features)
  • Break each feature into small, testable components
  • Implement one component at a time
  • Test immediately after each implementation
  • Commit to Git after each successful step
  • Document any problems and solutions encountered
Example prompts:
Based on the technical specification in Docs/4_Technical/4_1-technical-specification.md, set up the initial project structure. Create the folder structure, install dependencies, configure the build system, and set up basic routing. Use the technology stack specified in the technical spec. Make sure to initialize Git repository and create .gitignore file.
Implement the [FEATURE_NAME] feature based on the user flow in Docs/3_Design/3_2-user-flows.md. Break it down into: 1) Create the UI component, 2) Add the business logic, 3) Connect to API/data layer, 4) Add error handling, 5) Test the feature. Work step by step, testing after each step.

Step 6: Testing and QA

Test the product systematically to ensure it meets requirements and provides a good user experience.

Testing Approach

  • Unit testing for individual components
  • Integration testing for feature interactions
  • Usability testing with real users
  • Accessibility testing (WCAG compliance)
  • Performance testing
  • Security testing
Example prompts:
Create a comprehensive testing plan for [PROJECT_NAME]. Include: 1) Usability testing scenarios based on user flows, 2) Accessibility checklist (WCAG 2.1 AA compliance), 3) Edge cases to test for each feature, 4) Performance benchmarks and load testing scenarios, 5) Security testing checklist. Organize by testing phase (alpha, beta, production). Save as Docs/5_Testing/5_1-testing-plan.md
Analyze the following user flow for potential issues: [DESCRIBE FLOW]. Identify friction points, accessibility barriers, edge cases, and areas for improvement. Provide specific recommendations with priority levels (high, medium, low). Document findings in Docs/5_Testing/5_2-test-results.md

Step 7: Deployment and Monitoring

Deploy the product and set up monitoring to track performance and user behavior.

Deployment Checklist

  • Set up hosting environment
  • Configure CI/CD pipeline
  • Set up monitoring and analytics
  • Configure error tracking
  • Set up backup and recovery
  • Document deployment process
Example prompt:
Create a deployment guide for [PROJECT_NAME]. Include: 1) Hosting setup instructions, 2) Environment variables configuration, 3) CI/CD pipeline setup, 4) Monitoring and analytics setup (error tracking, performance monitoring, user analytics), 5) Backup and recovery procedures, 6) Rollback procedures. Save as Docs/6_Deployment/6_1-deployment-guide.md

Step 8: Feedback Gathering and Improvement

Collect user feedback, analyze metrics, and continuously improve the product based on real usage data.

Feedback Strategy

  • Set up user feedback collection mechanisms
  • Analyze analytics data regularly
  • Prioritize improvements based on impact
  • Document learnings and decisions
  • Update documentation as the product evolves
Example prompt:
Review and improve the project documentation for [PROJECT_NAME]. Check all documentation files in the Docs folder for: completeness, clarity, consistency, missing information, and areas that need updates based on recent changes. Suggest improvements and additions to make documentation comprehensive and useful for the team. Update the brief and requirements if needed based on learnings from implementation and testing.

Useful Links