Understand and Plan
Understand (Discover, Interpret, Specify)
DESCRIBE THE CHALLENGE:
- Developers are pushing code with no validations or accepting AI generated changes without reviewing.
- Developers need to learn how to implement safeguards in their coding and deployment workflows.
CONTEXT AND AUDIENCE:
The average audience I’m targeting with my comics are software developers early in their career. They are likely recent grads within the past 2 years, they graduated in the modern development landscape where AI tools such as ChatGPT, Cursor, Claude and most likely involved these tools heavily in their schooling. This led to them using these tools heavily for their development workflow.
Now that I’ve determined the average, I want to expand to 2 other demographics that are offshoots of this: Startup Developers and Students. Startup Developers handle their entire company’s tech stack, due to the incredible amount of work involved, they likely used AI tools extensively. Students likely started their school with all AI tools available to them.
An extreme case I can think of are “vibe coders”, this term is coined by Andrej Karpathy, the co-founder of OpenAI. Describe a coding approach that relies entirely on AI, generating the entire codebase rather than manually writing it. A key personality trait is that the user would use AI generated code without reviewing, testing and understanding.
One common aspect in all targeted audiences is the reliance on AI tools, and the possibility of blind acceptance of AI generated code.
POV STATEMENT:
- Software Developer needs to understand the importance of validation or reviewing methods to valide the correctness off AI generated code.
- Software Developers needs to learn how to implement safeguards and automated vulnerabilities scanning so that their AI generated code is safe for use.
LEARNING OBJECTIVES:
- Software Developers will understand that they need to implement reviewing methods or safeguards in their AI generated code.
- Software Developers will be able to know how to research and implement safeguards and vulnerabilities scanning with commonly used tools such as SonarQube or Snyk.
Plan (Ideate, Sketch, Elaborate)
IDEATION:
My most promising prototype has the following story flow: Showcase a worst case example of a leak based on the story of the Tea application leak (showcase a non-technical CTO “vibe coding” the app, then the leak, then the media coverage and downfall of the company), then show an alternative version on how this would have be prevented.
My brainstorming process is more reliance on understanding how to create an impact on reader’s perception of the dangers of these tools, which I determined would be through a fictional story based on real life. I believe once that baseline is established then we can proceed to show remediations or alternative paths the situation could have taken.
I also want to highlight the impact of the situation, and descibe a worst case scenario thorugh my story-telling, these 5 aspects also need to be established within the example: Location, Action, Thoughts, Emotions, Dialogue.
Prototype
To start this prototypes, I tried to look at available comic editor online, I found https://app.pixton.com and https://www.storyboardthat.com. But these actually have paid subscription prices. I decided with the price limitation to create a script and prototype on paper first before finalizing on one of these tools.
Using the template provided for this challenge, I created a 16-panel script:
Script
Panel 1: Wide shot, modern startup office. Logo: “TeaPay – The Future of Finance.”
Caption: “Meet TeaPay, a scrappy fintech startup.”
Panel 2: Close-up of the CTO, casual hoodie, laptop covered in stickers. He grins.
CTO (thinking): “Why waste time coding? I’ll just let the AI do it all.”
Panel 3: Monitor shows AI code being generated with prompts like “Build a finance app that handles payments.”
Caption: “AI-generated, copy-pasted straight to production.”
Panel 4: The CTO hits deploy with a dramatic click. A prompt shows “Done!!”.
Sound effect: CLICK!
Panel 5: Big monitor flashes: “Deployment Successful.”
CTO: “See? Easy. Who needs code reviews?”
Panel 6: A junior developer at the office looks worried.
Dev: “Uh, shouldn’t we test it?”
CTO: “Relax. AI knows best.”
Panel 7: Social media post: “Introducing TeaPay! Seamless financial transactions in seconds!”
Crowd of online users cheering with emojis.
Panel 8: Close-up: server folder with financial_data.csv exposed.Caption: “But the AI code left doors wide open…”
Panel 9: Shadowy hacker at terminal.
Hacker: “Wow, no security at all!”
Panel 10: Screen filled with spreadsheets of salaries and balances.
Caption: “Sensitive financial data leaked.”
Panel 11: News headline: “TeaPay Financial Leak.”
Customers comments: “Our info is online!”
Investor: “You lost our trust!”
Panel 12: Empty office, lights off.
Caption: “TeaPay collapsed overnight.”
Panel 13: Same office, junior dev speaking.
Dev: “Let’s run tests and scans first.”
Panel 14: Split visuals:
- Screen with Unit Tests: PASS/FAIL
- SonarQube dashboard: “Vulnerabilities detected”
- Team discussing fixes at whiteboard.
Caption: “Scan! Test! Fix!”
Panel 15: Social post again: “TeaPay is live – now secure!”
Customers comments: “This is such a good product!”
Investor commented: “I believe in you!”
Panel 16: Split panel:
Left = dark collapse.
Right = bright success charts.
Caption: “The difference? Cleaning up after your AI code!”
After finishing the script, I hand-drawn a prototype, specifying the scene and character of each panels.
Prototype
After receiving feedback and finalizing my prototype, I will most likely continue to create the final version on Pixton or Storyboard That.
Leave a Reply