Forwarded from The Struggling Physicist
This media is not supported in your browser
VIEW IN TELEGRAM
Puzzle #2 from the 3b1b monthly series. This one looks harder than the first one (haven’t tried it yet though)
This media is not supported in your browser
VIEW IN TELEGRAM
As a person in tech this video is so right
It will piss many people off though
It will piss many people off though
I spend more time designing on claude code than figma these days.
Let me yap a little about the end to end workflow that works for me.
Sporadic Attempts at Design and Life
Let me yap a little about the end to end workflow that works for me.
Step 1. Task briefs
Record every meeting. Understand and ask all the right questions, even if out of scope.
The human mind’s job is to ask questions, to have ideas, and solve problems not memorize information.
Export trannoscripts of meetings and upload them to your Chatbot of choice. Prepare projects for each major product you work on, and make that your context base and a living breathing context aware database for the product.
Since I use claude code + atlassian integration on claude, I prefer using claude on the 1x pro subnoscription (for now atleast :])
Record every meeting. Understand and ask all the right questions, even if out of scope.
The human mind’s job is to ask questions, to have ideas, and solve problems not memorize information.
Export trannoscripts of meetings and upload them to your Chatbot of choice. Prepare projects for each major product you work on, and make that your context base and a living breathing context aware database for the product.
Since I use claude code + atlassian integration on claude, I prefer using claude on the 1x pro subnoscription (for now atleast :])
As a career designer, you probably have trained your mind in three primary areas
1. solving problems
2. UX and usability
3. Aesthetics
You will use the AI to structure the information you get from all your knowledge bases to aid your decision in those three things you are good at. Some prompt engineering is required here to make the AI operate within the knowledge base you provide it. Think RAG techniques as the big brother of this.
1. solving problems
2. UX and usability
3. Aesthetics
You will use the AI to structure the information you get from all your knowledge bases to aid your decision in those three things you are good at. Some prompt engineering is required here to make the AI operate within the knowledge base you provide it. Think RAG techniques as the big brother of this.
Things to not do in this preliminary step:
1. Do not ask the AI for design decisions
2. Do not ask the AI to generate designs
3. Do not use the AI as an ultimate source of truth. Always make it site sources. Hallucinations are still real, especially in complex tasks and high information density projects.
1. Do not ask the AI for design decisions
2. Do not ask the AI to generate designs
3. Do not use the AI as an ultimate source of truth. Always make it site sources. Hallucinations are still real, especially in complex tasks and high information density projects.
❤1
Once design decisions are outlined, I create a new branch, spin up a dev server and primarily work within the application instead of primarily designing on figma first.
It is best to prototype and design in a development environment (or even a separate design environment where there is variation of limited mock data).
The holistic idea is that I prompt changes then use figma for complex components to design static versions that I then plug into the application to test the prototype instead of sending static figma designs to engineers.
I use two things in conjunction.
1. Claude code export pages to figma. (They unveiled this like last week)
2. Figma to claude code MCP
At tasks above a certain level of complexity, I tell claude to export to figma, I make changes on figma then I tell claude to refer to the figma designs to implement changes which I describe on the prompt.
Tip here: tell the AI to create a todo list of sorts to achieve a desired outcome instead of telling it what to do. Give it boundaries and outcomes and it will thrive. You will then iterate on the results using methods I wrote above.
Second tip: AI thrives on organized data. When you have organized components that sit in storybooks and UI libraries on the side of code, and design systems complete with component libraries on figma, and when these two are synced well, AI has less of a hard time being consistent at generating results that meet your frontend brand standards.
It is best to prototype and design in a development environment (or even a separate design environment where there is variation of limited mock data).
The holistic idea is that I prompt changes then use figma for complex components to design static versions that I then plug into the application to test the prototype instead of sending static figma designs to engineers.
I use two things in conjunction.
1. Claude code export pages to figma. (They unveiled this like last week)
2. Figma to claude code MCP
At tasks above a certain level of complexity, I tell claude to export to figma, I make changes on figma then I tell claude to refer to the figma designs to implement changes which I describe on the prompt.
Tip here: tell the AI to create a todo list of sorts to achieve a desired outcome instead of telling it what to do. Give it boundaries and outcomes and it will thrive. You will then iterate on the results using methods I wrote above.
Second tip: AI thrives on organized data. When you have organized components that sit in storybooks and UI libraries on the side of code, and design systems complete with component libraries on figma, and when these two are synced well, AI has less of a hard time being consistent at generating results that meet your frontend brand standards.
Third tip: always make sure the AI knows you are a designer, and include in your initial prompts/skills files that developers will then engineer the output for performance and scalability later.
Somewhere this back and forth between figma and claude code (or whatever agent of your choice) you will get a final output that overcomes that annoying step we all call hand off.
Key takeaway:
- the time where figma was overemphasized as a tool is now over. And I am glad.
- as a designer, you should tool with more things. Learn code, learn prompting, learn animations and more importantly learn story telling.
- if you are a developer, get into the bag of optimizing and performance. Learn story telling and design principles.
- everything moves so quickly these days and you are expected to be on top of everything. Consume small bites of information whenever you can.
- the time where figma was overemphasized as a tool is now over. And I am glad.
- as a designer, you should tool with more things. Learn code, learn prompting, learn animations and more importantly learn story telling.
- if you are a developer, get into the bag of optimizing and performance. Learn story telling and design principles.
- everything moves so quickly these days and you are expected to be on top of everything. Consume small bites of information whenever you can.
This channel has been so beneficial for me to consume stuff like this from a design context:
https://youtu.be/JMQ0X_si144?si=SHScU5NsjAVbFB0k
https://youtu.be/JMQ0X_si144?si=SHScU5NsjAVbFB0k
YouTube
Design with Claude Code: The Designer’s Guide
Learn how to design with Claude Code from Anthropic in real product workflows with Figma MCP.
I cover what Claude Code is, how designers can use it, and how to turn it into a serious productivity multiplier for UX exploration, documentation, prototyping…
I cover what Claude Code is, how designers can use it, and how to turn it into a serious productivity multiplier for UX exploration, documentation, prototyping…
If im calling a ride I reserve the right to cancel if its a suzuki every or a damas lmfao
Why are they even approved
Why are they even approved
🦄4