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

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

На главную

I open-sourced ThreeUI, my library of three.js components and landing pages. 160+ are free, and the tool is free too. It includes procedural 3D hero sections, icons, and motion designs. Copy the prompt or source, give it to your agent, then change the theme, lighting, motion or layout. Live...

723,851 просмотров • 1 день назад •via X (Twitter)

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

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

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

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

Anthropic's most viral feature is now open-source! Until now, Anthropic's Generative UI capabilities only existed inside its own products. CopilotKit🪁 just shipped Open Generative UI, an open-source implementation of Claude Artifacts that works in any app. The agent generates HTML/SVG at runtime, and CopilotKit streams it token-by-token into a sandboxed iframe inside the app's chat. So the user can watch the UI assemble itself in real time, not after the full response is ready. The sandbox is fully isolated with no access to the parent app, the DOM, or user data. So if the agent hallucinates broken markup or unexpected JavaScript, nothing leaks outside the iframe. Under the hood, the agent does not select from pre-built components. Instead, it generates arbitrary visuals from scratch every time. The output is unconstrained by default, but you can shape it by defining prompt-based skills that teach the agent specific visual formats or guidelines. For instance, a skill prompt can guide the agent toward producing a Chart.js dashboard with proper axis labels and responsive sizing, or an interactive 3D model with rotation controls. The video below shows this in action, and the output quality you see actually comes from the skills layer. Open Generative UI runs on AG-UI, so it works out of the box with LangGraph, CrewAI, Mastra, Google ADK, AWS Strands, and more. It also ships with a standalone MCP server that plugs into Claude Code, Cursor, or any MCP-compatible client. And the entire stack is built on top of CopilotKit, the open-source frontend framework for agents and generative UI. 30k+ GitHub stars, with SDKs for React, Next.js, Angular, and Vue. I have shared the GitHub repo and a live playground in the replies!

Akshay 🚀

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

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,300 просмотров • 8 месяцев назад