GA.  /  Product Systems  ×  Sans Dijital
Proposal01 / 12

Strategic proposal · Côte d’Ivoire launch

Fromartifacts to alive product.

AI-powered product design infrastructure for the sportsbook & casino prototype. One environment where the product is reviewed live, every component is documented, and every release is controlled.

Prepared for Sans Dijital ve Interaktif Hizmetler Teknoloji Yatirim A.S. 27 October 2026 · Giovanni Angelini

Navigate with ↓ ↑ or scroll · the phone is interactive

XOF 25 000 +

The opportunity

A mature prototype.
A fragmented delivery path.

The research and the product logic are already there. What is missing is the system that turns each iteration into something the whole team can review, reuse and ship.

Preserve

Keep the Claude-based product work, the validated flows and every research-led decision. Nothing is thrown away to start again in Figma.

artifact_v7.htmlflows.mdresearch
Today: scattered artifacts
Systemise

Turn recurring UI into reusable, documented, inspectable components with states, rules and code.

OddsButtonBetSlipDepositMethod
Next: one component language
Deliver

Share browser-based staging and approved production demos with authorised teams, instead of screenshots in a chat.

stagingproduction-demorollback
Result: controlled releases

The model

One connected product environment.

Three surfaces, one shared language. Less translation between product, design and development.

Claude workspace

Where changes are asked for
  • Conversational updates
  • UI refinements and new features
  • Guided by the team’s Claude Skill

Live product demo

Where changes are reviewed
  • Staging and production-demo
  • Interactive, browser-based flows
  • Private access for invited users

Design system hub

Where components live
  • Search, states and code
  • Usage guidance and versions
  • Links back to product screens
Connected handoff: page→component→states→implementation reference

Technology and working method

Built in Claude. Reviewed live. Released in steps.

One stack for the setup and for the work that follows. Every approved version stays recoverable.

Platform

Claude Artifacts: each environment is a published HTML, CSS and JavaScript page. Private by default, shared by invitation.

HTMLCSSJavaScript
Today: one codebase
Environments

Staging holds changes under review. Production-demo holds approved versions. Promotion is a republish, not a rebuild.

stagingproduction-demorollback
Control: Liat approves each release
Components

The hub links each component to the screens that use it. A Claude Skill carries the naming, usage and state rules.

component hubClaude Skill
Result: consistent changes
Change loop: request→change in Claude→review on staging→approval→publish

Component hub · working preview

The design system becomes a product.

Not another static PDF. Try it: search a component, switch its states, read the generated markup, then jump to where it lives in the product.

Odds selection

v1.2.0
HTML reference · default

          

          

            
Used in

            

            
    
          
    
        
    
      
    
    
    
  
    

    



    
  
    
    
    Release process · try it
    
    
    Live review. Controlled release.
    
    
    Stakeholders review working experiences, not screenshots. Nothing reaches the approved demo without a named approval, and every version can be restored.
    
    
    
      
    
        
    
          
    Staging
    build #41
    
          
    Production-demo
    v1.0.3
    
        
    
        
    
          
    01
    Change
    Update in Claude or code
    
          
    02
    Staging
    Review live in the browser
    
          
    03
    Approve
    Validate the specific change
    
          
    04
    Production
    Publish the approved build
    
        
    
        
    
          
          
          
          
        
    
      
    
      
    
        
    Release log
    
        
      
      
      
    
      
    
      
      Protected access
      Versioned builds
      Automated backups
      Tested rollback procedure
    
      
  
      

      



      
  
      
    
      How people work
      
    
      Collaboration beyond design.
      
    
      The interface stays conversational. Governance stays intentional.
      
    
      
      
      
        
      01
      Request
      A product stakeholder describes an enhancement or a missing user flow, in plain language.
      
        
      02
      Prototype
      AI-assisted changes reuse existing patterns from the hub and land on staging for review.
      
        
      03
      Publish
      The approved release and its documentation stay in sync, with a human sign-off every time.
      
      
      
      
      
        
      Claude workspace · Sans Dijital
      
        
      
          
      Product leadCan we add Wave to the mobile money step of the deposit flow?
      
          
      ClaudeReusing DepositMethod v1.2 from the hub. Wave added as a third option, existing ordering rules kept. Preview is on staging build #43.
      
          
      Product leadLooks right on mobile. Approved.
      
          
      ✓ Published to production-demo v1.0.4 · DepositMethod documented as v1.3.0
      
        
      
      
      
    
      
  
      

      



      
  
      
    
      In-scope setup
      
    
      Initial setup: a 60-hour working estimate.
      
    
      Configuration and a first usable baseline, delivered over roughly two weeks. Not a full product redesign.
      
    
      
      
      
      
      
        
      Indicative schedule · 10 working days × ~6 h
      
        
      
        
      
        
      Total estimate60 h
      
      
      
    
      
    
      Indicative allocation. The final balance may shift after access and prototype review; the 60-hour estimate is billed on actual hours.
      
  
      

      



      
  
      
    
      Deliverables
      
    
      What the team receives.
      
    
      A working baseline they can access, use and extend from day one.
      
    
      
      
      Private product demo
      Accessible staging and approved production-demo URLs with a navigable conversion of the prototype’s included flows.
      Accepted: invited users can access and navigate
      
      
      Component hub
      Searchable design-system web app with component pages, states, usage notes and code references.
      Accepted: baseline set documented
      
      
      HTML flow reference
      Linked, navigable screens with component-to-screen links, plus source and configuration for engineering.
      Accepted: included flows navigable
      
      
      Release controls
      Two environments, a promote path, automated backups and a documented rollback procedure.
      Accepted: walkthrough of one release
      
      
      Claude starter Skill
      Initial instructions and examples anchored to the documented components and naming patterns.
      Accepted: new screen proposed with it
      
      
      Handover
      Session covering access, releases and component updates, with architecture and operating notes.
      Accepted: handover session held
      
    
      
  
      

      



      
  
      
    
      After setup · change requests
      
    
      Every new feature has a budget gate.
      
    
      No open-ended redesign commitment. Each task is assessed, estimated and authorised on its own.
      
    
      
      
      01RequestNeed described by the team
      
      
      02ScopeReviewed against the system
      
      
      03EstimateHours and cost stated
      
      
      04ApproveWritten sign-off before work
      
      
      05BuildImplemented in staging
      
      
      06ReviewChecked live by the client
      
      
      07ReleaseApproved publication
      
    
      
    
      The authorised client representative, Liat, approves estimated hours and cost before execution. Material changes to an approved scope are re-estimated before work continues.
      
    
      
      
      Typical follow-up tasks
      
      
      UX/UI refinementRegistration & verification statesSportsbook navigation & filtersBet slip patternsDeposit & mobile money flowsBet builderPromotionsResponsive statesExpanded documentation
      
    
      
  
      

      



      
  
      
    
      Scope guardrails
      
    
      Clear boundaries protect delivery.
      
    
      Build the system first. Extend the product against approved priorities.
      
    
      
      
      Included in the baseline
        
        
      • Assessment of the existing source and artifacts
      • Initial private live demo
      • Starter searchable component hub
      • Two release environments: staging and production-demo
      • Backup and rollback workflow
      • Initial Claude guidance and handover
      
      
      Not implied by the baseline
        
        
      • Redesign of every app screen
      • Unlimited component coverage or revisions
      • Betting engine, payments or live user data integration
      • Regulatory certification, KYC/AML or penetration testing
      • Full device QA matrix or ongoing maintenance
      • Third-party subscriptions, AI usage, hosting and domains
      
    
      
  
      

      



      
  
      
    
      Commercial proposal
      
    
      A defined setup. Flexible evolution.
      
    
      
      
      
        
      
          
      Initial environment setup
      Estimate for the defined baseline, billed on actual hours
      
          ~2 weeks · ~6 h/day
        
      
        
      €8,400excl. VAT
      
        
      60 hours estimated × €140 / hour · billed on actual time
      
        
      
          
      
            
      Work packageHoursRateAmount
      
            
            
      Total setup estimate60€8,400
      
          
      
        
      
      
      
      
      
        
      
          
      Ongoing product work
      
          
      €120 / hour
      
          
      Scoped, estimated and approved in writing before any work starts. Ongoing work runs at 2–3 hours per working day, prioritised with Liat each week.
      
          
      
            
            
            
      €840≈ 2 working days
      
          
      
        
      
        
      
          
      Terms
      
          
        
            
      • Fees exclude VAT and other applicable taxes.
        • 
            
      • Third-party costs (hosting, domains, AI usage, subscriptions) excluded unless agreed in writing.
        • 
            
      • Additional requests or material source reconstruction are quoted before work proceeds.
        • 
            
      • Payment milestones and invoicing agreed in the engagement confirmation.
        • 
          
      
        
      
      
      
    
      
  
      

      



      
  
      
  
      
    
      Next steps
      
    
      Build the foundation.
      Then improve the product,
      one release at a time.
      
    

      
      
      Sans_Dijital_AI_Product_Design_Proposal.pdf · 8 pages
    
      
    
      
      
      Giovanni AngeliniProduct Design · giovanniangelini.me
      
      
      Setup estimate  €8,400  / 60 hours