Mainboard
MenWomen
MenWomen
Artists
ImageBeautyStyling & Decor
ImageBeautyStyling & Decor
Society
MenWomenKids
MenWomenKids
Digital
folio
AboutBe Represented by FOLIO
FR
AboutBe Represented by FOLIO
folio
FR
aboutbe-represented-by-folio
fr

Yan Cacchione

Portfolio
Instagram
Posts: 89
Followers: 98.5k
Follows: 228
Analog feed  @motamo__ 📄Follow @bymotamo__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?design workflow: from idea to finished product in a week with @paper.design

last reel was the brand system inside paper. this one is the full workflow, idea to live.

reading has always been part of my life, and i finally got around to this idea of building a live library of books and quotes that have shaped my beliefs, ideas, mindset and inspirations over the years.

process:

01. draft my idea and frames in a notebook
02. design the first few frames in paper
03. send the paper link to ai agent (cursor + claude)
04. agent pushes more variations
05. iteration loop: comment on the canvas, agent reads and applies comments

the iteration loop is the part that still feels unreal. you leave a comment on a node, the agent reads it straight off the canvas and makes the edit it’s like reviewing the work from your junior designer

since everything you design in paper is already code, all you have to do is tell your agent to push the designs to a git repo, link a vercel project to host your live web app, link a database (supabase), and continue with the iteration loop: design - code - live.

research.motamo.so if you wanna see what i built 

tools: paper.design, cursor, claude, vercel, supabase, next.jsHow 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🥚(05)  designing templates and creating guidelines for social assets using figma -> claude code -> paper.design
Mediaslide Model Agency Software