Loopy
A personal crochet companion app — AI-assisted pattern reading, row-by-row progress tracking, and inspiration collection, all in one place. My first self-built mobile app. 一款個人鈎織助理應用程式 — AI 輔助解讀織圖、逐行追蹤進度、收藏靈感，全部整合在一起。我自己做的第一款手機軟體。
"I started crocheting as a beginner with no in-person instruction. AI helped me decode patterns — but everything lived in a single chat thread, and I kept losing my place." 「我是一個沒有人教的鈎織新手，靠 AI 幫我看懂織圖。但所有資訊都存在同一個對話視窗裡，很容易就找不到之前討論的內容。」
That frustration became the product idea. I needed something that could hold all the pieces of my crochet practice together: a place to save patterns from YouTube or PDFs, a row counter I could actually trust, a space to store inspiration. So I decided to build it myself — without a background in mobile development, using AI as my collaborator throughout the entire process. 這個挫折感變成了產品的起點。我需要一個能把鈎織過程所有環節整合在一起的工具：可以儲存 YouTube 或 PDF 來的織圖、一個真正可以信任的計圈器、一個收藏靈感的空間。所以我決定自己來做 — 沒有手機開發背景，整個過程都用 AI 當協作夥伴。
Pattern reading, assisted AI 輔助解讀織圖
Upload a YouTube video, screenshots, or PDF — Gemini AI extracts a row-by-row pattern you can actually follow. 上傳 YouTube 影片、截圖或 PDF，Gemini AI 自動整理成可以逐行跟著做的織圖。
Row counter with context 有脈絡的計圈器
Track your current row alongside the actual pattern instructions — no more switching between apps or losing your spot. 在顯示織圖說明的同時計算目前的行數，不用再在不同 App 之間切換或忘記做到哪裡。
Inspiration collection 靈感收藏夾
Save links from Instagram, YouTube, and Pinterest with automatic platform detection and preview — all your ideas in one scroll. 儲存 Instagram、YouTube、Pinterest 的連結，自動辨識平台並抓取預覽，所有靈感一目了然。
Status: In progress. 狀態：製作中。 Core features are built and deployed. User testing and final polish not yet started. 核心功能已完成並部署，尚未進行使用者測試與最終調整。
Loopy's visual language is built around a single metaphor: a handmade sketchbook. Every colour feels like it belongs in a yarn stash. The logo is a script wordmark with a crochet stitch texture fill — the core visual metaphor carried through the entire system. Loopy 的視覺語言建立在一個核心比喻上：手工製作的素描本。每個顏色感覺都像是從毛線盒裡拿出來的。Logo 是一個手寫字體，內部填充鈎針縫紋質感 — 這個視覺隱喻貫穿整個設計系統。
The wordmark uses a crochet stitch texture as fill — deep crimson base with terracotta rose stitches and pale cross-stitch marks. Only appears on white or cream backgrounds. 字體 Logo 以鈎針縫紋為填充 — 深紅底色、赭紅玫瑰色縫線、淡色交叉縫線點綴，只出現在白色或奶油色背景上。
Colour Palette 色彩系統
Background背景
Primary Green — Actions主要綠 — 互動
Accent Red — Brand Only品牌紅 — 僅用於品牌元素
Key Rules 設計原則
Loopy was built entirely by one designer — no engineers. Using Claude Code, I directed every technical decision from component architecture to Gemini API integration, entirely through conversation. I had the product vision and design system; Claude handled the code. Loopy 完全由一位設計師建造 — 沒有工程師。透過 Claude Code，我透過對話指引每一個技術決策，從元件架構到 Gemini API 整合，全部如此。我有產品願景和設計系統；Claude 負責程式碼。
Identified 4 friction points from my own crochet practice: no single place to save YouTube patterns, row counter apps with no pattern context, inspiration scattered across platforms, and AI conversations I kept losing. Each became a feature. 從自己的鈎織經歷中找出 4 個痛點：沒有地方統一儲存 YouTube 織圖、計圈 App 沒有織圖脈絡、靈感散落在各平台、AI 對話常常找不到。每個問題都成為一個功能。
Before writing a line of code, I defined the full visual language in a design style guide: brand identity, colour tokens, component colour map, typography rules, and what to avoid. This became the single source of truth for all subsequent AI collaboration. 在寫任何程式碼之前，我先在設計風格指南中定義完整的視覺語言：品牌識別、色彩 token、元件色彩對照表、字體規範，以及應避免的事項。這成為所有後續 AI 協作的唯一標準。
Started with a single React file (loopy.jsx) to validate all features quickly — inspiration collection, AI pattern modal, counter, project management, settings with invite gate. Once the logic was stable, migrated to a Vite project with proper component structure. 先用單一 React 檔案（loopy.jsx）快速驗證所有功能 — 靈感收藏、AI 織圖 Modal、計圈器、專案管理、有邀請碼機制的設定頁。邏輯穩定後，遷移到有正確元件結構的 Vite 專案。
Integrated Google Gemini 1.5 Flash to process YouTube links, video screenshots, and PDF files — outputting structured row-by-row patterns in two formats (Row-by-Row and Written). Built a mock fallback so the feature works in demo mode without an API key. 整合 Google Gemini 1.5 Flash，處理 YouTube 連結、影片截圖和 PDF 檔案，輸出兩種格式的逐行結構化織圖（逐行格式與書寫格式）。建立 mock 備援，讓功能在沒有 API key 的情況下也能以示範模式運作。
The app is live at loopy-khaki.vercel.app with a VIP invite-code gate and a black cat easter egg onboarding screen. User testing and final polish have not yet started — this is still a work in progress. App 已上線於 loopy-khaki.vercel.app，有 VIP 邀請碼機制和黑貓彩蛋引導畫面。使用者測試和最終調整尚未開始，目前仍在製作中。