Mainboard
HommesFemmes
HommesFemmes
Artistes
ImageBeautéStyling & Décor
ImageBeautéStyling & Décor
Society
HommesFemmesEnfants
HommesFemmesEnfants
Digital
folio
À proposDevenir mannequin Folio
EN
À proposDevenir mannequin Folio
folio
EN
aboutbe-represented-by-folio
en

Yan Cacchione

Portfolio
Instagram
Posts: 92
Followers: 98.5k
Follows: 246
Follow @bymotamo__Share (:How-to recreate ↓ I made 36 animated story frames to promote my guided journals in under 2 hours. (would’ve probably taken me 10+ hours before.) Design workflow: @paper.design for the design + shader effects Notion for the copy database Claude code to connect everything MOTAMO’s design system already stored in memory The visual system was built around one shader effect: SHADER SETTINGS Effect: Dithering Shape(s): Wave, Simplex, Warp Type: Random Dither size: 0.2–0.5 Then I adjusted the speed, scale, foreground and fill colors to match the mood of each journal theme. HOW I BUILT IT 01 Creating the shader system I connected my AI agent to Paper so it could read my existing MOTAMO designs. From there, I created a shader guideline based on the design system, then manually adjusted each effect until it felt right for its journaling theme. 02 Building the story frames My Notion database already holds the journaling prompts and copy I use across MOTAMO. I connected it to my AI agent, selected the content, and pushed the first story frames directly onto my Paper canvas. 03 Applying the visual system I used the shaders as small “mood pills” for each journal theme. For the prompt frames, I used the same system more subtly as an animated background texture. 04 Export 36 story frames. mp4 - 10s - 1080p Ready to post on Instagram. Design is so much more fun when you know that everything you’ve already build is all connected together: brand guidelines, content, visual language and design canvas. using them as one workflow. more time to think, strategize and explore new ideas in depth.curating my favorite quotes here made a public quote library [research.motamo.so] to share my favorite books and quotes. currently going through all the books I’ve read and selecting all the quotes that have had a profound impact on my thoughts, my beliefs, philosophies, way of living, inspirations, etc.. currently working on the sharing and reflection note feature. check out my latest reel for the design process. lmk what i should improve!! tools prototyping : @paper.design code: @claudeai + @trycursor hosting: @vercel database: @supabasecom book page / see all the quotes from a selected book in a infinite scroll book tab / toggle interaction backend / publishing a quote dashboard / themes dashboard / book tab visit research.motamo.so - what should i improve?micrographics and illustrations for @matthgrayHow I use tokens to build my journaling app with @paper.design Last video I showed how I turned scattered assets into a brand guideline. Now I’m using the brand guideline to pull the tokens from, so I have the colors, fonts, and spacing ready whenever I need them on the side panel. The workflow: 1. Pull design tokens from the brand guideline with Claude Prompt I used: “Based on the brand guideline you just created, extract the design tokens. Colors, typography, spacing, radius, shadows. Structure them so I can use them across projects.” 2. Save the tokens into the project My agent writes them into the project where the code lives. 3. Tokens appear in the Paper side panel Colors and themes show up on the right side panel in Paper. Searchable, selectable, and easily recognizable by any design agent. What’s specific about my workflow is that the journaling prompts are divided into 9 core modules, each with its own color code. The agent recognizes that and names the color with the matching module. For example: Cream is for Slow Living Yellow is for Creativity Purple is for Limiting Beliefs Etc. 4. Build with the real system I manually designed and sketched out the search bar states and flow. I then fed it to my agent to save it as a core component. Each pill uses a journaling module name, pulled from the token panel. 5. Ship a component that already fits The search bar is done and it already looks like it belongs in the app.new goal: becoming world champion at supersmashRebuilding my design workflow with @paper.design This is how I went from scattered assets to an organized brand system any agent can recognize and work with. For context: I’m currently building an app for my journaling brand and I’ve made hundreds of design iterations scattered across different platforms over the past years. Instead of guessing or starting from scratch, I gathered the assets that felt closest to where the brand is now, and used them to build the brand guidelines my design agents will refer to throughout the build. The workflow: 1. Paste the most relevant assets into Paper, straight from Figma Super straight forward. Copy, paste, done. 2. Frame the assets in Paper and copy the link Everything in Paper is HTML/CSS, so the frame becomes real context an agent can read with accuracy. 3. Hand the link to Claude Code Prompt I used: “Hey, I just gathered these assets at this link: [link]. Can you take a look and create a brand guideline? Color system, icons and assets, typography, spacing, components, and anything you notice to be a recurring theme.” 4. Refine manually Back and forth between design agent, Paper and manually tweaking things. 5. Turning this into design tokens so every project stays consistent. Will cover this in the next vid. — About Paper: Been using Paper for a few months now, I was playing around this new agentic workflow, and see how it can help me bring my digital projects to life. I just love the back and forth flow, from prompting to designing and shipping to production. Next vid: creating design tokens.@motamo__which one? mirror mode for absolutely no reason 🙂‍↔️ playing around with different post layouts and concepts for Motamo & just finished the new line up of guided journals. excited to share soon
Mediaslide Model Agency Software