Fullständig handledning: Bygg en vacker mobilapp med Claude Code and Pencil på 16 minuter

In This Article

Kära prenumeranter, Idag vill jag visa er hur man bygger en vacker mobilapp för att spåra dina träningspass. Att bygga en mobilapp brukade kräva ett team av ingenjörer. Men AI-verktyg som Claude Code och Pencil har gjort det enkelt för dig att skicka en vacker app själv även om du inte vet hur man kodar. Titta på min handledning för att se mig gå igenom hur man gör detta på bara 16 minuter. Tidsstämplar:(0:00) Vad vi kommer att bygga: En vacker mobilapp för att spåra dina träningspass(2:01) Steg 1) Steg 1: Definiera design med Claude (62:1 krav) Pencil(8:56) Steg 3: Bygg appen med Claude Code(14:21) Skaffa appen på App Store(15:19) Sammanfattning av alla 3 stegSe nu på YouTube eller läs den skriftliga guiden nedan. Jag är stolt över att samarbeta med...GranolaGranola har precis lanserat Spaces – ett nytt sätt för ditt team att organisera och dela mötesanteckningar med varandra. Till exempel kan du skapa ett "Användarsamtal"-utrymme med dina intervjuer så att alla kan ställa frågor om användarnas behov. Du kan till och med ställa frågor direkt i Claude, ChatGPT eller Gemini med Granolas nya API:er och MCP. Prova Granola gratisVad vi kommer att bygga: En mobilapp för att spåra dina träningspass Vi lever i en tid där det är lättare att koda din egen mobilapp än att hitta en befintlig som du gillar. Så låt oss bygga en app som kan: Skapa träningspass genom att välja en övning och sedan antalet set och reps. Spåra träningspass live genom att trycka på varje träningsuppsättning för att slutföra den. Mät framstegen via en kalender och diagram för varje övning. Jag kommer att gå igenom hur du bygger den i tre steg nedan.1. Definiera kraven med Claude Be alltid Claude att ställa frågor till dig när du definierar kraven tillsammans. Låt oss börja med att klistra in denna uppmaning i Claude: Låt oss arbeta tillsammans om kraven för en mobil fitnessapp. Jag vill ha tre skärmar: Lägg till/redigera träningspass: Skapa träningspass och lägg till övningar med set och reps.Träningspass: Spåra träningspass i realtid, tryck för att slutföra setKalender: Se vilka dagar du tränade och se träningsdetaljerDetta är grunderna, men låt oss arbeta på specen tillsammans. Jag vill att du håller dig tydlig med kraven, och om du har några frågor, ställ dem i en numrerad lista. Den viktigaste delen av denna uppmaning är "Om du har några frågor, ställ dem i en numrerad lista." Jag inkluderar alltid den här raden när jag diskuterar krav med Claude så att den kan ställa frågor till mig för att göra specen bättre. Här är några exempel på frågor och svar: Claude: Vill du ha en vilotimer? Jag: Ja, låt mig också anpassa det i inställningarna. Claude: Vill du ha automatisk nedladdning efter misslyckade set? Jag: Nej, låt oss hålla det enkelt. När Claude har fått specifikationen till ett tillstånd som du är nöjd med, be den: "Dela upp specen i design och tekniska krav. Var inte för detaljerad om designkraven så att den har utrymme att flexa." Inkludera den sista raden eftersom Pencil (vår AI-designer) är bättre på design än Claude. 🙂 Låt oss ta upp det härnäst. När modellerna blir bättre har jag blivit latare i mina uppmaningar (och sämre på att stava)2. Designa de mobila skärmarna med PencilPencil skapade 8 vackra skärmar från grunden från våra krav. Det är här magin händer. Så här använder du Pencil för att skapa vackert utformade mobilskärmar istället för AI-slop: Läs mer

You May Also Like

13 Trending Songs on TikTok in March 2026 (+ How to Use Them)

Our Best AI PM Workflows for Prototyping, Strategy, and Personal OS (2026)

China’s Cybersecurity Agency Issues Security Warning About OpenClaw