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: 88
Followers: 98.5k
Follows: 225
Analog feed  @motamo__ 📄Follow @bymotamo__How 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(03) dusty blobs | messing around on @figma(04) building motamo.so | @figma + @framer
Mediaslide Model Agency Software