Leon Lin

@LexnLin • 18,263 subscribers

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

Shorts

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,336 просмотров

$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.

127,732 просмотров

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 просмотров

Done. Codex and images 2.0 cooked

61,425 просмотров

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

72,181 просмотров

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 просмотров

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,369 просмотров

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

25,012 просмотров

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,372 просмотров

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 :)

38,906 просмотров

Figure bro uhm package just fell down

19,543 просмотров

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 просмотров

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 просмотров

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,523 просмотров

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

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"

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

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 :)

Figure bro uhm package just fell down

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

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'm ngl, it turned out WAY better than I thought. Here are 3 examples using the UI skill GPT 5.6 Sol made

Oneshot with Fable on MAX reasoning

Guess which is Opus 4.7 and GPT 5.5 👀

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

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!

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

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

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

FINALLY redesigned what do you think? :) i used cursor composer 2 and gpt 5.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!

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 ⤵️

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

gpt 5.4 (5.5) pro is insane didn't expect to get this in one shot

GPT 5.5 Pro is really good at 3d low poly gen

Vibecoded another page with one prompt :) All in Antigravity with Opus 4.6 one-shot

Okay, I took a look at what Codex did in that time: Don't know what to think about it lol

growing quite fast, seems to be the fastest growing repo ever

Gemini. Design.

Introducing my image/video to ascii art generator Now you can upload any image or video and simply download these in ASCII style! Yes for free, unlimited, no sub,signup or whatever :) Try it here!

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: