Leon Lin

@LexnLin • 21,030 subscribers

highschool | building cool shit https://t.co/WAZzwj2wvN | @_TasteSkill

Shorts

asked GPT 6 Astra to build an ocean in the browser total time was around 5+ hours of coding way better than what I got with Fable and Opus

56,897 views

Testing models from other providers in Codex 👀

226,458 views

Introducing `images-taste skill` Now that GPT images v2 is out a new method of creating frontend in Codex has emerged. generate images -> codex analyzes them -> codex builds the website available here:

170,433 views

$Hold up, here is the prompt: works with almost any model. enjoy :) Role & Objective: Act as an Elite UI/UX Front-End Engineer specializing in Apple-tier micro-interactions and advanced CSS. Your task is to program a perfectly centered navigation bar in a strictly SINGLE HTML file containing all HTML, vanilla CSS, and vanilla JavaScript. No external libraries or frameworks (No Tailwind, React, etc.). Design Concept - "True Liquid Glass": CRITICAL INSTRUCTION: Do NOT generate standard, flat "glassmorphism" or basic frosted glass. I require a physically accurate "Liquid Glass" aesthetic. It must look like wet, poured clear resin, combining the high-gloss specular highlights of classic macOS Aqua with the volumetric spatial depth of modern Apple VisionOS. 1. The Liquid Glass Material & Lighting (CSS): - Deep Refraction: Use `backdrop-filter` with extreme blur (e.g., 50px) and over-saturation (200%). - Specular Highlight: Create a curved, semi-transparent white gradient on the top half using a pseudo-element (`::before`) to simulate a hard light reflection on a wet, rounded 3D surface. - Caustics & Volume: Use multi-layered inner and outer `box-shadow` properties to simulate light refracting at the bottom edge and casting a realistic ambient drop shadow. - Interactive Glare: Implement a soft radial-gradient spotlight inside the glass that dynamically tracks the user's mouse cursor (X/Y coordinates) using JavaScript and CSS variables (`mix-blend-mode: overlay`). 2. Navigation Layout & Elements: - Center the pill-shaped navigation bar perfectly in the middle of the viewport. - Include 3 main navigation items with minimalist, inline SVG stroke icons and text labels: "Home", "Call", and "List". - Add a subtle vertical divider line after the main buttons. - Next to the divider, add a Dark/Light Mode toggle button containing inline SVG Sun and Moon icons. 3. Animations & "Apple Magic": - Sliding Active Pill: Create a solid background "pill" that sits *behind* the active navigation item's text/icon. When a different item is clicked, this pill must dynamically recalculate its width and slide to the new position. - Spring Physics: The sliding transition MUST use an exact Apple-style bouncy spring easing curve (e.g., `transition: all 0.5s cubic-bezier(0.34, 1.2, 0.64, 1)`). - Tactile Feedback: Buttons and icons must physically press down slightly (`transform: scale(0.92)`) when clicked (`:active`). - Theme Switch: The Sun and Moon icons must smoothly rotate, scale, and cross-fade during the transition. 4. Background Environment (Crucial): - Glass needs light and color to refract! Create a full-viewport, smoothly animated mesh gradient background using 3 large, heavily blurred, floating color blobs. - Implement full Dark/Light mode logic using CSS variables (`:root` and `[data-theme="dark"]`). Toggling the theme must seamlessly transition the background blob colors, glass opacity, shadow intensity, and text colors. Output ONLY the pristine, production-ready code. Prioritize maximum visual fidelity and silky-smooth 60fps animations.$

Hold up, here is the prompt: works with almost any model. enjoy :) Role & Objective: Act as an Elite UI/UX Front-End Engineer specializing in Apple-tier micro-interactions and advanced CSS. Your task is to program a perfectly centered navigation bar in a strictly SINGLE HTML file containing all HTML, vanilla CSS, and vanilla JavaScript. No external libraries or frameworks (No Tailwind, React, etc.). Design Concept - "True Liquid Glass": CRITICAL INSTRUCTION: Do NOT generate standard, flat "glassmorphism" or basic frosted glass. I require a physically accurate "Liquid Glass" aesthetic. It must look like wet, poured clear resin, combining the high-gloss specular highlights of classic macOS Aqua with the volumetric spatial depth of modern Apple VisionOS. 1. The Liquid Glass Material & Lighting (CSS): - Deep Refraction: Use `backdrop-filter` with extreme blur (e.g., 50px) and over-saturation (200%). - Specular Highlight: Create a curved, semi-transparent white gradient on the top half using a pseudo-element (`::before`) to simulate a hard light reflection on a wet, rounded 3D surface. - Caustics & Volume: Use multi-layered inner and outer `box-shadow` properties to simulate light refracting at the bottom edge and casting a realistic ambient drop shadow. - Interactive Glare: Implement a soft radial-gradient spotlight inside the glass that dynamically tracks the user's mouse cursor (X/Y coordinates) using JavaScript and CSS variables (`mix-blend-mode: overlay`). 2. Navigation Layout & Elements: - Center the pill-shaped navigation bar perfectly in the middle of the viewport. - Include 3 main navigation items with minimalist, inline SVG stroke icons and text labels: "Home", "Call", and "List". - Add a subtle vertical divider line after the main buttons. - Next to the divider, add a Dark/Light Mode toggle button containing inline SVG Sun and Moon icons. 3. Animations & "Apple Magic": - Sliding Active Pill: Create a solid background "pill" that sits behind the active navigation item's text/icon. When a different item is clicked, this pill must dynamically recalculate its width and slide to the new position. - Spring Physics: The sliding transition MUST use an exact Apple-style bouncy spring easing curve (e.g., `transition: all 0.5s cubic-bezier(0.34, 1.2, 0.64, 1)`). - Tactile Feedback: Buttons and icons must physically press down slightly (`transform: scale(0.92)`) when clicked (`:active`). - Theme Switch: The Sun and Moon icons must smoothly rotate, scale, and cross-fade during the transition. 4. Background Environment (Crucial): - Glass needs light and color to refract! Create a full-viewport, smoothly animated mesh gradient background using 3 large, heavily blurred, floating color blobs. - Implement full Dark/Light mode logic using CSS variables (`:root` and `[data-theme="dark"]`). Toggling the theme must seamlessly transition the background blob colors, glass opacity, shadow intensity, and text colors. Output ONLY the pristine, production-ready code. Prioritize maximum visual fidelity and silky-smooth 60fps animations.

128,501 views

I mean it's pretty easy to vibecode this. Although somehow Gemini fumbled this one-shot because these things look at your password when you click on reveal 😭 But yeah one-shot in antigravity

99,445 views

Done. Codex and images 2.0 cooked

61,425 views

Someone told me to build this masterpiece using AI Here is my result (prompt is below)

72,181 views

Here is the prompt to create a liquid gold nav bar :) Have fun experimenting! Create a floating navigation toolbar centered on screen. Dark background, glassmorphism toolbar with blur and subtle border. Core feature - Golden active indicator ring: A sliding highlight around the active button built with 4 CSS layers: Glow - blurred warm gold (#e8af48) behind the ring, opacity: 0.15 Clip container - overflow: hidden, border-radius: 18px - this clips the gradient Rotating conic-gradient - sized 200% and offset -50% so it spins from center. Rotates 4.5s linear infinite. The gradient must be heavily gold-dominant:70% of the gradient = gold tones (#533517 dark bronze → #c49746 warm gold → #feeaa5 light gold) 2 narrow white hotspots (#ffffff, each only ~3% wide) simulating studio light reflections Between each white hotspot, a very thin (~1.5% each) hint of #ffc0cb pink and - blue for subtle chromatic iridescence - these must stay minimal, the ring should read as GOLD not rainbow The pattern repeats twice across 360° for symmetry Inner plate - inset: 2px covers the center, only 2px of spinning gold ring visible. Background matches toolbar. The indicator slides between buttons with bouncy overshoot easing (cubic-bezier(0.34, 1.2, 0.64, 1)). 3 nav buttons (Home, Search, User) with thin stroke icons, separated by subtle dividers. Plus a dark/light theme toggle - sun/moon icons crossfade with rotate+scale. On toggle click, the button bounces up to 1.25× scale then springs back. Add film grain noise overlay and radial ambient glow.

72,887 views

gemini pro 3.1 ui gen is cracked just one-shot a full landing page from "professional saas landingpage for an ai agent provider. 8sections. use micro animations"

73,471 views

I experimented with Muse Spark a bit more. I take my words back it seems to be quite okay. Muse Spark generated images for the website btw

46,920 views

Introducing GPT Taste Skill We all know that right now, ChatGPT still lags behind in frontend generation. That's why bluedev and I built GPT Taste Skill It's opensource! Test it here :)

39,365 views

gpt frontend is just 😔😭 it just ignores everything i write into the skills

25,012 views

Updating gpt-taste skill ⏳ this site was built with GPT 5.4 medium in Codex using gpt-taste prompt was "landing page. 8sections. for an AI agency"

25,714 views

GPT 5.4 medium in Codex + gpt-taste skill prompt was "landing page. 8sections. for an AI agency" here's the skill: Left: no skill Right: using skill

24,334 views

Figure bro uhm package just fell down

19,543 views

I tried to recreate the Meta AI animation using different AI models 1/ (top left) original 2/ (top right) Gemini 3.1 Pro High 3/ (bottom left) Muse Spark 4/ (bottom right) ChatGPT 5.4 Thinking Extended for this round, muse spark won

18,693 views

Videos

LIVE

1.2k

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Streaming Now

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

HD live stream

Exclusive private shows

1.2k viewers online

Current Status

Live

Private Show

Join now for exclusive access

Free preview available • Premium content

Live Cam

Leon Lin

Shorts

asked GPT 6 Astra to build an ocean in the browser total time was around 5+ hours of coding way better than what I got with Fable and Opus

Testing models from other providers in Codex 👀

Introducing `images-taste skill` Now that GPT images v2 is out a new method of creating frontend in Codex has emerged. generate images -&gt; codex analyzes them -&gt; codex builds the website available here:

I mean it's pretty easy to vibecode this. Although somehow Gemini fumbled this one-shot because these things look at your password when you click on reveal 😭 But yeah one-shot in antigravity

Done. Codex and images 2.0 cooked

Someone told me to build this masterpiece using AI Here is my result (prompt is below)

gemini pro 3.1 ui gen is cracked just one-shot a full landing page from "professional saas landingpage for an ai agent provider. 8sections. use micro animations"

I experimented with Muse Spark a bit more. I take my words back it seems to be quite okay. Muse Spark generated images for the website btw

Introducing GPT Taste Skill We all know that right now, ChatGPT still lags behind in frontend generation. That's why bluedev and I built GPT Taste Skill It's opensource! Test it here :)

gpt frontend is just 😔😭 it just ignores everything i write into the skills

Updating gpt-taste skill ⏳ this site was built with GPT 5.4 medium in Codex using gpt-taste prompt was "landing page. 8sections. for an AI agency"

GPT 5.4 medium in Codex + gpt-taste skill prompt was "landing page. 8sections. for an AI agency" here's the skill: Left: no skill Right: using skill

Figure bro uhm package just fell down

I tried to recreate the Meta AI animation using different AI models 1/ (top left) original 2/ (top right) Gemini 3.1 Pro High 3/ (bottom left) Muse Spark 4/ (bottom right) ChatGPT 5.4 Thinking Extended for this round, muse spark won

Videos

Watch Anya Live

I asked GPT 6 Astra to compose a piano melody and build a 3D pianist to play it and holy fuck, the fingers do follow the actual notes PLUS this ONLY took about 2h

This is probably going to be one of my new benchmarks for testing new models a human doing parkour This is GPT 6 Astras (on ultra) result the prompt and my thoughts are below!

built a weird experiment with GPT 6 Astra so there's a person sitting at a computer running a local model, you talk to him, he turns around and listens, then turns back to the PC and uses ai for you you can literally build anything now

Little animation for the OpenAI logo, made in Codex

Guess which is Opus 4.7 and GPT 5.5 👀

gemini pro 3.1 ui gen is really cracked just one shotted this

Oneshot with Fable on MAX reasoning

One shot in codex with gpt-taste skill! GPT 5.4 medium works best :) skill:

I'm ngl, it turned out WAY better than I thought. Here are 3 examples using the UI skill GPT 5.6 Sol made

I told Opus 5 to add liquid glass to my android mobile app. This shit looks soo clean

I tried to reverse engineer a prompt for this game. Used that in Cursor, with NO Ultracode/subagents only Opus 5 high and this is the result! The repo and the prompt are below

Here is Lumenshaders! A free opensource tool for generating shader or pattern images/videos/gifs for your websites, posters and whatever you wanna use it for :) Made with Claude Fable! The repo is here: Have fun!

gave 5.5 pro a reference image and it did this :)

Kimi K3 is CRAZY at frontend used about 3 vague prompts to create this site in Kimi Code

I made a tree in threejs with Opus 5

NEW SKILL Released "Soft-Skill" / high-end-visual-design today! It creates design focused on more high end clean looking websites. The outcome will be responsive and without vibecoded-looking elements. Go test it!

FINALLY redesigned what do you think? :) i used cursor composer 2 and gpt 5.5

Fable is ABSOLUTE DESIGN MOGGING I mean it's not that crazy, but if you get this for a ultra short prompt like "landingpage modern ..." Very impressive

omg hahah look what Claude Fable made! level devil but fable devil (medium reasoning effort oneshot) if you wanna play, here!

GPT 5.5 Pro is amazing "remake paint using html, i want all features from windows 10 paint to be there, looking exactly like the original paint" (idea from bluedev)

Introducing `images-taste skill` Now that GPT images v2 is out a new method of creating frontend in Codex has emerged. generate images -> codex analyzes them -> codex builds the website available here: