Skip to content

Build Mockup from Spec

Use this prompt when you have a product spec and want to create a functional UI mockup before implementing the backend.

The Prompt

# Task: Build Mockup UI for App


Below is a description of a Product Spec for my app idea that I want to create a functional mockup for.


Please implement all the pages and key interactions described in the product spec. Please use Daisy UI to accomplish this. Reference the context7 tool to read the DaisyUI docs if necessary.


Please implement any interactions that seem reasonable. You can mock all data / should not implement any backend logic.


## Goal


Functional mockup of product spec supporting key flows built using Daisy UI


## Non-Goals


Implementing any backend functionality


## Coding Guidelines


Please still try to follow good frontend coding practices like breaking things into smaller components / file so that the code is readable.


## Checklist before implementing


- Please ask any clarifying questions if the Product Spec is ambigious
  - Asking these are not essential and you should only do so if there are major things which are not clear in the spec.


--


# Product Spec


[PASTE PRODUCT SPEC HERE]

When to Use

  • At the start of a new app or feature
  • When you want to validate UI/UX before building the backend
  • When iterating on design with stakeholders

Tips

  • Replace [PASTE PRODUCT SPEC HERE] with your actual product spec
  • Upload screenshots or wireframes if you have them
  • The mockup should use mock data so you can test all the UI states