AI in mijn werk
Mijn eigen tools bouwen.
Ik gebruikte AI om te helpen met de code voor zes tools die ik op mijn werk nodig had. In twee tools is AI ook een onderdeel van de tool zelf. Trace vat samen waarom een besluit is genomen. Help Page Creator maakt een eerste hulptekst op basis van een stapsgewijze uitleg.
Voor sommige tools wilde ik een extra abonnement vermijden. Andere moesten met ons ticketformat werken of gegevens op de computer van de gebruiker bewaren. Ik bepaalde wat elke tool moest doen, gebruikte AI voor hulp bij de code en werkte tijdens het bouwen de details uit.
Ticket Submitter
TypeScript
HTML
CSS
Chrome MV3
Een fout zien is vaak makkelijker dan uitleggen hoe die ontstaat. Ik wilde dat iedereen die ons product test een bruikbaar verslag kon sturen, zonder te hoeven weten welke browsergegevens nodig zijn.
Ticket Submitter staat naast de applicatie en legt de stappen vast. Tijdens de opname verzamelt de tool automatisch foutmeldingen uit de browserconsole en voegt deze toe aan het actieve probleem. De melder kan screenshots of een korte GIF toevoegen en uitleggen wat er had moeten gebeuren. Daarna maakt de tool een verslag in ons bestaande Author-e-format, klaar om in de ticketeditor te plakken.
Dat format was een reden om de tool zelf te bouwen. We konden de softwareversie, testomgeving, testgebruiker, datum en teststatus opnemen die ontwikkelaars nodig hebben. De verzamelde informatie blijft lokaal totdat de melder deze deelt.
Ik zorgde ook dat de stappen leesbaar bleven. Een klik gevolgd door een paginawissel wordt één stap. Klikken zonder bruikbaar label worden weggelaten.
De melder controleert het verslag vóór het delen.
HTML → Figma
- TypeScript
- HTML
- CSS
Figma Plugin API
Ik probeerde een HTML-naar-Figma-tool, maar daarvoor was een betaald maandabonnement nodig. Ik wilde mijn prototypes in code terugbrengen naar Figma om ze te bewerken. Daarom probeerde ik zelf een importtool te bouwen.
De pagina in Figma krijgen was maar één deel van het werk. De lagen moesten ook bruikbaar zijn. Ik werkte aan het behouden van de indeling, het overnemen van vaste ontwerpwaarden en het verwijderen van onnodige lagen.
Auto layout kon de positie van onderdelen veranderen. Ik voegde een controle toe op de oorspronkelijke posities. Als de berekende indeling onderdelen te ver verplaatste, behield de importtool hun vaste posities.
Time Tracker
C#
.NET
Windows Forms
We wilden weten waar onze werktijd naartoe ging, zonder activiteitengegevens naar een externe dienst te sturen. Die gegevens kunnen paginatitels, URL’s en details van vergaderingen bevatten.
Ik bouwde een Windows-tool die de database en rapporten op de computer van de gebruiker bewaart. Gebruikers kunnen de opname pauzeren en kiezen wat ze delen. Met ‘Dag afsluiten’ opent het rapport en stopt de registratie tot de volgende ochtend.
Ik richtte het rapport in rond projecttijd, vergaderingen en een tijdlijn van de dag. De regels voor het groeperen kunnen veranderen zonder de oorspronkelijke gegevens te wijzigen. Zo kan eerder werk later opnieuw worden ingedeeld.
Mockup Studio
- TypeScript
- HTML
- CSS
Voor beelden in mijn portfolio deed ik steeds hetzelfde werk: een scherm in een apparaatframe zetten, de achtergrond aanpassen en uitleg toevoegen. Ik wilde die opzet kunnen bewaren zonder een extra abonnement.
Met Mockup Studio kan ik apparaten plaatsen, hun hoek veranderen en de afbeelding exporteren. Ik kan meerdere werkvlakken in één project bewaren en later verdergaan. De productschermen die je hier ziet, zijn in de tool zelf geladen.
Trace
React- TypeScript
Een besluit is soms makkelijk te vinden, terwijl de reden ervoor ergens in een discussie staat.
Trace gebruikt AI om die reden terug te vinden. Ik wilde zien wie het oneens was, wat tot het uiteindelijke besluit leidde en of een nieuw besluit het oude had vervangen.
Ik liet de oorspronkelijke discussie onder de AI-samenvatting staan, zodat de lezer deze kan controleren. Bij een zwakke overeenkomst is het antwoord minder opvallend en krijgt de lezer het advies de bron te lezen. Ik gebruik voorbeelddiscussies om deze situaties uit te werken. Hoe goed de tool de juiste informatie terugvindt, moet nog worden getest.
Voorbeeldsituatie · Sales, Engineering, Design, Support en Product wegen een volledige export af tegen time-outs en toegangsrechten. De personen en de discussie zijn verzonnen.
Help Page Creator
- TypeScript
- HTML
- CSS
Ik maakte al stapsgewijze uitleg over het product. Voor een hulpartikel over hetzelfde proces moest ik de instructies opnieuw schrijven.
Help Page Creator gebruikt AI om op basis van die uitleg een eerste tekst te maken. De systeembeheerder controleert de stappen in het product, past de tekst aan en plaatst uitleg bij de screenshots vóór publicatie.
Ik bouwde de tool rond onze bestaande hulppagina’s. Zo kan de tekst op één plek worden bewerkt en bekeken. AI maakt de eerste versie; de beheerder bepaalt wat klaar is voor publicatie.
- 01Doorloop het product
- 02AI maakt de eerste instructies
- 03Beheerder controleert en publiceert
Een ontwerpsysteem dat AI kan volgen
Ik werk ook aan het ontwerpsysteem van LearningBox. Daarin staan regels die AI kan volgen bij het bouwen van een interface. Bij de componenten staan vaste ontwerpwaarden, gebruiksregels en notities. Zo is de uitleg onderdeel van het systeem.
Dat geeft AI duidelijke richtlijnen: welk component past, wat een statuskleur betekent en welke afstanden en randen bij het product horen. Het doel is minder tijd te besteden aan het herstellen van basisverschillen, en meer aan de bediening zelf.
