Design document & wireframes

Discussion
1

Hello community,

I am new to Cursor and on my second application, which is a iOS app, I will work between Curson and Xcode.

Based on learnings from my first web app, I have built a much more comprehensive design document. This includes;

Goals of the application
Key requirements
Technical requirement (backend, data storage etc)
Detail on design principals (ui)
Page by page design brief
Text based ui wireframe
Detailed design requirements inc specific stylings

All of this is quite detailed, but more understanding is having this as reference documentation for the project will greatly assist with the build as I want to try build as much with LLM assistance as possible.

Can you please advise how I would go about configuring this within Cursor?

2

You can structure all of this documentation using Project Rules in the .cursor/rules directory - this is the most comprehensive way to keep everything organized and accessible to the AI

Here’s how I’d break it down:

  1. Create separate rule files for each section (goals, requirements, design, etc)
  2. Use glob patterns to match iOS-specific files
  3. Reference your wireframes and detailed specs using @file syntax

For the iOS-specific stuff, you can use @Docs to include any relevant Apple documentation that you want the AI to reference

Check out our docs on Project Rules for the full setup guide: Cursor – Rules for AI

And here’s how to configure custom docs: Cursor – @Docs

3

Thanks mate - I’ve broken out all the documentation now. Have the master design document and have broken down each component part into a design document in a logical order. First part of the build done - will read the details you’ve shared and share any questions if I have them

1 Like