Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

We've released a new frontend-design plugin for Claude Code. Here's Claude's output for: "use the frontend design skill. Create a music player app."

trq212's profile picture

Thariq

312,881 subscribers

492,040 görüntüleme • 8 ay önce •via X (Twitter)

SanatEğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

Spent a few hours in Claude Code again this morning working on a new design for Wireframe Design Studio. I didn't write a single line of code.
0:17

Spent a few hours in Claude Code again this morning working on a new design for Wireframe Design Studio. I didn't write a single line of code.

James McDonald

35,355 görüntüleme • 5 ay önce

Figma design vs Claude Code output Here's my workflow: → Built the component on shadcn/ui foundations → Wrote a SKILLS.md file that systematized design-token extraction (included inputs, extraction protocol, tech selection, tailwind rules, layout etc) → Fed Claude the Figma CSS + 2x-scaled component PNGs (halved the measurements) → Iterated bit-by-bit in Claude Code until I as satisfied with the output
0:18

Figma design vs Claude Code output Here's my workflow: → Built the component on shadcn/ui foundations → Wrote a SKILLS.md file that systematized design-token extraction (included inputs, extraction protocol, tech selection, tailwind rules, layout etc) → Fed Claude the Figma CSS + 2x-scaled component PNGs (halved the measurements) → Iterated bit-by-bit in Claude Code until I as satisfied with the output

CJ @ Jackie Brown

27,054 görüntüleme • 3 ay önce

Claude Design + Shopify is f*cking ridiculous 🤯 You can now publish pages from Claude Design → Claude Code → Shopify. Built 100% with Claude Design, Claude Code, and the Shopify CLI. Perfect for DTC brands and agencies who want to skip the design → dev handoff entirely. Here's how it works: → Design any landing page in Claude Design → Export as a zip and drop it into Claude Code → Install the Shopify + Shopify AI Toolkit plugins → Prompt Claude to convert the HTML into a Shopify page template + push to live theme → Claude uploads the images, deploys the files, and creates a published page No more handing designs off to a dev and waiting 2 weeks for a Shopify page. What you get: - A workflow that turns any Claude Design page into a real Shopify page template - Editable sections so your marketing team can swap copy, images, and CTAs without code - Images uploaded straight to Shopify Files automatically - A files-only deploy that only touches what's new in your live theme - A repeatable pipeline you can use every time you design a new landing page This is essentially the design-to-deploy pipeline brands have been waiting for. I put together a step-by-step playbook for going from Claude Design → published Shopify page. Every install, every plugin, every command, and the exact prompt that runs the whole thing. Want the playbook for free? > Like this post > Comment "SHOP" And I'll send it over (must be following so I can DM)
0:17

Claude Design + Shopify is f*cking ridiculous 🤯 You can now publish pages from Claude Design → Claude Code → Shopify. Built 100% with Claude Design, Claude Code, and the Shopify CLI. Perfect for DTC brands and agencies who want to skip the design → dev handoff entirely. Here's how it works: → Design any landing page in Claude Design → Export as a zip and drop it into Claude Code → Install the Shopify + Shopify AI Toolkit plugins → Prompt Claude to convert the HTML into a Shopify page template + push to live theme → Claude uploads the images, deploys the files, and creates a published page No more handing designs off to a dev and waiting 2 weeks for a Shopify page. What you get: - A workflow that turns any Claude Design page into a real Shopify page template - Editable sections so your marketing team can swap copy, images, and CTAs without code - Images uploaded straight to Shopify Files automatically - A files-only deploy that only touches what's new in your live theme - A repeatable pipeline you can use every time you design a new landing page This is essentially the design-to-deploy pipeline brands have been waiting for. I put together a step-by-step playbook for going from Claude Design → published Shopify page. Every install, every plugin, every command, and the exact prompt that runs the whole thing. Want the playbook for free? > Like this post > Comment "SHOP" And I'll send it over (must be following so I can DM)

Mike Futia

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

It's kinda crazy that you can just use multitask design mode to make a bunch of frontend UI changes, then ask for a shared link canvas with a recap of the changes in like 5 min
0:19

It's kinda crazy that you can just use multitask design mode to make a bunch of frontend UI changes, then ask for a shared link canvas with a recap of the changes in like 5 min

John Bai

94,774 görüntüleme • 1 ay önce

Claude Code Desktop has a built-in MCP for frontend preview It activates automatically when you ask Claude to spin up a dev server Save this thread 👇
0:15

Claude Code Desktop has a built-in MCP for frontend preview It activates automatically when you ask Claude to spin up a dev server Save this thread 👇

Daniel San

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

made a nothing design skill for claude code. tell it "nothing style" and it builds the whole thing. tokens, components, dark+light. go grab it, it’s open source:
0:15

made a nothing design skill for claude code. tell it "nothing style" and it builds the whole thing. tokens, components, dark+light. go grab it, it’s open source:

Dom

286,380 görüntüleme • 3 ay önce

Who said web design is over? Framer VS Claude On Claude's part, the result was a design riddled with tasteless flaws. On the Framer side, the result is clear. A tasteful design, completely designed and developed in 12 hours.
0:19

Who said web design is over? Framer VS Claude On Claude's part, the result was a design riddled with tasteless flaws. On the Framer side, the result is clear. A tasteful design, completely designed and developed in 12 hours.

Faruk Yurtseven - Designer

57,603 görüntüleme • 2 ay önce

Claude Code + Google Stitch 2.0 is f*cking cracked 🤯 Google just dropped a free AI design agent that solves Claude Code's biggest weakness: frontend design. One screenshot of a high-converting landing page → a production-ready site for your brand in minutes. All inside Google Stitch + Claude Code. Perfect for DTC brands and agencies who are building advertorial pages and product launch pages for Meta but burning days on designer back-and-forth. If you're running Meta ads and need 5-10 different landing pages testing different hooks, angles, and offers — each one targeting a different audience and pain point — you know the bottleneck isn't the ads. It's the pages. Briefing designers, waiting for revisions, paying $2-5K per page. Stitch eliminates the design bottleneck: → Find a high-converting advertorial that's scaling on Meta → Screenshot it and drop it into Stitch (powered by Gemini 3.1) → Stitch redesigns it with your brand's colors, fonts, and imagery using Nano Banana 2 → Edit sections visually — headlines, CTAs, layouts — without touching code → Export the code and paste it into Claude Code → Claude builds the full production site and deploys to Vercel or Netlify in 60 seconds No designer. No $3K per landing page. No Claude Code frontend that looks like a template from 2019. What you get: → Designer-quality landing pages and advertorials built in minutes, not weeks → Visual editing so you actually see the design before you code it → Nano Banana 2 generating on-brand product imagery and hero shots → A repeatable system — new angle, new page, same pipeline Built 100% with Google Stitch 2.0 + Claude Code. I put together a full playbook showing the exact workflow: how to find winning pages, redesign them in Stitch, and deploy with Claude Code. Want it for free? > Like this post > Comment "STITCH" And I'll send it over (must be following so I can DM)
0:14

Claude Code + Google Stitch 2.0 is f*cking cracked 🤯 Google just dropped a free AI design agent that solves Claude Code's biggest weakness: frontend design. One screenshot of a high-converting landing page → a production-ready site for your brand in minutes. All inside Google Stitch + Claude Code. Perfect for DTC brands and agencies who are building advertorial pages and product launch pages for Meta but burning days on designer back-and-forth. If you're running Meta ads and need 5-10 different landing pages testing different hooks, angles, and offers — each one targeting a different audience and pain point — you know the bottleneck isn't the ads. It's the pages. Briefing designers, waiting for revisions, paying $2-5K per page. Stitch eliminates the design bottleneck: → Find a high-converting advertorial that's scaling on Meta → Screenshot it and drop it into Stitch (powered by Gemini 3.1) → Stitch redesigns it with your brand's colors, fonts, and imagery using Nano Banana 2 → Edit sections visually — headlines, CTAs, layouts — without touching code → Export the code and paste it into Claude Code → Claude builds the full production site and deploys to Vercel or Netlify in 60 seconds No designer. No $3K per landing page. No Claude Code frontend that looks like a template from 2019. What you get: → Designer-quality landing pages and advertorials built in minutes, not weeks → Visual editing so you actually see the design before you code it → Nano Banana 2 generating on-brand product imagery and hero shots → A repeatable system — new angle, new page, same pipeline Built 100% with Google Stitch 2.0 + Claude Code. I put together a full playbook showing the exact workflow: how to find winning pages, redesign them in Stitch, and deploy with Claude Code. Want it for free? > Like this post > Comment "STITCH" And I'll send it over (must be following so I can DM)

Mike Futia

125,653 görüntüleme • 4 ay önce

Impeccable 3 natively supports crafting new design with diffusion (e.g. GPT Image 2) in harnesses that support it (e.g. Codex, Gemini w/ nano banana plugin). Impeccable now uses the best mode of operation for net-new vs iterative design: 1) completely new design: diffusion-first, then build w/ best practices for brand or product design (new in 3.0) 2) iterative design (additions/changes): design-system first, discovers your components, reads DESIGN/PRODUCT.md, goes to work. new live mode (new in 3.0) makes it extra convenient. Here's a tutorial documenting the whole workflow (incl. how I made the demo site in the video):
0:16

Impeccable 3 natively supports crafting new design with diffusion (e.g. GPT Image 2) in harnesses that support it (e.g. Codex, Gemini w/ nano banana plugin). Impeccable now uses the best mode of operation for net-new vs iterative design: 1) completely new design: diffusion-first, then build w/ best practices for brand or product design (new in 3.0) 2) iterative design (additions/changes): design-system first, discovers your components, reads DESIGN/PRODUCT.md, goes to work. new live mode (new in 3.0) makes it extra convenient. Here's a tutorial documenting the whole workflow (incl. how I made the demo site in the video):

Paul Bakaus

37,577 görüntüleme • 2 ay önce

🚨 BREAKING: Claude can now turn your Figma file into a live app. Vibe code from any Figma design...
0:16

🚨 BREAKING: Claude can now turn your Figma file into a live app. Vibe code from any Figma design...

Daniel Ch

157,538 görüntüleme • 3 ay önce

Go from design to Compose UI code with Gemini! ⬆️ Upload image of app UI screen ↪️ Use the prompt in the blog ↪️ Copy output into Android Studio
0:16

Go from design to Compose UI code with Gemini! ⬆️ Upload image of app UI screen ↪️ Use the prompt in the blog ↪️ Copy output into Android Studio

Android Developers

14,140 görüntüleme • 1 yıl önce

Your logo 🤝 Your app clip code I’ve started working on a new feature for App Clipped that lets you turn your logo or app icon into an App Clip Code-style design 🤩
0:16

Your logo 🤝 Your app clip code I’ve started working on a new feature for App Clipped that lets you turn your logo or app icon into an App Clip Code-style design 🤩

Matt Heaney

120,941 görüntüleme • 1 yıl önce

New: Dropbox Plugin for Claude Code Use Dropbox project files, technical specs, documentation, and supporting materials as context while developing features, generating code, or proposing implementation approaches.
0:17

New: Dropbox Plugin for Claude Code Use Dropbox project files, technical specs, documentation, and supporting materials as context while developing features, generating code, or proposing implementation approaches.

Dropbox

3,650,232 görüntüleme • 27 gün önce

Frontend developers - today’s #CleanShotTip is for you! Have you ever coded something that almost matched the design? 👀 With CleanShot, you can compare design with live website in seconds! 🔎 Just pin your screenshot, adjust opacity, and compare until it’s perfect! 👌
0:17

Frontend developers - today’s #CleanShotTip is for you! Have you ever coded something that almost matched the design? 👀 With CleanShot, you can compare design with live website in seconds! 🔎 Just pin your screenshot, adjust opacity, and compare until it’s perfect! 👌

CleanShot

15,399 görüntüleme • 8 ay önce

A big skill upgrade to text-to-lottie Better design taste, better motion, fewer random design decisions, fewer refinements Generate polished Lottie animations with Claude Code, Codex or Cursor Try it: $ npx skills add diffusionstudio/lottie
0:18

A big skill upgrade to text-to-lottie Better design taste, better motion, fewer random design decisions, fewer refinements Generate polished Lottie animations with Claude Code, Codex or Cursor Try it: $ npx skills add diffusionstudio/lottie

Doruk

129,724 görüntüleme • 26 gün önce

> use Claude Code for 3 months > "why is Claude getting dumber?" > context at 98% > claude is drowning in old conversations > type /clear > output quality doubles instantly > “damn there is claude commands?” > skill issue discovered
0:14

> use Claude Code for 3 months > "why is Claude getting dumber?" > context at 98% > claude is drowning in old conversations > type /clear > output quality doubles instantly > “damn there is claude commands?” > skill issue discovered

darkzodchi

1,381,336 görüntüleme • 3 ay önce

Looking for a new full time challenge as a frontend dev., UI Designer ✨ DM's are open for more information (sharing appreciated 🫶)
0:15

Looking for a new full time challenge as a frontend dev., UI Designer ✨ DM's are open for more information (sharing appreciated 🫶)

Aaron Iker ✨

60,498 görüntüleme • 7 ay önce

claude design is my all time favorite anthropic drop this year, even more than opus 4.7 its actually really really good at design and the "handoff to claude code" makes it basically copy/paste ui to the actual working product claude design made the entire ui for merl (full video on merl soon)
0:18

claude design is my all time favorite anthropic drop this year, even more than opus 4.7 its actually really really good at design and the "handoff to claude code" makes it basically copy/paste ui to the actual working product claude design made the entire ui for merl (full video on merl soon)

ashen

366,742 görüntüleme • 2 ay önce

📐Design Systems and DESIGN.md Consistency using Design Systems and DESIGN.md: ✨ Every new design automatically starts with a cohesive design system which GREATLY improves consistency (we heard you!) ✨ Edit the system, and all associated screens can be easily updated ✨ You can extract a design system from any URL ✨ Use DESIGN.md to export your design rules or import your design rules from other products (just ask your agent to create you a DESIGN.md file from your code or other context) ✨ You can start a new design by choosing from popular design systems ✨ Read more about DESIGN.md in the docs (link in thread)
0:15

📐Design Systems and DESIGN.md Consistency using Design Systems and DESIGN.md: ✨ Every new design automatically starts with a cohesive design system which GREATLY improves consistency (we heard you!) ✨ Edit the system, and all associated screens can be easily updated ✨ You can extract a design system from any URL ✨ Use DESIGN.md to export your design rules or import your design rules from other products (just ask your agent to create you a DESIGN.md file from your code or other context) ✨ You can start a new design by choosing from popular design systems ✨ Read more about DESIGN.md in the docs (link in thread)

Stitch by Google

219,087 görüntüleme • 4 ay önce

check out the updated skill-creator. i esp like built-in support for test generation (e.g., to measure + optimize tricky things like skill trigger rate). available in Claude Code as plugin, + Cowork.
0:13

check out the updated skill-creator. i esp like built-in support for test generation (e.g., to measure + optimize tricky things like skill trigger rate). available in Claude Code as plugin, + Cowork.

Lance Martin

353,121 görüntüleme • 4 ay önce