Загрузка видео...

Не удалось загрузить видео

На главную

built a tool that's been on my list forever: → drop any screenshot, video, or website → ai extracts every color, font, section and style → copy as CSS or Tailwind

stylesshDev's profile picture

alan

1,383 subscribers

37,365 просмотров • 4 месяцев назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too
4:39

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too

Pablo Stanley

21,470 просмотров • 5 месяцев назад

I work with shadcn/ui every day. I design with it, I build with it, and I see a lot of projects built with it. And honestly? Many of them look the same. Or worse - they look broken. Colors that clash. Fonts that don't pair. Dark modes that feel like an afterthought. The components themselves are great. The theming that people or AI make? Not so much. So I built a tool to fix that. I just launched my shadcn theme generator that will allow you to ship beautiful shadcn/ui themes in just 3-4 clicks. What it does: - Creates your entire color palette from 1 color (your hex or any tailwind color) - Works for light and dark theme - Only includes fonts that actually look good in UI - Font pairings I curated myself - Works for any project - landing page, dashboard, store - Has a color contast checker for the entire palette Too lazy? Just use random theme feature Done? Copy and paste the CSS to your global.css file or import to our Figma kit.
1:15

I work with shadcn/ui every day. I design with it, I build with it, and I see a lot of projects built with it. And honestly? Many of them look the same. Or worse - they look broken. Colors that clash. Fonts that don't pair. Dark modes that feel like an afterthought. The components themselves are great. The theming that people or AI make? Not so much. So I built a tool to fix that. I just launched my shadcn theme generator that will allow you to ship beautiful shadcn/ui themes in just 3-4 clicks. What it does: - Creates your entire color palette from 1 color (your hex or any tailwind color) - Works for light and dark theme - Only includes fonts that actually look good in UI - Font pairings I curated myself - Works for any project - landing page, dashboard, store - Has a color contast checker for the entire palette Too lazy? Just use random theme feature Done? Copy and paste the CSS to your global.css file or import to our Figma kit.

Matt

77,738 просмотров • 5 месяцев назад

Turn any website into an AI-readable design system. Here's how: Google recently introduced the DESIGN.md specification: a file that helps AI agents understand a product’s design system. So we built a free tool for designers. Paste any website URL and Masumi’s DESIGN.md Generator extracts the brand’s colors, typography, components, spacing, and visual rules into an editable DESIGN.md file. Your designer can review it, tweak it, and hand it to Claude Code, Cursor, Codex, or any AI coding agent so the generated UI stays on-brand. Links below
3:30

Turn any website into an AI-readable design system. Here's how: Google recently introduced the DESIGN.md specification: a file that helps AI agents understand a product’s design system. So we built a free tool for designers. Paste any website URL and Masumi’s DESIGN.md Generator extracts the brand’s colors, typography, components, spacing, and visual rules into an editable DESIGN.md file. Your designer can review it, tweak it, and hand it to Claude Code, Cursor, Codex, or any AI coding agent so the generated UI stays on-brand. Links below

albina

26,087 просмотров • 2 месяцев назад

I built an AI assistant that turns any news URL into posts in my exact writing style. Took 15 mins and nails my tone every time. Vibe coded with this new AI tool in one prompt. Here’s how:
0:36

I built an AI assistant that turns any news URL into posts in my exact writing style. Took 15 mins and nails my tone every time. Vibe coded with this new AI tool in one prompt. Here’s how:

Alvaro Cintas

20,379 просмотров • 9 месяцев назад

Today I'm launching - a tool for creating AI humans to promote any product. I built it as an internal tool for marketing my own apps, instead of hiring and managing hundreds of creators. You can create as many characters as you want and swap them into videos you record or trending tiktoks.
0:26

Today I'm launching - a tool for creating AI humans to promote any product. I built it as an internal tool for marketing my own apps, instead of hiring and managing hundreds of creators. You can create as many characters as you want and swap them into videos you record or trending tiktoks.

neer

28,493 просмотров • 6 месяцев назад

I just built the AI Sales Accelerator. The all-in-one tool for selling ANY product or service. 1 input turns into: • Personal pricing strategy • Unique customer avatar • Indreible sales copy Like + Reply "sales" And I'll DM your FREE copy. (1 day and 750 people only)
0:37

I just built the AI Sales Accelerator. The all-in-one tool for selling ANY product or service. 1 input turns into: • Personal pricing strategy • Unique customer avatar • Indreible sales copy Like + Reply "sales" And I'll DM your FREE copy. (1 day and 750 people only)

Hunter Bohm

47,836 просмотров • 3 лет назад

We built Kairos: AI that learns by watching you work once, then automates it forever. No code. No drag and drop. It's like training a co-worker. Early access is limited. DM us or visit our website.
0:56

We built Kairos: AI that learns by watching you work once, then automates it forever. No code. No drag and drop. It's like training a co-worker. Early access is limited. DM us or visit our website.

Manas Bam

852,570 просмотров • 1 год назад

I made a thing → what can Cloudflare's Browser Run do? 1. Screenshot any page 2. Generate PDFs 3. Scrape elements by CSS selector or natural language 4. Extract a brand kit (my favorite) 5. Turn a page into Markdown 6. Get every link on a page
0:21

I made a thing → what can Cloudflare's Browser Run do? 1. Screenshot any page 2. Generate PDFs 3. Scrape elements by CSS selector or natural language 4. Extract a brand kit (my favorite) 5. Turn a page into Markdown 6. Get every link on a page

Fayaz Ahmed

51,993 просмотров • 1 месяц назад

This Fern style video is 100% made with AI - AI Music - AI Sound effects - AI Voice - AI Script (Claude Sonnet) - AI Footage - Light editing added in CapCut (color correcting) Me and my team have been perfecting this tool for the past couple of weeks and we can confidently say that you can make a full 15min documentary video in this quality for about $50-$150 (depends on the quality) You just import the script, choose your favorite style, and wait. I will maybe give access to some selected individuals, shoot me or Master Oogway a DM.
0:38

This Fern style video is 100% made with AI - AI Music - AI Sound effects - AI Voice - AI Script (Claude Sonnet) - AI Footage - Light editing added in CapCut (color correcting) Me and my team have been perfecting this tool for the past couple of weeks and we can confidently say that you can make a full 15min documentary video in this quality for about $50-$150 (depends on the quality) You just import the script, choose your favorite style, and wait. I will maybe give access to some selected individuals, shoot me or Master Oogway a DM.

North

10,208 просмотров • 4 месяцев назад

Day 34 of vibe-coding as a designer Stripe's new redesign is going viral, and designers are losing it. 💀 So I ran it on a design analyzer tool I built - it breaks down any website UI 👾... conversion rate, ux, copy. The result is stunning. ⚡️ People ask, "what makes this design work?" Finally, we have an answer. If you want to try it, drop your website!
0:22

Day 34 of vibe-coding as a designer Stripe's new redesign is going viral, and designers are losing it. 💀 So I ran it on a design analyzer tool I built - it breaks down any website UI 👾... conversion rate, ux, copy. The result is stunning. ⚡️ People ask, "what makes this design work?" Finally, we have an answer. If you want to try it, drop your website!

Felix Lee

36,558 просмотров • 6 месяцев назад

Parents, teachers - EVERY SINGLE PAGE in your children's books just became interactive. Education has changed forever. Using Claude Sonnet 3.5, I created an interactive educational tool to teach my "daughter" how we're using AI to communicate with animals. I turned a screenshot into a mini custom tutor, with her name and favorite color to boot. And it only took a few minutes.
0:47

Parents, teachers - EVERY SINGLE PAGE in your children's books just became interactive. Education has changed forever. Using Claude Sonnet 3.5, I created an interactive educational tool to teach my "daughter" how we're using AI to communicate with animals. I turned a screenshot into a mini custom tutor, with her name and favorite color to boot. And it only took a few minutes.

Allie K. Miller

150,291 просмотров • 2 лет назад

Steal this mega prompt to generate high quality landing pages using LLMs and go viral every single day. --- You are an expert landing page designer and frontend developer specializing in high-converting, beautiful web experiences. CONTEXT: I need a landing page for [product/service name]. TARGET AUDIENCE: [describe your ideal customer] PRIMARY GOAL: [e.g., email signups, demo bookings, purchases] BRAND VOICE: [e.g., professional, playful, technical, aspirational] DESIGN SYSTEM REQUIREMENTS: - Primary Color: [hex code] - Secondary Color: [hex code] - Font: [font family] - Design Style: [modern, minimal, bold, etc.] STRUCTURE: Create a single-page landing page with these sections: 1. Hero Section - Attention-grabbing headline (focus on outcome, not feature) - Subheadline clarifying value proposition - Primary CTA button - Hero visual placeholder or description 2. Problem Section - Articulate the pain point clearly - Use relatable language - Build urgency subtly 3. Solution Section - How your product solves the problem - 3-4 key benefits (outcome-focused, not feature-focused) - Visual aids or icons 4. Social Proof - Testimonials (if available) or trust indicators - Logos of companies/clients (if applicable) - Metrics or results 5. How It Works - 3-step process - Simple, clear language - Visual flow 6. Final CTA Section - Reinforce primary action - Remove friction (e.g., "No credit card required") - Create urgency if appropriate TECHNICAL REQUIREMENTS: - Use semantic HTML5 - Tailwind CSS for styling (use only core utility classes) - Mobile-first responsive design - Smooth scroll behavior - Accessible (WCAG AA compliant) - Fast loading (optimize for performance) - Include meta tags for SEO COPY GUIDELINES: - Keep headlines under 10 words - Use active voice - Focus on outcomes, not features - Avoid jargon unless audience expects it - Every section should answer "What's in it for me?" OUTPUT: Provide complete HTML file with inline Tailwind CSS. Include comments explaining key sections. Ensure all placeholder content is realistic and contextual. CONSTRAINTS: - No external dependencies except Tailwind CDN - No JavaScript frameworks - Keep total file size under 100KB - Use system fonts or Google Fonts CDN Build this landing page now.
5:31

Steal this mega prompt to generate high quality landing pages using LLMs and go viral every single day. --- You are an expert landing page designer and frontend developer specializing in high-converting, beautiful web experiences. CONTEXT: I need a landing page for [product/service name]. TARGET AUDIENCE: [describe your ideal customer] PRIMARY GOAL: [e.g., email signups, demo bookings, purchases] BRAND VOICE: [e.g., professional, playful, technical, aspirational] DESIGN SYSTEM REQUIREMENTS: - Primary Color: [hex code] - Secondary Color: [hex code] - Font: [font family] - Design Style: [modern, minimal, bold, etc.] STRUCTURE: Create a single-page landing page with these sections: 1. Hero Section - Attention-grabbing headline (focus on outcome, not feature) - Subheadline clarifying value proposition - Primary CTA button - Hero visual placeholder or description 2. Problem Section - Articulate the pain point clearly - Use relatable language - Build urgency subtly 3. Solution Section - How your product solves the problem - 3-4 key benefits (outcome-focused, not feature-focused) - Visual aids or icons 4. Social Proof - Testimonials (if available) or trust indicators - Logos of companies/clients (if applicable) - Metrics or results 5. How It Works - 3-step process - Simple, clear language - Visual flow 6. Final CTA Section - Reinforce primary action - Remove friction (e.g., "No credit card required") - Create urgency if appropriate TECHNICAL REQUIREMENTS: - Use semantic HTML5 - Tailwind CSS for styling (use only core utility classes) - Mobile-first responsive design - Smooth scroll behavior - Accessible (WCAG AA compliant) - Fast loading (optimize for performance) - Include meta tags for SEO COPY GUIDELINES: - Keep headlines under 10 words - Use active voice - Focus on outcomes, not features - Avoid jargon unless audience expects it - Every section should answer "What's in it for me?" OUTPUT: Provide complete HTML file with inline Tailwind CSS. Include comments explaining key sections. Ensure all placeholder content is realistic and contextual. CONSTRAINTS: - No external dependencies except Tailwind CDN - No JavaScript frameworks - Keep total file size under 100KB - Use system fonts or Google Fonts CDN Build this landing page now.

Harshil Tomar

23,305 просмотров • 6 месяцев назад

"We're tool builders. And every tool that we've ever built has helped us progress as a human species or individually, whether it's art or the wheel or whatever. And I can't believe the scale at which we're at now. It's absolutely unbelievable. And I think what's shocking to me is that the collective has not caught on yet." lots of fun chatting with signüll!
1:31

"We're tool builders. And every tool that we've ever built has helped us progress as a human species or individually, whether it's art or the wheel or whatever. And I can't believe the scale at which we're at now. It's absolutely unbelievable. And I think what's shocking to me is that the collective has not caught on yet." lots of fun chatting with signüll!

Anish Acharya

46,728 просмотров • 3 месяцев назад

Jensen Huang says AI is built on supercomputers and will become as essential as electricity or the internet, transforming how we create intelligence across every layer of tech ⚡
1:34

Jensen Huang says AI is built on supercomputers and will become as essential as electricity or the internet, transforming how we create intelligence across every layer of tech ⚡

Tansu Yegen

15,962 просмотров • 10 месяцев назад

🦾 Our new website has landed. Take a look! We're excited to unveil our new website and social updates, offering a glimpse of what's ahead with our increased focus on our upcoming #AI tool. Here's a new preview of Opulous AI showcasing how you can input any artist or song for transparent music revenue predictions and advances. Explore our new website 👉 $OPUL
0:41

🦾 Our new website has landed. Take a look! We're excited to unveil our new website and social updates, offering a glimpse of what's ahead with our increased focus on our upcoming #AI tool. Here's a new preview of Opulous AI showcasing how you can input any artist or song for transparent music revenue predictions and advances. Explore our new website 👉 $OPUL

Opulous

245,818 просмотров • 2 лет назад

built a small CLI tool that moves your AI coding session context between Claude Code, Gemini, Copilot, Codex and OpenCode when you hit rate limits. no more re-explaining what you were doing, or painful copy/paste from terminal that lose tool-call context. just `npx continues`
0:30

built a small CLI tool that moves your AI coding session context between Claude Code, Gemini, Copilot, Codex and OpenCode when you hit rate limits. no more re-explaining what you were doing, or painful copy/paste from terminal that lose tool-call context. just `npx continues`

Yigit Konur

213,750 просмотров • 5 месяцев назад

shipped this incredible AI Agent in PostSyncer 🤓 it generates posts from pretty much anything: • upload an image → AI creates the post • paste a link → AI analyzes and writes • drop a PDF → AI extracts insights • share an article → AI crafts the copy so many possibilities the AI does a crazy good job at analyzing and creating content from whatever you throw at it it even created this post, THAT'S SOOO META 🤯 PostSyncer is becoming the best social media tool out there
0:31

shipped this incredible AI Agent in PostSyncer 🤓 it generates posts from pretty much anything: • upload an image → AI creates the post • paste a link → AI analyzes and writes • drop a PDF → AI extracts insights • share an article → AI crafts the copy so many possibilities the AI does a crazy good job at analyzing and creating content from whatever you throw at it it even created this post, THAT'S SOOO META 🤯 PostSyncer is becoming the best social media tool out there

Tibo

12,537 просмотров • 8 месяцев назад

For years I've been doing this manually for each logo project. Start with an Illustrator file with all my favourite fonts ready to be replaced with the brand name. Or taking a screenshot of the logomark and scrolling through google fonts with the screenshot placed next to the type... Now, joshpuckett has saved me, and every other designer, hours on each project by creating a tool called Locale. Insane work
0:21

For years I've been doing this manually for each logo project. Start with an Illustrator file with all my favourite fonts ready to be replaced with the brand name. Or taking a screenshot of the logomark and scrolling through google fonts with the screenshot placed next to the type... Now, joshpuckett has saved me, and every other designer, hours on each project by creating a tool called Locale. Insane work

Luke

154,674 просмотров • 4 месяцев назад

MITO AI is here. MITO AI is the tool we wish we had as filmmakers. It is not a prompt playground or a template generator. It is a control room for people who think in scenes, boards and timelines. You bring a story, references and intent. The tool helps you explore shots, workflows and versions faster than a traditional pipeline, without compromising taste. •⁠ ⁠Cinematic boards in minutes. •⁠ ⁠Keep your style consistent across images, scenes and videos. Designed by a studio that actually uses it every day. Join the early access list and help shape the tool:
0:29

MITO AI is here. MITO AI is the tool we wish we had as filmmakers. It is not a prompt playground or a template generator. It is a control room for people who think in scenes, boards and timelines. You bring a story, references and intent. The tool helps you explore shots, workflows and versions faster than a traditional pipeline, without compromising taste. •⁠ ⁠Cinematic boards in minutes. •⁠ ⁠Keep your style consistent across images, scenes and videos. Designed by a studio that actually uses it every day. Join the early access list and help shape the tool:

MITO AI

13,303 просмотров • 8 месяцев назад

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!
0:20

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

Rebane

128,756 просмотров • 1 год назад