Home / Interactive Guide
Step 1 of 8
App Identity
Fill in the basic info about your app. These values are shared with the Blueprint editor.
App Info
APP_NAME
APP_DESCRIPTION
APP_NAME_LOWER
BUNDLE_ID
DEEP_LINK_SCHEME
STORAGE_PREFIX
ENTITLEMENT_ID
Domains
DOMAIN
APP_DOMAIN
SENDER_EMAIL
Open full Blueprint editor →
Step 2 of 8
Google Stitch — Screenshoti
Preden začneš kodirati, vzemi screenshote konkurenčne appke in jih naloži v Stitch.
💡 Stitch ti da vizualni referenčni dizajn za vse nove ekrane. Claude Code ga potem bere direktno prek MCP.
Poslikaj te ekrane konkurenčne appke
  • Onboarding / questionnaire — primer vprašanja, review screen, multiple choice, name input
  • Paywall / subscription screen
  • Main tab / home screen
  • Core feature screen (npr. recipe detail, scan result, workout)
  • Profile / settings
Naloži v Stitch
Step 3 of 8
Google Stitch — Dizajn
Izberi stil in nastavi design token-e. Potem paste-aj prompt v Stitch.
Style Word Bank — kombiniraj termine za STYLE polje
Layout
Bento Grid Editorial Swiss Style Split-Screen
Texture
Glassmorphism Claymorphism Skeuomorphic Grainy/Noise
Atmosphere
Brutalist Cyberpunk Y2K Retro-Futurism
Color
Duotone Monochromatic Pastel Goth Dark Mode OLED
STYLE (kombiniraj zgornje ali napiši svoje)
Design Tokens
PRIMARY_COLOR
SECONDARY_COLOR
BACKGROUND_COLOR
TYPOGRAPHY
BUTTON_STYLE
CARD_STYLE
ICON_STYLE
DESIGN_FEEL
CORE_FEATURE_DESCRIPTION
TARGET_AUDIENCE
Paste-aj ta prompt v Stitch
☝️ Zgoraj desno izberi: Redesign (Nano Banana Pro) — priloži screenshot konkurenčne appke
Step 4 of 8
Google Stitch — Iteriraj
Izpopolni dizajn screen by screen, nato shrani Design System.
Step 2 — Refine current screen
Klikni edit na generiranem dizajnu, ena sprememba naenkrat:
"Make the buttons more rounded. Do not change anything else."
"Darken the background slightly. Do not change anything else."
"Use bolder typography for headings. Do not change anything else."
Step 3 — Iteriraj vse ekrane
  • Onboarding questionnaire
  • Hardlock paywall
  • Home / main tab
  • Core feature screen
  • Profile / settings
Step 4 — Variations (optional)
Uporabi Variations feature (1–5 opcij) za različne interpretacije pred dokončno odločitvijo.
Shrani Design System v Stitch
  • Klikni ikono palete (🎨) v desni stranski vrstici
  • Odpri ali ustvari Design System (npr. ime appke)
  • Klikni design system → zavihek DESIGN.md
  • Skopiraj celotno vsebino Design System
  • Prilepi jo v polje spodaj
DESIGN_SYSTEM (vsebina DESIGN.md iz Stitch)
Step 5 of 8
Poveži Stitch z Claude Code
Nastavi MCP, da Claude Code vidi dizajne direktno iz Stitch.
Share iz Stitch
  • V Stitch klikni Share (zgoraj desno)
  • Izberi Share to code editor
  • Izberi Claude Code
  • Kopiraj X-Goog-Api-Key vrednost
STITCH_API_KEY
Dodaj MCP v Claude Code — zaženi v terminalu:
claude mcp add stitch \
  --transport http \
  --url "https://stitch.googleapis.com/mcp" \
  --header "X-Goog-Api-Key: {{STITCH_API_KEY}}"
Preveri
/mcp
# Mora prikazati "stitch" kot connected MCP server
Step 6 of 8
Ustvari Supabase projekt
Nov Supabase projekt za to appko.
Koraki
  • Pojdi na supabase.com → New project
  • Izberi organizacijo Blub Blub (ID: erlpnfhaxleureredqcv, Jernej ima dostop)
  • Izpolni ime projekta ({{APP_NAME_LOWER}})
  • Nastavi močno geslo za bazo — shrani ga!
  • Po ustvaritvi kopiraj Project Reference ID iz Settings → General
Ostale vrednosti
SUPABASE_PROJECT_REF
APPLE_TEAM_ID
PRODUCT_PREFIX
MONTHLY_PRICE
ANNUAL_PRICE
DISCOUNT_ANNUAL_PRICE
LIFETIME_PRICE
Step 7 of 8
Prenesi CLAUDE.md
Generiraj izpolnjeno datoteko in jo premakni v projekt.
Koraki
  • Klikni Download spodaj → shrani CLAUDE-{{APP_NAME_LOWER}}.md
  • Premakni datoteko v projektno mapo in jo preimenuj v CLAUDE.md
Preneseš izpolnjeno datoteko brez sekcije "How to Start"
💡 Datoteka vsebuje Design System, vse placeholder vrednosti in navodila za Claude Code.
Step 8 of 8
Odpri Claude Code
Zaženi Claude Code in prilepi ta prompt za začetek.
Terminal — odpri Claude Code
cd ~/Documents/GitHub/{{APP_NAME_LOWER}}
claude --dangerously-skip-permissions
Paste-aj ta prompt v Claude Code

          
        

      


      

        🎉
        To je vse! Claude bo preveril placeholder vrednosti, naredil audit kode in začel z integracijo.
      

    


  


  
  

    
    1 / 8