AI-Coding
(this slide has no headine)
Fabian Wesner CTO & Entrepreneur
Career:
- Solopreneur & AI-Coding Coach
- Tech Co-Founder of Spryker and ROQ
- CTO of Rocket Internet and Project A
https://www.linkedin.com/in/fabian-wesner/
(1) Short presentation to set the scenes
(2) Hands-on workshop.
We'll build a full project together. You'll lean how I do it, so you can take inspiration.
(Ongoing): Q&A
I am here to answer all your questions about using AI-coding for your daily work. So don't hesitate to ask me at any time,
- Developer writes code (1x)
- Developer writes code with AI (1,3x) - Tab-completions / In-context editing
- AI writes code with developer (10x) - Coding Agents
Make it look stunning!!!
Who of you have experience with (A) Cursor (B) Claude Code (C) Other?
Use the "Who of you have experience with" as headline, not "Question 1"
Improve my copy
None of them is highlighted. But when I use up/down arrows, I can set a highlight-cursor. When I press "SPACE" then I can count (show nicely with a Magic component). Rember the counts in localStorage, so they are not lost for this session.
Who of you have experience with (A) MCPs (B) Sub-Agents (C) Planning-Mode
Same as above
Visually explain how Claude Code works (basics) Re-Act / Orchestrator
Show a basic prompt example, like adding a button
=> The AI will fill specification-gaps. => Leads to frustration (AI isn't doing what I want....)
(show the open specifications gap of the button, like what color, size, action, double-click ....)
(Optimize my copy and make it visually stunning)
(1) Prompt very specfic commands "Do this, do that" (<- often called "vibe coding")
- Good for fine-tuning (ideally with visual confirmation)
- Bad for building complex features (leds to brain rot)
(2) Brainstorm with AI Do a full brainstorming session with the coding agent. Result is a very detailed "prompt" with hundrets or thousands of lines.
Present it wisly
(1) Plan complex features with AI
(2) Provide the right tools
(3) Define guardrails
This checklist will be shown multiple times, and we'll add items For now add a focus marker on (1) Not movable. This is the next section
- Brainstorm the feature with the Coding Agent
- ....
Create the content of the slide. We are not doing SDD by the books. Instead we are using it like described in these two Claude Code commands (don't mention them; just for context)
Add a footnote, that we are doing it without additional tools today, but there are popular ones like spec-kit from Github (link to https://github.com/github/spec-kit)
Create this slide based on my thoughts: Coding Agent creates a code but when it's not able to try out things and see the consequences, it cannot improve itself. So it's very likely to fail. That's why we need to give it to it so Coding Agent can
- "see" the result
- query the database
- read logs
- use scripts
- do research
- run tests
MCP = Model Context Protocol
Laravel Boost | ... Playwright | Jetbrains |
Footnote: Depending on your IDE and technology stack, other MCPs might be better.
Show MCP = Model Context Protocol in a box. Add a short description what is.
Show the MCPs as table. Add a short description for each and what it enables (see see slide http://localhost:3000/demo/13) Mark thoses that are ootb (Claude Code)
The goal is to generate production-ready code. What does that mean?
- Features are complete and correct
- Architecture stays consistent
- Code conventions are obeyed
- Existing libraries are used
- Code is tested
Optimizy the content (did I miss something fundamental?)
- Make sure the agent "knows" what it needs to know
- Full documentation of your systems
- Schema, Architecture, Technologies
- Your code conventions
Example (for COde Conventions):
3. No Magic Strings:
- NEVER use string literals for constants, statuses, types, etc.
- ALWAYS use class constants or enums
- ❌ BAD: if ($status === 'pending')
- ✅ GOOD: if ($status === Status::PENDING)
- Use DTOs, Not Associative Arrays:
- NEVER pass associative arrays between layers
- ALWAYS create typed DTO classes for data transport
- DTOs should have typed properties and clear structure
- ❌ BAD:
return ['name' => $name, 'url' => $url]; - ✅ GOOD:
return new CompanyData(name: $name, url: $url);
Show examples as code
Make examples open when I press down arrow
Provide tools which allows the agent to check the results
- Check for code errors by giving access to the IDEs Intelisense (e.g. with Jetbrains MCP)
- Enable to write & execute tests (incl. security tests)
- Use skeptical sub-agents to do reviews
Examples for sub-agents:
- Architecture Guarding - Knows all your conventions and checks the code critically
- Spec Checker - Checks specification for gaps, logicak hickups and completness
- Result Inspector - Checks the implementation is compliant to the specs (nothing forgotten, nothing added)
Use people icon for the sub-agents. Show ony by one when I press down arrow
Claude Code
- Most advanced coding agent
- Maintained by Anthropic
- "Flaterate" pricing
- Works with JetBrains
- Learning curve
- Raw CLI tool*
Cursor
- Amazing UX (main reason to use it)
- All LLMs available
- Limited to VSCode
- There is a nice VSCode plugin available ** Claude Code can also be used with other LLMs
Show the (main reason to use it) not as regular text, more as hint
Show company logo for Cursor Show ascii art for Claude COde (using the right colors)
▐▛███▜▌ ▝▜█████▛▘ ▘▘ ▝▝
- The developer is fully responsible for the outcome.
- Work produced by a Coding Agent is treated exactly like human-written code.
- AI carries no blame and no accountability when things go wrong.
Present as a prime directive
While building software, the developer also builds a mental model of it. That model is just as important as the code. If a company loses the person who holds it, the software often becomes far less usable.
When using Coding Agents, there is a risk of loosing the mental model!
So to keep the mental model:
- Don't let the AI decide anything!
- Always check the results!
- Enforce "your" architecture!
When AI makes a "mistake" then it's
- 95% missing clear instructions (-> SDD + Knowledge + Guardrails + Checks)
- 5% Non deterministic behavior
The last 5% are still a challenge!
Percentage values are based on my experience
Before (simplified)
- Technical specifications
- Programming
- (Unit) testing
- Validation of results
With AI Coding Agent:
- Technical specifications (80%)
- Validation of results (10%)
- Perfectionizing the setup for the Coding Agent (5%)
- Coding (5%)
What We're Building A small app for damage reporting for courier operations. Drivers upload photos of damaged packages, and the system automatically assesses severity and generates professional reports.
Procedure:
- I will build it in front of you
- You are doing it in parallel locally.
- Use whatever technology you like (we need UI, some business logic and a database (e.g. SQLite)).