Vibe Coding
By @kingsidharth (Youtube, Twitter)
Drawing from session: open on https://excalidraw.com/
https://www.dropbox.com/scl/fi/mlbv30klv0hb47ms3964o/vibecoding-aut-25.excalidraw?rlke
y=6hy4ehwm8vnwrhhop67q2zoqq&st=sjj5svxs&dl=0
Prompt 1
Can you create an interative landing page for a smart watch focused on peopel who are into
fitness, do copyrighting, add micro interactions.
https://chatgpt.com/share/68ac7735-f36c-8005-a5fd-3c6f99d454a7
Hey can you build me an interactive prototype of ai note taker record > transcribe
Make a nice dashbaord and interacgive, animations
https://chatgpt.com/share/68ac7c71-2524-8005-9f88-ba45fbf39249
https://chatgpt.com/share/68ac7c71-2524-8005-9f88-ba45fbf39249
https://claude.ai/public/artifacts/bec1d314-1977-4273-ad48-638c7e5b9649
Main Prompt:
Build an AI note taking app: ability to record, transcript (save as note), use openai speec to text
https://platform.openai.com/docs/guides/speech-to-text?utm_source=chatgpt.com
Clean dashboard: Show notes cards
Show recording button > opens recorder > allow pause/stop/disacrd (on stop transcribe and
save note)
Allow me to add OPEN AI API KEY in settings, and select model
Let’s improve design a bit:
● Let us add glassmorphism visual elements & transitions (css / css keyframes > motion.dev)
● Create various levels with increasing blur + opacity
● Give glassmorphic treatment to: nav, modal, side sheet
● Font: Let’s use
https://fonts.google.com/specimen/Instrument+Sans?categoryFilters=Technology:%2FTechnol
ogy%2FVariable;Sans+Serif:%2FSans%2F* variable font
● wdth (width) range 75-100
● wdth (weight) 400-700
● tnum tabular
● Set semi-bold to 450, bold to 550
● CSS transitions for most effects: for interactive elements add hover/focus/click effects
● Dark mode changes: currently has blue tint in black let’s use warmer tones
● Highlight focus colour. White for dark mode and warm dark grey for white mode - use
that for: selected tab colour, input focus glow, selected calendar date,
● Skeleton loading states for all pages.changes
● Recording dialogue opens abruptly aniamte (move up and fade in)
● Also when recording add waveform animation in response to voices
● There are several components that need to animate in out - calendar drodpwon
● New note cards appearing/goging [coz deleted or search or filters]
● On hover for floating record: add a levitating subtle animation ( a bit up and down)
● Note card: favourite - let’s use animated icon: trigger animate on click
●
<Heart animateOnHover />
// Or use with the AnimateIcon component
<AnimateIcon animateOnHover>
<Heart />
</AnimateIcon>
Let’s change dialogue to this: https://animate-ui.com/docs/radix/dialog
Rescue Prompt for when you get stuck
Remove all the code and implementation of {feature} - get it completely clean
{Implementation prompt again}
Allow setting OPEN AI API KEY in settings use whisper to generate trasnctiption when “Save &
Transcribe is clicked” store that as note
– Custom design agent:
Let’s improve design a bit:
● Let us add glassmorphism visual elements & transitions (css / css keyframes > motion.dev)
● Create various levels with increasing blur + opacity
● Give glassmorphic treatment to: nav, modal, side sheet
● Font: Let’s use
https://fonts.google.com/specimen/Instrument+Sans?categoryFilters=Technology:%2FTechnol
ogy%2FVariable;Sans+Serif:%2FSans%2F* variable font
● wdth (width) range 75-100
● wdth (weight) 400-700
● tnum tabular
● Set semi-bold to 450, bold to 550
● CSS transitions for most effects: for interactive elements add hover/focus/click effects
● Dark mode changes: currently has blue tint in black let’s use warmer tones
● Highlight focus colour. White for dark mode and warm dark grey for white mode - use
that for: selected tab colour, input focus glow, selected calendar date,
● Skeleton loading states for all pages.changes
● Recording dialogue opens abruptly aniamte (move up and fade in)
● Also when recording add waveform animation in response to voices
● There are several components that need to animate in out - calendar drodpwon
● New note cards appearing/goging [coz deleted or search or filters]
● On hover for floating record: add a levitating subtle animation ( a bit up and down)
● Note card: favourite - let’s use animated icon: trigger animate on click
●
<Heart animateOnHover />
// Or use with the AnimateIcon component
<AnimateIcon animateOnHover>
<Heart />
</AnimateIcon>
Let’s change dialogue to this: https://animate-ui.com/docs/radix/dialog
