正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Huge UI design boost by adding this to my AI workflow 1. Explore variations with Variant. The secret is to use "shuffle layout" and "see other views". This keeps the essence of a design that I like, but gives interesting layout variations. I also change colors and explore narrow... by specifying one or two things in prompt, like font name, UI style or light/dark mode. 2. Copy HTML and prompt with Gemini 3 in site builder. Fix minute details like fonts, icons, assets, intro/scroll animations, adaptive layout and make the whole thing functional. Include image references, button styles, code snippets and other components to keep things creative. Often, I see sites that have one cool thing, but the rest is super generic. That's because AI is especially good at being generic without continuously feeding specs. 3. Turn into a landing page by prompt adding new components/sections and connect/adapt new pages. This is the part where most people stop, but it's actually the easiest since AI is so good at reading existing code. "Adapt this {page code} for a {features, blog, pricing, login} page." Finally, set up SEO and custom domain name. Boom, you just shipped a pro-level site that doesn't look generic.show more

Meng To

173,160 subscribers

65,379 次观看 • 5 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

$How I turn my templates into real landing pages. Works for any vibe coding platform or site. This is my full guide. I start with Gemini 3. I copy the HTML code and paste to Cursor/v0/lovable and prompt "Create a new landing page /page-name using this design but adapted to {site_name}. Replace the header and footer with the ones from my site. Adapt the whole page, keep everything: {HTML_code}" Details that can to be adapted or improved: Fonts: "Use {font_name} Google font for headings and {font_name} for body text." Icons: "Use Iconify {icon_set} icons" Colors: "Change primary color to blue. Everything else should be monotone." Bonus: "Make the outlines subtle" for a cleaner design. Animation intro/on scroll: "Animate when in view observed, fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0." Static to animated: "Animate details with {animate_type} and decorations.". Example types: line, beam animation, noodles, grid, sonar, etc. Background animation: "Apply the background animation using Unicorn Studio {animation_code}" Details to make your layout stand out: "Add vertical container-size lines. Add 01 02 03 number details." Stand out from generic-looking: "Make this more upscale with large tall fonts, Newsreader font and black and white agency". Adapt content: "Adapt the content to {copy and paste site texts}". Buttons: "Change main button to {code}. Add a 1px border beam animation around the pill-shaped button on hover." Adding sections like testimonials: "Adapt a new section after {section} using this code: {component code}". You can copy the code from Codepen, 21st dev or Aura. Responsiveness: "Make this responsive. Add a hamburger menu for mobile. Hide this {element} for mobile." Making forms work: "Make the form send an email to {your_email}". Payments: "Link the buy button to {LemonSqueezy payment link}". I use composer-1 for quick fixes. I finish with Claude Opus 4.5 for code reviews "Please review the code for performance and robustness". The template HTML code should give you a blueprint for all these, but I think it's important to keep iterating for your specific site.$

How I turn my templates into real landing pages. Works for any vibe coding platform or site. This is my full guide. I start with Gemini 3. I copy the HTML code and paste to Cursor/v0/lovable and prompt "Create a new landing page /page-name using this design but adapted to {site_name}. Replace the header and footer with the ones from my site. Adapt the whole page, keep everything: {HTML_code}" Details that can to be adapted or improved: Fonts: "Use {font_name} Google font for headings and {font_name} for body text." Icons: "Use Iconify {icon_set} icons" Colors: "Change primary color to blue. Everything else should be monotone." Bonus: "Make the outlines subtle" for a cleaner design. Animation intro/on scroll: "Animate when in view observed, fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0." Static to animated: "Animate details with {animate_type} and decorations.". Example types: line, beam animation, noodles, grid, sonar, etc. Background animation: "Apply the background animation using Unicorn Studio {animation_code}" Details to make your layout stand out: "Add vertical container-size lines. Add 01 02 03 number details." Stand out from generic-looking: "Make this more upscale with large tall fonts, Newsreader font and black and white agency". Adapt content: "Adapt the content to {copy and paste site texts}". Buttons: "Change main button to {code}. Add a 1px border beam animation around the pill-shaped button on hover." Adding sections like testimonials: "Adapt a new section after {section} using this code: {component code}". You can copy the code from Codepen, 21st dev or Aura. Responsiveness: "Make this responsive. Add a hamburger menu for mobile. Hide this {element} for mobile." Making forms work: "Make the form send an email to {your_email}". Payments: "Link the buy button to {LemonSqueezy payment link}". I use composer-1 for quick fixes. I finish with Claude Opus 4.5 for code reviews "Please review the code for performance and robustness". The template HTML code should give you a blueprint for all these, but I think it's important to keep iterating for your specific site.

Meng To

41,015 次观看 • 7 个月前

"The difference between AI slop and great designs is in the last 10%." Here's my new episode with Meng To where he reveals his step-by-step process to create stunning AI designs and websites. We cover how to: - Build your AI design prompt from scratch - Find great fonts, assets, and components - Add beautiful custom animations Some tips from Meng: "A lot of people don't realize that having a prompt is just not enough. You need to give AI the right templates and references." "I like to think of AI more like a tool to augment you rather than doing everything. At the end of the day, what matters is your taste." "Use sites like UI verse for buttons, 21st dev for components, and ReactBits for animations. Knowing these resources is half the battle." 📌 Watch now:

"The difference between AI slop and great designs is in the last 10%." Here's my new episode with Meng To where he reveals his step-by-step process to create stunning AI designs and websites. We cover how to: - Build your AI design prompt from scratch - Find great fonts, assets, and components - Add beautiful custom animations Some tips from Meng: "A lot of people don't realize that having a prompt is just not enough. You need to give AI the right templates and references." "I like to think of AI more like a tool to augment you rather than doing everything. At the end of the day, what matters is your taste." "Use sites like UI verse for buttons, 21st dev for components, and ReactBits for animations. Knowing these resources is half the battle." 📌 Watch now:

Peter Yang

63,938 次观看 • 11 个月前

$How I created these landing pages with Gemini 3 from start to finish First, I start with the hero section. It includes the nav bar, eyebrow, headline, subheadline, cta, social proof and visual. I spend 50% of the time here because it sets the colors, typography, spacing, which AI uses for the rest of the site consistently. “Create the hero section for my {app} called {name} in the style of {reference_site}”. Pro tip: use a screenshot and you’ll get way better results. Let’s get into the details. For icons, I prompt: “Use Iconify {icon set name}”. Most people use Lucide, but there are hundreds of open-source sets on Iconify like Solar, HeroIcons, Iconoir, Phosphor, etc. Just need to mention in the prompt. Same for custom fonts. For the animation, I prompt: “Animate fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0.”. This creates a subtle intro animation the first time users land on your page. Gemini 3 is an excellent animator. For example, I created the beam animation with this prompt: “Add noodles that connect and beam animate into the right circle. Add subtle details to the right beam animation circle with sonar and decorations.” For background animation, I use Unicorn Studio. Remix one of their templates and watch people click on your cover like crazy. What can I say, people love lasers. In the hero or right below it, social proof is super important. You can put ratings or logos, or both. For logos, you can prompt: “Animate the logos with marquee animation looping infinitely using duplicated items and alpha mask.”. Now the CTA. AI always creates basic buttons, which is fine 99% of the time. But Gemini 3 now sets a high bar for baseline design, so you will need to stand out. That’s why I put the extra human touch on animations and lickable buttons. I suggest browsing UIVerse and Codepen for buttons and reference the code in your prompt: “Change main button {code} and secondary button {code}. Add a 1px border beam animation around the pill-shaped main button on hover.”. Once you’re happy with the hero, you’ll want to craft new sections based on your business. Features, action plan, pricing, testimonials, FAQ, CTA and footer are the popular ones. Insert a screenshot and prompt “Adapt a new section, change texts, names and numbers”. Gemini 3 is very smart. It reads your existing styles and site concept and will tastefully mold new designs to fit perfectly into your current site. Finally, repeat the same prompts for icons, buttons and animations. Use midjourney images and remix using Nano Banana Pro. Ask ChatGPT to come up with better headlines, features, ctas, etc. Don’t skip the human part, this is where you’re irreplaceable. Start prompting top-tier landing pages and watch your numbers grow.$

How I created these landing pages with Gemini 3 from start to finish First, I start with the hero section. It includes the nav bar, eyebrow, headline, subheadline, cta, social proof and visual. I spend 50% of the time here because it sets the colors, typography, spacing, which AI uses for the rest of the site consistently. “Create the hero section for my {app} called {name} in the style of {reference_site}”. Pro tip: use a screenshot and you’ll get way better results. Let’s get into the details. For icons, I prompt: “Use Iconify {icon set name}”. Most people use Lucide, but there are hundreds of open-source sets on Iconify like Solar, HeroIcons, Iconoir, Phosphor, etc. Just need to mention in the prompt. Same for custom fonts. For the animation, I prompt: “Animate fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0.”. This creates a subtle intro animation the first time users land on your page. Gemini 3 is an excellent animator. For example, I created the beam animation with this prompt: “Add noodles that connect and beam animate into the right circle. Add subtle details to the right beam animation circle with sonar and decorations.” For background animation, I use Unicorn Studio. Remix one of their templates and watch people click on your cover like crazy. What can I say, people love lasers. In the hero or right below it, social proof is super important. You can put ratings or logos, or both. For logos, you can prompt: “Animate the logos with marquee animation looping infinitely using duplicated items and alpha mask.”. Now the CTA. AI always creates basic buttons, which is fine 99% of the time. But Gemini 3 now sets a high bar for baseline design, so you will need to stand out. That’s why I put the extra human touch on animations and lickable buttons. I suggest browsing UIVerse and Codepen for buttons and reference the code in your prompt: “Change main button {code} and secondary button {code}. Add a 1px border beam animation around the pill-shaped main button on hover.”. Once you’re happy with the hero, you’ll want to craft new sections based on your business. Features, action plan, pricing, testimonials, FAQ, CTA and footer are the popular ones. Insert a screenshot and prompt “Adapt a new section, change texts, names and numbers”. Gemini 3 is very smart. It reads your existing styles and site concept and will tastefully mold new designs to fit perfectly into your current site. Finally, repeat the same prompts for icons, buttons and animations. Use midjourney images and remix using Nano Banana Pro. Ask ChatGPT to come up with better headlines, features, ctas, etc. Don’t skip the human part, this is where you’re irreplaceable. Start prompting top-tier landing pages and watch your numbers grow.

Meng To

287,083 次观看 • 7 个月前

My AI made Shopify pages are getting better and better everyday Here’s an example of a Shopify section I built with the reference page and the result on my store 👇 Guide: To make good AI landing pages, you need to use the same method as making good AI UGC or AI product images you have to take something that's already good as a reference for Claude/gemini to analyze and adapt for your product/brand for now you can't adapt full landing pages to your product because the Claude context gets bloated fast and you get poor output. Listicles are the only kind of page you can "one shot" with Claude. But Product pages are another story Analyze an existing page and adapting it to your product section by section is the way to go. The results are 10x better. here's an example (on the video): 1- I found this good product section from im8's product page. I screen-recorded the section on both desktop and mobile, going through the animations to capture the dynamism that a screenshot wouldn’t show. Then I asked Claude Web or Gemini to analyze the recording and produce a very detailed report. Full prompt is on my TG channel, it's quite long. 2- then ask Claude (inside your Shopify brand project folder): "I have a detailed UI/UX specification document for a product page section I want to adapt to my product. Recreate this exactly on Shopify as a section template and adapt it to [name of the product] using the brand guidelines" (paste the result prompt from step 1 ). 3- you will have your section ready after 3-4 minutes. you'll probably have to change a few things. spacing, small visual bugs, price not appearing correctly. it will take you 5 minutes maximum. 4- then you can ask Claude to make 4 different variations of the section using different designs and pick the best one using this prompt: "Create 4 design variations of this section. Keep the content and layout structure identical across all, only vary the visual treatment (color usage, typography hierarchy, spacing, component styling). I will choose the one I like the most." after that you have a pretty good section, and you can do the process again for all sections of the page. The less complex the section, the faster the process will be. note: I know the AI result is not perfect, but it's pretty impressive imo and it will only get better.

Olivier

84,679 次观看 • 4 个月前

I tried CapCut Design Studio and understood where design is headed. I transformed my Gumroad ebooks into a complete visual campaign using AI. This is no longer just video editing; it feels like a creative studio powered by AI. Design Studio is a space where you can freely compare, manage, and expand multiple desing versions on one Infinite Canvas Workflow. The interesting thing isn't just that it generates images. The real power is that you can explore, correct, and refine the idea without starting from scratch every time. Shifing from prompt-based output to iterative creative exploration. With AI Agents integrated directly into the canvas, it acts as an instant co-creator anywhere. And that's where the shift happens: AI stops being just a "give me an image" machine and transitions from single output to scalable design production. Features like Batch Text Editing automatically recognize and translate copy across 50+ languages in one click while maintaining the original layout, while Elements editing gives you Flexible Creative Control to fine-tune elements like a raw PSD file. This is no longer just about prompts. It's about designing with AI. #capcutdesignstudio #capcut

I tried CapCut Design Studio and understood where design is headed. I transformed my Gumroad ebooks into a complete visual campaign using AI. This is no longer just video editing; it feels like a creative studio powered by AI. Design Studio is a space where you can freely compare, manage, and expand multiple desing versions on one Infinite Canvas Workflow. The interesting thing isn't just that it generates images. The real power is that you can explore, correct, and refine the idea without starting from scratch every time. Shifing from prompt-based output to iterative creative exploration. With AI Agents integrated directly into the canvas, it acts as an instant co-creator anywhere. And that's where the shift happens: AI stops being just a "give me an image" machine and transitions from single output to scalable design production. Features like Batch Text Editing automatically recognize and translate copy across 50+ languages in one click while maintaining the original layout, while Elements editing gives you Flexible Creative Control to fine-tune elements like a raw PSD file. This is no longer just about prompts. It's about designing with AI. #capcutdesignstudio #capcut

Don Quijote de la IA

41,801 次观看 • 1 个月前

I gave Claude Mythos ONE prompt… And it instantly built this fully branded eCom landing page 🔥 It looks like something a $15k agency would spend weeks creating. But I used: ❌ No code ❌ No designer ❌ No Fiverr ❌ No page builder Just one prompt. This is where dropshipping is heading. AI that can take a product idea and turn it into a conversion-focused landing page in seconds. If you want the exact prompt + my full Claude skill to create pages like this for your own store… ❤️ Like 🔁 Repost 💬 Comment “Claude Mythos” I’ll DM it to you. First 500 only 👀

I gave Claude Mythos ONE prompt… And it instantly built this fully branded eCom landing page 🔥 It looks like something a $15k agency would spend weeks creating. But I used: ❌ No code ❌ No designer ❌ No Fiverr ❌ No page builder Just one prompt. This is where dropshipping is heading. AI that can take a product idea and turn it into a conversion-focused landing page in seconds. If you want the exact prompt + my full Claude skill to create pages like this for your own store… ❤️ Like 🔁 Repost 💬 Comment “Claude Mythos” I’ll DM it to you. First 500 only 👀

Kamil Sattar | The Ecom King

13,936 次观看 • 1 个月前

Claude Code + computer use is f*cking cracked 🤯 Build a landing page → Claude opens Chrome, looks at it, spots every issue, and fixes it — without you describing a single thing. All inside Claude Code. Perfect for DTC brands and agencies who are still vibe-coding landing pages and advertorials in Claude Code, then manually opening them in Chrome, spotting 15 things wrong, and describing every visual issue back to Claude one at a time. If you're building pages in Claude Code and your workflow looks like this — build the page, open it in Chrome, spot broken spacing, go back to Claude, type "the CTA button is too low and the hero image is cut off," wait for the fix, open Chrome again, find 3 new issues, describe those too ... Claude Code + computer use eliminates the entire loop: → Claude writes the full landing page or advertorial → Opens Chrome and navigates to it → Spots layout issues, broken spacing, off-brand colors, missing elements → Fixes everything and re-checks until the page looks right → Tests your Shopify product pages by clicking through like a real customer → Walks through your checkout flow and flags friction before customers hit it → You only see the finished, visually verified result No describing what you see on screen. No "the CTA button needs more contrast" back-and-forth. No being the eyeballs for an AI that can't see. What you get: → Landing pages and advertorials Claude builds AND visually QAs before you ever look at them → Product pages Claude clicks through — testing layout, images, and CTAs like a real user → HTML dashboards Claude opens and verifies the charts actually render → Checkout flows Claude walks through step by step to catch friction → All of it happening in one session — build, test, fix, done One prompt. Claude builds it, checks it, and fixes it. You just review the finished page. I put together a full playbook with the exact setup, the prompts, and 5 DTC workflows that use Claude Code + computer use. Want it for free? > Like this post > Comment "CLAUDE" And I'll send it over (must be following so I can DM)

Mike Futia

19,079 次观看 • 3 个月前

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.

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 次观看 • 4 个月前

A good design workflow should create more clarity, not more tabs. That is why OptimAI Claw is useful. One prompt can now help automate parts of your workflow on Figma and Stitch -- from research and structure to faster execution inside the tools you already use. “Turn this idea into a clean landing page concept. Draft the layout in Figma. Generate a matching flow in Stitch.” Less switching. Less friction. More room to think. That is what agentic AI should feel like: quiet, useful, and already inside the workflow. OptimAI Claw is built for that. --- 💡Launch OptimAI Claw with Core Node v2:

A good design workflow should create more clarity, not more tabs. That is why OptimAI Claw is useful. One prompt can now help automate parts of your workflow on Figma and Stitch -- from research and structure to faster execution inside the tools you already use. “Turn this idea into a clean landing page concept. Draft the layout in Figma. Generate a matching flow in Stitch.” Less switching. Less friction. More room to think. That is what agentic AI should feel like: quiet, useful, and already inside the workflow. OptimAI Claw is built for that. --- 💡Launch OptimAI Claw with Core Node v2:

OptimAI Network

184,349 次观看 • 2 个月前

I really like 's interactive landing page My favorite landing pages are the ones that drop you straight into the application and let you use it, you barely see that though I think it makes sense because why would you even need to sell to a customer with a big sales-y landing page if your product is impressive enough to convince them to buy it just by using it? ElevenLabs does a great mix of being able to actually use all the basic features as a demo while still being a traditional landing page This is easier with sites like Nomad List, because people just browse cities and it doesn't cost me much, but it's much harder to do this with AI apps because they cost a lot of money for every time you generate something (like photo, audio or text). One idea I had for Photo AI is to pre-generate a lot of combos of photos then on the landing page make a little demo and let them choose default models (like white man, black woman, etc.) and prompts etc. Then I just pre-gen all those combinations (like 10,000 pics, maybe $100) and I can have a demo on the landing page Unaffiliated with ElevenLabs btw, just like the website!

I really like 's interactive landing page My favorite landing pages are the ones that drop you straight into the application and let you use it, you barely see that though I think it makes sense because why would you even need to sell to a customer with a big sales-y landing page if your product is impressive enough to convince them to buy it just by using it? ElevenLabs does a great mix of being able to actually use all the basic features as a demo while still being a traditional landing page This is easier with sites like Nomad List, because people just browse cities and it doesn't cost me much, but it's much harder to do this with AI apps because they cost a lot of money for every time you generate something (like photo, audio or text). One idea I had for Photo AI is to pre-generate a lot of combos of photos then on the landing page make a little demo and let them choose default models (like white man, black woman, etc.) and prompts etc. Then I just pre-gen all those combinations (like 10,000 pics, maybe $100) and I can have a demo on the landing page Unaffiliated with ElevenLabs btw, just like the website!

@levelsio

255,806 次观看 • 1 年前

REPLIT JUST LAUNCHED AI SLIDES THAT DON'T LOOK LIKE AI MADE THEM every other AI slide generator spits out decks that scream "made by AI." replit slides is going hard on the angle that yours will actually look presentable. how it works: > describe what you want and it builds a full deck > start from scratch or use a built-in template > import an existing pptx and let AI restyle the whole thing > export to pptx, pdf, or google slides the actually interesting part: > slides are generated as code under the hood > same project can also spin up apps, mobile UIs, dashboards, and animations > everything shares the same design tokens (fonts, colors, spacing) > so your launch deck and the live dashboard it links to look like one product this isn't really replit competing with gamma or tome. its replit betting that slides, dashboards, animations, and apps are all just code (and once you have an agent that writes code well, every knowledge artifact comes from the same prompt). link in replies 👇

REPLIT JUST LAUNCHED AI SLIDES THAT DON'T LOOK LIKE AI MADE THEM every other AI slide generator spits out decks that scream "made by AI." replit slides is going hard on the angle that yours will actually look presentable. how it works: > describe what you want and it builds a full deck > start from scratch or use a built-in template > import an existing pptx and let AI restyle the whole thing > export to pptx, pdf, or google slides the actually interesting part: > slides are generated as code under the hood > same project can also spin up apps, mobile UIs, dashboards, and animations > everything shares the same design tokens (fonts, colors, spacing) > so your launch deck and the live dashboard it links to look like one product this isn't really replit competing with gamma or tome. its replit betting that slides, dashboards, animations, and apps are all just code (and once you have an agent that writes code well, every knowledge artifact comes from the same prompt). link in replies 👇

Creators Toolbox

28,718 次观看 • 2 个月前

Alex Hormozi said the secret to getting $100M leads is one thing: Lead magnets. But, most people have no clue how to create lead magnets that actually turn into revenue. So I built a FREE 2-hour video training that shows you how AI can do all of it for you: 1. Claude for research + idea generation 2. Claude Code to design a branded PDF in one prompt 3. Custom GPT your client's audience can actually use 4. Full funnel setup (landing page, email automation, ManyChat) Comment "LEAD" and I'll DM it to you for free.

Alex Hormozi said the secret to getting $100M leads is one thing: Lead magnets. But, most people have no clue how to create lead magnets that actually turn into revenue. So I built a FREE 2-hour video training that shows you how AI can do all of it for you: 1. Claude for research + idea generation 2. Claude Code to design a branded PDF in one prompt 3. Custom GPT your client's audience can actually use 4. Full funnel setup (landing page, email automation, ManyChat) Comment "LEAD" and I'll DM it to you for free.

Brandon Storey | Copywriting Coach

35,896 次观看 • 2 个月前

I made tons of money building websites for people and small companies. Most of that is now gone. You can now generate, customize, and deploy a website using natural language. I recorded myself building a site from scratch using 10Web.io. 4 minutes later, I had a full website generated just for me. Crazy! That's mostly how I paid rent when I graduated college: I'd either build you a new site or make changes to an existing one. It's nuts anyone can do that today by just asking. But this doesn't stop with generating a website. 10Web also released an AI Copilot that you can use to edit a website with a chat-based AI assistant. Here is what you can do with the AI Copilot: 1. You can edit individual elements and widgets on your site by selecting them and describing the changes you want. 2. You can generate new images, create sections, and generate or edit text. 3. You can also add any new elements to the site. The best way to understand how much progress we've made is by looking at the AI Copilot in action: And the funny part is that we are just figuring out how to use AI models. 2025 will be crazy.

I made tons of money building websites for people and small companies. Most of that is now gone. You can now generate, customize, and deploy a website using natural language. I recorded myself building a site from scratch using 10Web.io. 4 minutes later, I had a full website generated just for me. Crazy! That's mostly how I paid rent when I graduated college: I'd either build you a new site or make changes to an existing one. It's nuts anyone can do that today by just asking. But this doesn't stop with generating a website. 10Web also released an AI Copilot that you can use to edit a website with a chat-based AI assistant. Here is what you can do with the AI Copilot: 1. You can edit individual elements and widgets on your site by selecting them and describing the changes you want. 2. You can generate new images, create sections, and generate or edit text. 3. You can also add any new elements to the site. The best way to understand how much progress we've made is by looking at the AI Copilot in action: And the funny part is that we are just figuring out how to use AI models. 2025 will be crazy.

Santiago

57,917 次观看 • 1 年前

how to use Google's NEW open source Design.md + AI Skills to make your startup look like a $100 million company in 1 hour: 1. Design.md is an open source file from Google that captures the soul of a design. Typography, colors, spacing, all in one markdown file. You attach it to your prompt and your agent builds beautiful things every time. 2. Think of it this way. The HTML is the finished dish. The design.md is the recipe. The skills are the ingredients. Put them together and everything you build looks consistent and professional. 3. Don't create a design system from scratch. Find a brand you love. Linear, Stripe, Vercel, whatever resonates. Study it. Use ChatGPT or Claude to help you extract the design language into your own design.md file. 4. Build skills on top of your design.md. A landing page skill. A mobile app skill. A motion design skill. A slide deck skill. Each one references the same design.md so everything looks like it came from the same designer. 5. The biggest mistake people make: they nail one screen and then everything else looks generic. Design.md solves this. One file keeps every page, every format, every medium consistent. 6. Use it across everything. Your landing page. Your app. Your pitch deck. Your promo videos. Same DNA. Same taste. Same system. That's what separates a startup that looks real from one that looks vibe-coded. 7. Build a second brain for design inspiration. When you see something beautiful in the real world or online, capture it. Save it. When you're building something new, reference it. Taste is developed, not downloaded. 8. It's obvious but the difference between a product people trust and a product people bounce from is how it looks and feels. Design.md gives you that edge. you can watch below shoutout to Meng To for coming on The Startup Ideas Podcast (SIP) 🧃 and walking through his full workflow. if you want to use AI to actually build gorgeous designs, you'll want to use see this. watch

GREG ISENBERG

503,527 次观看 • 2 个月前

Since Gemini 3 came out I haven't been able to stop thinking about the idea of personalized software - the idea that you can just make whatever app you need. Where I keep getting stuck is that it still makes me feel like the joy is in creation while consumption is still very much ephemeral. I keep making new things, but I don't persistently use any of them (nor do I really want to). Here's a good example: Gemini 3 fully one-shotted this poem explorer that gives you one poem a day, that explains each line at hover, and offers suggested questions to explore the theme further. It's pretty good! But I suspect I feel more joy and delight that it was able to make it vs. actually finding something like this... useful? Maybe the soonest, most effective type of personal software is games because they're comfortably transient - I can play for a bit, have fun, and keep trying other games (Roblox model) - and that can be the whole point.

Since Gemini 3 came out I haven't been able to stop thinking about the idea of personalized software - the idea that you can just make whatever app you need. Where I keep getting stuck is that it still makes me feel like the joy is in creation while consumption is still very much ephemeral. I keep making new things, but I don't persistently use any of them (nor do I really want to). Here's a good example: Gemini 3 fully one-shotted this poem explorer that gives you one poem a day, that explains each line at hover, and offers suggested questions to explore the theme further. It's pretty good! But I suspect I feel more joy and delight that it was able to make it vs. actually finding something like this... useful? Maybe the soonest, most effective type of personal software is games because they're comfortably transient - I can play for a bit, have fun, and keep trying other games (Roblox model) - and that can be the whole point.

Raiza Martin

103,868 次观看 • 7 个月前

👀 I used OpenAI's Code Interpreter to make Flappy Bird 🐦in 7 minutes: Code Interpreter/GPT-4 for code generation. Pre-existing or AI-generated assets for graphics. --- Here's how to make the game in only 6 steps: (1): Enter the following prompt: "write p5.js code for Flappy Bird where you control a yellow bird continuously flying between a series of green pipes. The bird flaps every time you left click the mouse. If the bird falls to the ground or hits a pipe, you lose. This game goes on infinitely until you lose and you get points the further you go". (2): Use generative AI or existing game assets and spirits. I searched "flappy bird assets" on Google and used the first link, a GitHub repo with pngs from the original Flappy Bird. (3): Use this prompt to link assets to the code: "Please generate the entire file again based on the fact I'm using a unique background, spirits for the bird, and pipes. Here is the list of assets I'm using: [list of file names]." Code Interpreter should modify the code accordingly to include the list of file names. (4) Make an account OpenProcessing -> create a sketch -> paste in the code generated by Code Interpreter -> upload in-game assets from step (2). (5) (Optional) Ask ChatGPT to make changes to improve the in-game experience e.g., adding a high score, restarting the game when the bird dies, etc. Copy the new code into your OpenProcessing sketch and reload the game. (6) If something doesn't work, ask GPT4 to fix it. Copy and paste the error message and ask it to regenerate the code. --- Bonus Tips: - Iteratively test code. Each time you make a change using Code Interpreter, test the updated code by playing the game so you catch new bugs early. - Learn programming by asking questions: "Act as a senior programmer very good at explaining concepts to a beginner. Tell me how gravity works in this game and how you used code to make this happen."Code Interpreter/GPT4 for code generation. Download Pre-existing assets or generate new images for graphics. Excited to see what you make!

👀 I used OpenAI's Code Interpreter to make Flappy Bird 🐦in 7 minutes: Code Interpreter/GPT-4 for code generation. Pre-existing or AI-generated assets for graphics. --- Here's how to make the game in only 6 steps: (1): Enter the following prompt: "write p5.js code for Flappy Bird where you control a yellow bird continuously flying between a series of green pipes. The bird flaps every time you left click the mouse. If the bird falls to the ground or hits a pipe, you lose. This game goes on infinitely until you lose and you get points the further you go". (2): Use generative AI or existing game assets and spirits. I searched "flappy bird assets" on Google and used the first link, a GitHub repo with pngs from the original Flappy Bird. (3): Use this prompt to link assets to the code: "Please generate the entire file again based on the fact I'm using a unique background, spirits for the bird, and pipes. Here is the list of assets I'm using: [list of file names]." Code Interpreter should modify the code accordingly to include the list of file names. (4) Make an account OpenProcessing -> create a sketch -> paste in the code generated by Code Interpreter -> upload in-game assets from step (2). (5) (Optional) Ask ChatGPT to make changes to improve the in-game experience e.g., adding a high score, restarting the game when the bird dies, etc. Copy the new code into your OpenProcessing sketch and reload the game. (6) If something doesn't work, ask GPT4 to fix it. Copy and paste the error message and ask it to regenerate the code. --- Bonus Tips: - Iteratively test code. Each time you make a change using Code Interpreter, test the updated code by playing the game so you catch new bugs early. - Learn programming by asking questions: "Act as a senior programmer very good at explaining concepts to a beginner. Tell me how gravity works in this game and how you used code to make this happen."Code Interpreter/GPT4 for code generation. Download Pre-existing assets or generate new images for graphics. Excited to see what you make!

Alex Ker 🔭

739,874 次观看 • 3 年前

Claude Code is terrible at UI design and everyone knows it so this guy fixed it by building an MCP that gives Claude its own AI design tool instead of going back and forth between a design platform and your code editor, Claude now creates the designs itself and drops them straight into your codebase the MCP has full context of your existing design system and project so everything it generates actually matches what you already have. one command to set up and it installs the MCP and skill files so Claude instantly knows how to use it if you're tired of the same Inter font, purple gradient, card grid layout on every project, this is definitely worth trying

Claude Code is terrible at UI design and everyone knows it so this guy fixed it by building an MCP that gives Claude its own AI design tool instead of going back and forth between a design platform and your code editor, Claude now creates the designs itself and drops them straight into your codebase the MCP has full context of your existing design system and project so everything it generates actually matches what you already have. one command to set up and it installs the MCP and skill files so Claude instantly knows how to use it if you're tired of the same Inter font, purple gradient, card grid layout on every project, this is definitely worth trying

Om Patel

398,097 次观看 • 3 个月前

I love using GLM 5.2 for web app iteration. My workflow: generate 6 variations, then pick the best one and continue iterating on it. I built Recast to make this even easier. Give it a prompt, get 6 variations, download the code for your favorite version, then continue iterating in your own coding agent. GLM 5.2 works really well for this use case since it's fast, cheap, and great at design. On average, you can make 3-6 landing pages with GLM 5.2 for every one you can generate with Opus 4.8. And the design variety of the GLM landing pages helps a lot with trying to think through what style you want to go with. Recast is launching soon (as a web app + skill).

I love using GLM 5.2 for web app iteration. My workflow: generate 6 variations, then pick the best one and continue iterating on it. I built Recast to make this even easier. Give it a prompt, get 6 variations, download the code for your favorite version, then continue iterating in your own coding agent. GLM 5.2 works really well for this use case since it's fast, cheap, and great at design. On average, you can make 3-6 landing pages with GLM 5.2 for every one you can generate with Opus 4.8. And the design variety of the GLM landing pages helps a lot with trying to think through what style you want to go with. Recast is launching soon (as a web app + skill).

Hassan

20,164 次观看 • 20 天前

Want to create beautiful, high-converting landing pages like this without spending days in Figma or Webflow? Here's my AI-first workflow: Start with Claude Have Claude interview you about the product, audience, positioning, features, concerns and tradeoffs using this prompt: "Create me a plan file for [Product Idea] and interview me in detail using the AskUserQuestionTool about literally anything: technical implementation, UI & UX, concerns, tradeoffs, etc." Turn the plan into a prototype Use the plan file to generate a working prototype and pull inspiration, layouts and motion ideas from Generate the landing page in code Skip static mockups and build directly in the browser. Run a design review Use the Design Review skill to identify hierarchy, spacing, branding, usability and accessibility issues. Iterate relentlessly Keep refining until it feels designed and polished, not generated. The future isn't designers vs AI. It's builders with great taste using AI as leverage. Anyone can generate. Taste is the moat. Follow for more AI design and vibe coding workflows. And if you want more practical systems like this, my book 'Think. Prompt. Create.' is available now on Amazon

Want to create beautiful, high-converting landing pages like this without spending days in Figma or Webflow? Here's my AI-first workflow: Start with Claude Have Claude interview you about the product, audience, positioning, features, concerns and tradeoffs using this prompt: "Create me a plan file for [Product Idea] and interview me in detail using the AskUserQuestionTool about literally anything: technical implementation, UI & UX, concerns, tradeoffs, etc." Turn the plan into a prototype Use the plan file to generate a working prototype and pull inspiration, layouts and motion ideas from Generate the landing page in code Skip static mockups and build directly in the browser. Run a design review Use the Design Review skill to identify hierarchy, spacing, branding, usability and accessibility issues. Iterate relentlessly Keep refining until it feels designed and polished, not generated. The future isn't designers vs AI. It's builders with great taste using AI as leverage. Anyone can generate. Taste is the moat. Follow for more AI design and vibe coding workflows. And if you want more practical systems like this, my book 'Think. Prompt. Create.' is available now on Amazon

Joey Primiani

470,774 次观看 • 1 个月前