Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Just open-sourced Open Design Skills 🚀 Your Claude Code still ships ugly web pages. With this design system, any landing page, slide deck, letter, resume, or portfolio gets a world-class, magazine-grade look ✉️.

tuturetom's profile picture

Tom Huang

39,374 subscribers

101,004 görüntüleme • 5 ay önce •via X (Twitter)

EğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

Introducing the Sleek Design Skill Just install it and your agent instantly makes better mobile app designs Works with Claude Code, Codex or any agent with skills. Link below.
0:31

Introducing the Sleek Design Skill Just install it and your agent instantly makes better mobile app designs Works with Claude Code, Codex or any agent with skills. Link below.

Mattia

185,685 görüntüleme • 6 ay önce

The most complete AI design skill stack is now in Open Design. AI agents can build full apps. But most of them still design like shit. You used to spend more time fixing the design than building the app. And prompting harder does not fix taste. So Open Design integrated the design skills everyone on X is talking about: Taste Skill Hallmark Frontend Design Image-to-Code Design Review 100+ design systems It works locally with 20+ AI CLIs: Codex, Claude Code, Cursor, Gemini CLI, OpenCode, and more. Pick your agent. Generate pages that finally have taste. 👉
0:53

The most complete AI design skill stack is now in Open Design. AI agents can build full apps. But most of them still design like shit. You used to spend more time fixing the design than building the app. And prompting harder does not fix taste. So Open Design integrated the design skills everyone on X is talking about: Taste Skill Hallmark Frontend Design Image-to-Code Design Review 100+ design systems It works locally with 20+ AI CLIs: Codex, Claude Code, Cursor, Gemini CLI, OpenCode, and more. Pick your agent. Generate pages that finally have taste. 👉

Open Design

53,135 görüntüleme • 4 ay önce

Cat Wu, head of product for Claude Code at Anthropic: "you can build almost anything with Claude from a single prompt now" one prompt gets you a working screen, not YOUR product Claude Code has never seen your design system, so it guesses the look fresh every time. how to hand Claude Code that system is in the article. better than the $300 design course in your tabs, and this one's free.
12:14

Cat Wu, head of product for Claude Code at Anthropic: "you can build almost anything with Claude from a single prompt now" one prompt gets you a working screen, not YOUR product Claude Code has never seen your design system, so it guesses the look fresh every time. how to hand Claude Code that system is in the article. better than the $300 design course in your tabs, and this one's free.

Mnimiy

114,141 görüntüleme • 3 ay önce

The DESIGN.md upgrade is officially live in Stitch! 🚀 Yesterday we open-sourced the spec, and today we are giving you more tools to use it: 📄 Start with DESIGN.md: Attach a DESIGN.md right at the start of a project. Don't have one? Our new wizard will help you extract one from your code base or the web. 🔄 DESIGN.md to Design System: Upload a DESIGN.md file to generate a Design System on the canvas. 🧩 Token Support: Design Systems now support design tokens from DESIGN.md! Add them to your file and Stitch will seamlessly incorporate them. 🗑️ Clean Up: (You asked, we listened) You can now easily delete a design system. We’re excited to build the open design standard together. 👇
0:33

The DESIGN.md upgrade is officially live in Stitch! 🚀 Yesterday we open-sourced the spec, and today we are giving you more tools to use it: 📄 Start with DESIGN.md: Attach a DESIGN.md right at the start of a project. Don't have one? Our new wizard will help you extract one from your code base or the web. 🔄 DESIGN.md to Design System: Upload a DESIGN.md file to generate a Design System on the canvas. 🧩 Token Support: Design Systems now support design tokens from DESIGN.md! Add them to your file and Stitch will seamlessly incorporate them. 🗑️ Clean Up: (You asked, we listened) You can now easily delete a design system. We’re excited to build the open design standard together. 👇

Stitch by Google

195,457 görüntüleme • 5 ay önce

Introducing: VibeFlow UI (VibeFlow (YC S25)) design systems. Generate UIs that actually look like YOUR brand. We got tired of AI design tools outputting anonymous slop. So we gave the model your real design system. > Paste any URL → get your full design system in 30s > Exportable as a skill for any agent > Dashboards, slide decks, landing pages, all on-brand > Set it once → every future UI uses your system I challenge anyone to paste a URL and get a bad result. Haven't seen one yet. 🔥
0:58

Introducing: VibeFlow UI (VibeFlow (YC S25)) design systems. Generate UIs that actually look like YOUR brand. We got tired of AI design tools outputting anonymous slop. So we gave the model your real design system. > Paste any URL → get your full design system in 30s > Exportable as a skill for any agent > Dashboards, slide decks, landing pages, all on-brand > Set it once → every future UI uses your system I challenge anyone to paste a URL and get a bad result. Haven't seen one yet. 🔥

Alessia

16,205 görüntüleme • 5 ay önce

New open source project: Easel, a macOS workspace for AI-assisted product design and frontend iteration powered by the Codex SDK. Think of it as "Claude Design for Codex." It brings together a local project library, design-system setup, Codex chat, and a live web preview with a point-and-click inspector. Set up your design system however you like. Import one from Figma , bring your own, or have the agent generate it as a design.md. Then use it to build prototypes and slide decks. Codex-first, with Claude and other AI providers and local models planned for future releases. OpenAI Developers
0:51

New open source project: Easel, a macOS workspace for AI-assisted product design and frontend iteration powered by the Codex SDK. Think of it as "Claude Design for Codex." It brings together a local project library, design-system setup, Codex chat, and a live web preview with a point-and-click inspector. Set up your design system however you like. Import one from Figma , bring your own, or have the agent generate it as a design.md. Then use it to build prototypes and slide decks. Codex-first, with Claude and other AI providers and local models planned for future releases. OpenAI Developers

James Rochabrun

61,608 görüntüleme • 3 ay önce

Bruh... this open-source AI design skill makes your AI-generated UIs look far less generic. 😍 Hallmark is a design skill for Claude Code, Cursor & Codex that helps AI generate interfaces that feel intentionally designed instead of looking like typical AI outputs. It can: → build beautiful new UIs → audit existing designs → redesign pages while preserving your content → study a URL or screenshot and extract its design DNA If you build apps with AI, this is definitely worth trying :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:38

Bruh... this open-source AI design skill makes your AI-generated UIs look far less generic. 😍 Hallmark is a design skill for Claude Code, Cursor & Codex that helps AI generate interfaces that feel intentionally designed instead of looking like typical AI outputs. It can: → build beautiful new UIs → audit existing designs → redesign pages while preserving your content → study a URL or screenshot and extract its design DNA If you build apps with AI, this is definitely worth trying :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

32,048 görüntüleme • 2 ay önce

I just recorded the COMPLETE CLAUDE 3D WEB DESIGN Course ❤️‍🔥 Dedicate 1 hour to this. The COMPLETE Claude AI Design Course teaches you to DESIGN and BUILD ANY 3D Game or Website. Those who watch it tonight will wake up tomorrow with a new skill. Watch it and save it to your favorites now.
59:56

I just recorded the COMPLETE CLAUDE 3D WEB DESIGN Course ❤️‍🔥 Dedicate 1 hour to this. The COMPLETE Claude AI Design Course teaches you to DESIGN and BUILD ANY 3D Game or Website. Those who watch it tonight will wake up tomorrow with a new skill. Watch it and save it to your favorites now.

Viktor Oddy

209,896 görüntüleme • 1 ay önce

Skill issue. Literally. Claude can build you world class designs, but you need a system that works. First, you need to give it a reference design. Go to Behance, Dribbble, awwards, or mobbin. design and pick a few websites you like. Screenshot and send it to Claude, and ask it to identify the patterns that stand out in each. Next is skills. Install the following skills into your claude code 1. /Taste 2. /emil-kowalski 3. /Impeccable 4. /apple-design-hig The last one is a personal fork of the popular /apple-design skill. That's how you build websites that look like this: And I shared all this skills on my free AI class over the weekend. Comment below if you want the Notion doc, and I'll send it to you.
1:03

Skill issue. Literally. Claude can build you world class designs, but you need a system that works. First, you need to give it a reference design. Go to Behance, Dribbble, awwards, or mobbin. design and pick a few websites you like. Screenshot and send it to Claude, and ask it to identify the patterns that stand out in each. Next is skills. Install the following skills into your claude code 1. /Taste 2. /emil-kowalski 3. /Impeccable 4. /apple-design-hig The last one is a personal fork of the popular /apple-design skill. That's how you build websites that look like this: And I shared all this skills on my free AI class over the weekend. Comment below if you want the Notion doc, and I'll send it to you.

Favour is locked in.

103,397 görüntüleme • 2 gün önce

🎨 Introducing Genspark Design The next-gen AI for design and creation, powered by Claude Opus 4.7. From rough idea to professional design, no design background needed. - One tool for everything you design. UI prototypes, videos, HTML animations, posters — all in one place and production-ready. - Stay on-brand with your own design system. Upload your Figma files or save your designs, reuse them across every project, and share them with your team. - Ship it, don't just mock it. Turn any app or website design into working code with one click, built on Genspark Code. Start building at our launch price 👉
1:23

🎨 Introducing Genspark Design The next-gen AI for design and creation, powered by Claude Opus 4.7. From rough idea to professional design, no design background needed. - One tool for everything you design. UI prototypes, videos, HTML animations, posters — all in one place and production-ready. - Stay on-brand with your own design system. Upload your Figma files or save your designs, reuse them across every project, and share them with your team. - Ship it, don't just mock it. Turn any app or website design into working code with one click, built on Genspark Code. Start building at our launch price 👉

Genspark

179,614 görüntüleme • 3 ay önce

I found a site collecting the best UI on the internet ! here is the link: They are literally sorted by the exact screen you're stuck on. sign up, hero section, pricing, navigation, CTA, footer, button, landing page. ( there's even a Claude category ) before you build any screen, open the category, pull 5-6 references aligned to your product mechanics and outcome goals screenshot them into Claude Code and use /design to describe what you want kept and the design system required you'll ship much cleaner ideations for the product at lightning fast speed ! ( this and the design system doc are the only two tabs open when we start a client build )
0:20

I found a site collecting the best UI on the internet ! here is the link: They are literally sorted by the exact screen you're stuck on. sign up, hero section, pricing, navigation, CTA, footer, button, landing page. ( there's even a Claude category ) before you build any screen, open the category, pull 5-6 references aligned to your product mechanics and outcome goals screenshot them into Claude Code and use /design to describe what you want kept and the design system required you'll ship much cleaner ideations for the product at lightning fast speed ! ( this and the design system doc are the only two tabs open when we start a client build )

Harshil Tomar

27,918 görüntüleme • 29 gün önce

NEW YEAR! NEW SERVICE LAUNCH! 🎉 Finally launching our web development & product development services at Meet my co-founder: Usman S. (My brother) - he will be handling all development services with 6+ yrs of experience! We're offering a retainer at just $3999/month with both design & development services. (more details in website) We have got a killer team of designers & developers! Here's all our services: 1. Landing page design 2. Landing page development Custom Code/Framer 2. App Design 3. AppStore Screenshot design 4. Social Media Designs 5. Ad campaign designs 6. Pitch Deck Design 7. Web App & Dashboard Designs & Development Book a call at now!
0:43

NEW YEAR! NEW SERVICE LAUNCH! 🎉 Finally launching our web development & product development services at Meet my co-founder: Usman S. (My brother) - he will be handling all development services with 6+ yrs of experience! We're offering a retainer at just $3999/month with both design & development services. (more details in website) We have got a killer team of designers & developers! Here's all our services: 1. Landing page design 2. Landing page development Custom Code/Framer 2. App Design 3. AppStore Screenshot design 4. Social Media Designs 5. Ad campaign designs 6. Pitch Deck Design 7. Web App & Dashboard Designs & Development Book a call at now!

Amena

20,012 görüntüleme • 9 ay önce

every AI lab picked a different war today Anthropic: lets mistakenly vibe code a $100/mo minimum for Claude Code OpenAI: a new image model for creatives SpaceX: maybe acquiring Cursor, $60B Google: open sourced DESIGN .md this all happened just today. it is only Tuesday 🤣
1:06

every AI lab picked a different war today Anthropic: lets mistakenly vibe code a $100/mo minimum for Claude Code OpenAI: a new image model for creatives SpaceX: maybe acquiring Cursor, $60B Google: open sourced DESIGN .md this all happened just today. it is only Tuesday 🤣

klöss

135,972 görüntüleme • 5 ay önce

He leads engineering on Gemini at Google. instead of keeping his Claude setup private, he open-sourced it. Addy Osmani. That Google: Chrome DevTools lead, "Learning JavaScript Design Patterns" author. 'agent-skills' - his personal loadout. Drop-in for any project. 68,925 stars. MIT. → bookmark it. This is how your Claude setup goes pro.
0:29

He leads engineering on Gemini at Google. instead of keeping his Claude setup private, he open-sourced it. Addy Osmani. That Google: Chrome DevTools lead, "Learning JavaScript Design Patterns" author. 'agent-skills' - his personal loadout. Drop-in for any project. 68,925 stars. MIT. → bookmark it. This is how your Claude setup goes pro.

Granite

469,432 görüntüleme • 2 ay önce

DOWNLOAD MASTERCARD DESIGN MD AND BUILD CLEAR WITH CLAUDE CODE people onboard Claude with text designers actually getting results onboard it with a file most never think to write step everyone skips: A design md - plain text rulebook for colors, fonts, spacing, component patterns, tone You don’t write it from scratch - pull a public one from an open design system repo, or literally download a real brand’s guidelines and tell Claude “design like this” Upload it once to a Claude Design system, pick the strongest model, set effort to Max, wait 10-20 minutes for real mockups to review Every project after that pulls your actual brand automatically - zero re explaining your look every single prompt mistake that burns the most hours: designing and coding in the same conversation Claude Design is for visual exploration Claude Code is for production “Mixing them is where beginners lose entire afternoons re litigating decisions that were already made” real workflow, start to finish: design system once - structured brief - first draft - refine with chat, inline comments, sliders - export handoff bundle - Claude Code converts it to a real Next.js app - push, deploy, done 10 dashboards in 10 minutes isn’t the headline Never re explaining your brand again is full below
1:03

DOWNLOAD MASTERCARD DESIGN MD AND BUILD CLEAR WITH CLAUDE CODE people onboard Claude with text designers actually getting results onboard it with a file most never think to write step everyone skips: A design md - plain text rulebook for colors, fonts, spacing, component patterns, tone You don’t write it from scratch - pull a public one from an open design system repo, or literally download a real brand’s guidelines and tell Claude “design like this” Upload it once to a Claude Design system, pick the strongest model, set effort to Max, wait 10-20 minutes for real mockups to review Every project after that pulls your actual brand automatically - zero re explaining your look every single prompt mistake that burns the most hours: designing and coding in the same conversation Claude Design is for visual exploration Claude Code is for production “Mixing them is where beginners lose entire afternoons re litigating decisions that were already made” real workflow, start to finish: design system once - structured brief - first draft - refine with chat, inline comments, sliders - export handoff bundle - Claude Code converts it to a real Next.js app - push, deploy, done 10 dashboards in 10 minutes isn’t the headline Never re explaining your brand again is full below

YARD

31,614 görüntüleme • 1 ay önce

Anthropic released Claude Design TODAY and it's now accessible at I spent the last hour giving it a first look, and shared my thoughts and results in the video below. This is a BIG drop. This is a new design surface from Anthropic, and it changes what "AI design" means. Short version: Claude can now design. Not "describe a design." Not "generate an image of a design." Actual production work — prototypes, wireframes, high-fidelity mocks, slide decks, landing pages — editable, on-brand, and ready to hand off. Here's what stood out on first look: → Real design surfaces Prototypes, wireframes, hi-fi, and slide decks — each with templates and proper structure, not just pretty screenshots. → Comment-based edits Leave a comment on any element and Claude revises it. This is the Figma-style review loop, with the designer replaced by a model that works at 3am. → Brand design systems You can feed it your system — colors, type, components — and it actually respects it. On-brand output, not generic AI slop. → Export anywhere PDF, PowerPoint, Canva, standalone HTML. Plus a built-in handoff straight to Claude Code for engineers to implement. → Import from real tools Figma, GitHub, and captured web elements come in as inputs. Your existing work is the starting line, not the discard pile. → Collaboration Share links for view / comment / edit — the exact tier system teams already expect. What I tested on Opus 4.7: • A 5-slide deck generated from a single screenshot. Claude asked clarifying questions BEFORE generating and shipped speaker notes by default. • A landing page build. Solid first pass, real components, real layout logic. • Multiple chats running concurrently. You can parallelize design work across threads like a small team. Why this matters: PMs, founders, marketers, and non-engineers can now create designs that engineers can actually ship with production-ready output and a claude code handoff built in. The gap between "I have an idea" and "here's a working prototype with my brand applied" just collapsed to minutes. Full walkthrough, live demos, exports, and honest takes on where it breaks below. P.S. • This is an Anthropic Labs product — NOT GA yet. • Claude Design is currently webapp only (no API), and does not yet support the Analytics API, Compliance API, or cost/usage reporting. • Availability: – Default ON for Pro / Max / Team – Default OFF for Enterprise Enterprise admins can toggle it on via RBAC in console (comes with a ~$20/user initial credit).
18:30

Anthropic released Claude Design TODAY and it's now accessible at I spent the last hour giving it a first look, and shared my thoughts and results in the video below. This is a BIG drop. This is a new design surface from Anthropic, and it changes what "AI design" means. Short version: Claude can now design. Not "describe a design." Not "generate an image of a design." Actual production work — prototypes, wireframes, high-fidelity mocks, slide decks, landing pages — editable, on-brand, and ready to hand off. Here's what stood out on first look: → Real design surfaces Prototypes, wireframes, hi-fi, and slide decks — each with templates and proper structure, not just pretty screenshots. → Comment-based edits Leave a comment on any element and Claude revises it. This is the Figma-style review loop, with the designer replaced by a model that works at 3am. → Brand design systems You can feed it your system — colors, type, components — and it actually respects it. On-brand output, not generic AI slop. → Export anywhere PDF, PowerPoint, Canva, standalone HTML. Plus a built-in handoff straight to Claude Code for engineers to implement. → Import from real tools Figma, GitHub, and captured web elements come in as inputs. Your existing work is the starting line, not the discard pile. → Collaboration Share links for view / comment / edit — the exact tier system teams already expect. What I tested on Opus 4.7: • A 5-slide deck generated from a single screenshot. Claude asked clarifying questions BEFORE generating and shipped speaker notes by default. • A landing page build. Solid first pass, real components, real layout logic. • Multiple chats running concurrently. You can parallelize design work across threads like a small team. Why this matters: PMs, founders, marketers, and non-engineers can now create designs that engineers can actually ship with production-ready output and a claude code handoff built in. The gap between "I have an idea" and "here's a working prototype with my brand applied" just collapsed to minutes. Full walkthrough, live demos, exports, and honest takes on where it breaks below. P.S. • This is an Anthropic Labs product — NOT GA yet. • Claude Design is currently webapp only (no API), and does not yet support the Analytics API, Compliance API, or cost/usage reporting. • Availability: – Default ON for Pro / Max / Team – Default OFF for Enterprise Enterprise admins can toggle it on via RBAC in console (comes with a ~$20/user initial credit).

JJ Englert

32,445 görüntüleme • 5 ay önce

Just open sourced Monocode - a desktop UI for your coding agents. Works with your existing Claude Code, Codex, Cursor, and OpenCode harnesses. Tabs can be sessions, a lightweight editor or a terminal. Currently only supports macOS Apple Silicon. Still very early so expect bugs. Feedback and small PRs are welcome :)
0:33

Just open sourced Monocode - a desktop UI for your coding agents. Works with your existing Claude Code, Codex, Cursor, and OpenCode harnesses. Tabs can be sessions, a lightweight editor or a terminal. Currently only supports macOS Apple Silicon. Still very early so expect bugs. Feedback and small PRs are welcome :)

Nikolay Petkov

53,624 görüntüleme • 1 ay önce

Every frontend developer just stopped opening DevTools. Your AI coding agent can now reverse-engineer the entire design system of any website directly from the terminal. Just type: /design And it instantly extracts: • Brand colors • Fonts & typography • Spacing system • Buttons & UI components • Layout patterns • Design tokens Then saves everything into a structured DESIGN.md file your AI agent can understand and reuse. Powered by Hyperbrowser + Claude Code MCP. The crazy part? You can now study, replicate, and rebuild world-class UI systems in minutes instead of wasting hours manually inspecting websites. This changes how vibe coding works forever. Repo👇
0:26

Every frontend developer just stopped opening DevTools. Your AI coding agent can now reverse-engineer the entire design system of any website directly from the terminal. Just type: /design And it instantly extracts: • Brand colors • Fonts & typography • Spacing system • Buttons & UI components • Layout patterns • Design tokens Then saves everything into a structured DESIGN.md file your AI agent can understand and reuse. Powered by Hyperbrowser + Claude Code MCP. The crazy part? You can now study, replicate, and rebuild world-class UI systems in minutes instead of wasting hours manually inspecting websites. This changes how vibe coding works forever. Repo👇

divyansh tiwari

78,201 görüntüleme • 4 ay önce

I love working in terminal, but I can't design or brainstorm in there. So I built Hatch! One IDE for the full loop: explore ideas → test out designs with SuperDesign.Dev → find right skills for the job → ship with agents. > build: supports Claude code, OpenCode and Cursor agents in parallel with worktrees. > idea maze: use the canvas to sketch out ideas, paste tweets or images. > idea maze: let your agent make connections, critique your ideas or come up with related ones. > design: bring SuperDesign.Dev prompts or exports directly into your workspaces. vibedesign before vibecoding. > skills: ask your agent what skills to get with your workspace context. All open source!
0:24

I love working in terminal, but I can't design or brainstorm in there. So I built Hatch! One IDE for the full loop: explore ideas → test out designs with SuperDesign.Dev → find right skills for the job → ship with agents. > build: supports Claude code, OpenCode and Cursor agents in parallel with worktrees. > idea maze: use the canvas to sketch out ideas, paste tweets or images. > idea maze: let your agent make connections, critique your ideas or come up with related ones. > design: bring SuperDesign.Dev prompts or exports directly into your workspaces. vibedesign before vibecoding. > skills: ask your agent what skills to get with your workspace context. All open source!

Firat Sertgoz

38,578 görüntüleme • 8 ay önce