From: gregisenberg
Chris Barok, a developer who has built a portfolio of mobile applications, leverages AI tools to streamline and enhance his development process, particularly for UI and asset generation [00:01:34]. He emphasizes how AI helps achieve a higher level of polish in native apps [00:02:48].
UI Generation with Cursor
Chris uses Cursor for building native iOS applications [00:02:14]. His approach to UI generation involves:
- Focusing on UI First Chris’s technique is to first prompt the AI to generate only the User Interface (UI), often with dummy data [00:13:21]. This strategy makes it easier for the AI to follow instructions as it can focus on a single task [00:13:39]. For example, he prompted Cursor to create a new tab for an AI chat, asking it to make the UI and hardcode dummy data [00:13:07].
- Matching Existing UI When generating UI, Chris instructs the AI to “try to follow the similar UI as other parts of the app” [00:14:19]. This ensures consistency in design elements like color schemes and component usage [00:15:10]. For instance, the AI successfully matched the purple color scheme of his budgeting app [00:15:15].
- Iterative Refinement and Visual Feedback During UI development, Chris frequently feeds screenshots of the app to Cursor, showing it what he sees and allowing it to identify and fix errors or refine the UI [00:17:00]. This visual feedback loop helps in correcting layout issues, such as a message area being hidden [00:15:51].
- Handling Unexpected Features In one instance, after prompting for the chat UI, Cursor automatically hardcoded responses and even an animation where messages scrolled down [00:15:23]. This demonstrates the AI’s ability to incorporate standard UX patterns for messaging apps without explicit prompting [00:16:31].
“Cursor knew exactly what to do. Yeah. Yeah, you didn’t you didn’t have to, you know, it’s that was insane. Yeah.” [00:16:38]
Challenges in UI Setup
While AI excels at generating UI elements, it struggles with the initial project setup for Xcode, requiring manual configuration of settings and frameworks [00:08:41]. Tasks like enabling outgoing network requests must also be done manually in Xcode [00:09:39].
Asset Generation with GPT-4o
Chris uses GPT-4o for asset generation, noting its significant improvement in quality in recent weeks [00:05:10] [00:49:00]. This capability allows him to add a “level of polish” to his apps [00:05:25] and consistently create high-quality assets [00:05:37].
Techniques for Asset Generation:
- Generating Secondary Assets from a Primary One
By providing GPT-4o with an existing mascot or character image, Chris can generate an “infinite number of secondary assets” for various uses like loading screens or empty states [00:49:28]. Examples include:
- Adding wired glasses and placing the mascot in front of a laptop [00:49:37].
- Changing the background color to purple and making the mascot appear to float [00:49:51].
- Adding specific objects like a coffee cup or books under a tree [00:49:58].
- Modifying specific features, such as removing legs or making a dog look like a specific pet by feeding in its image [00:50:14] [00:50:17].
- Adding “Delight” and Humanizing Apps AI-generated assets can add a crucial “dimension” to apps, allowing for cool empty states and illustrations [00:51:40]. This helps “humanize” the app, making it more appealing and relatable to users [00:52:16].
- Brainstorming Mascots and Logos Chris also uses AI to brainstorm ideas for mascots or logos. For his meeting transcription tool, he asked for mascot ideas for an app that “lives in the background,” which eventually led to the concept of a ghost [00:53:06] [00:53:24].
Challenges in Asset Generation:
- Specificity in Prompts While powerful, AI asset generation often requires very specific prompts. For example, when trying to remove a mouth from a dog illustration, the AI also removed the nose, demonstrating the need for precise instructions [00:50:56] [00:51:02].
- Success Rate Chris estimates the AI gets it right about 60-70% of the time, which he still considers worthwhile due to the time saved [00:51:12] [00:51:14].
Generating Realistic Mock Data
AI tools can also be used to generate realistic mock data for testing and demonstrations [00:31:16]. Instead of generic data, Chris prompted the AI to create mock transactions for a 28-year-old male in Dallas, including real restaurants, which made the demo much more compelling [00:31:41]. This technique helps potential users envision themselves using the app [00:33:01].
“It’s not even just for you. So what you can do is you can come up with an idea for a startup, use cursor to build it, use some of this mock data, rec, you know, compile, build, record a video now with that data that’s way more interesting, post it on X, see if people actually want the app.” [00:32:24]
Overall Impact
Chris believes that AI tools will lead to “a lot more beautiful apps” [00:51:51] and encourage developers to go beyond bare-bones designs [00:51:58]. He encourages developers to embrace AI tooling as it is inevitable and will be crucial for thriving in the coming decade [00:54:23] [00:54:26]. He suggests non-developers use AI as a learning tool, perhaps with more guided tools like Replit or Lovable, to build foundational programming skills before diving into more “dangerous” tools like Cursor [00:54:42] [00:55:00].