Notes on using AI IDE and figma to build App

Maybe I got COVID this weekend, so I took some rest and found time to read about the tutorial Build and design an AI image generator app for iOS without ANY design or coding experience. This is what I’ve been doing in recent weeks. The difference is that I’m using Windsurf instead of Cursor, but the workflow is similar. I still got some super cool ideas:

• The most important thing is to have an Instructions.txt file to tell the AI IDE what you want to do for the application you’re building. As quoted, “I find that this is a great way to let Cursor know exactly what the project plan is and guide it to stick to it while we develop our application.”

• If your application needs a first-party service or API, grab these service specs and save them to another file, ServiceSpec.txt. You can ask the AI IDE to reference this file when implementing relevant features.

• If you want to implement some functions and can find sample code or pictures, grab them all down to a file like feature1.txt, and ask the AI IDE to reference this file when implementing the relevant features.

• Use Figma. Start with the bottom button to create First Draft. First Draft will give you a few options; choose the one that best fits your needs. Then, prepare your prompt to generate the mockup and paste it into Figma. It will start generating. You’ll still need to do some tweaks to make it look better.

• You can generate simple code running before getting the mockup if you’re unsure about the design. Alternatively, you can start from Figma to get the mockup and then generate the code.

• When the AI IDE generates the code, it often introduces some bugs. You can emphasize the guidelines by mentioning @instruction.txt to stick to the direction.

• for cursor, you can create a .cursorrules file, contains the fundermental instructions, it should not be overused or made too long, as excessively long rules can lead to a lengthy context, which may affect the generation effect.

  • your main project category

  • main framework

  • naming conventions

    also reference cursor.directory

• Additional tips from my experience:

  • Use a mindmap to guide the functioning and design at the proposal stage, which will make the application development more efficient.
  • Create a mindmap to outline the aspects of the application’s functionality and UI flow; this is quite helpful.
  • Consider using ideogram to create concepts, then use them as input to Figma for mockup creation, which is also an efficient way to proceed.
  • based on the mindmap, for each component, give IDE a detailed instruction to generate the code
  • for Windsurf: after generating code, let it write the unit tests. This way, you can maintain stability when making changes next time. Moreover, if the tests fail, it will debug itself until they pass. By doing this, it also helped me discover bugs in my own program.”