Leon Lin

@LexnLin • 20,349 subscribers

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

Shorts

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

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

Little animation for the OpenAI logo, made in Codex

Guess which is Opus 4.7 and GPT 5.5 👀

Oneshot with Fable on MAX reasoning

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

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!

I made a tree in threejs with Opus 5

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

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

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)

This is my first ever vibecoded mobile app :D A productivity app called Blockd Blockd is there for blocking apps to gain your lifetime back. Besides some minor UI issues it works nicely and can block apps with an overlay. :) Built in Antigravity with only Gemini models

Another Opus 4.8 launch website made by Opus 4.8 Trying to see if it is really "creative" with random one shots

Experimental TasteSkill v2 is out! This version is very good for Opus/models in cursor. It uses image gen when available. Full more complex version is 100% coming next week. guide on how to use this skill ⤵️

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: