正在加载视频...

视频加载失败

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

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) →... show more

CJ @ Jackie Brown

3,525 subscribers

27,054 次观看 • 2 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

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

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

Daniel Ch

157,264 次观看 • 2 个月前

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."

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."

Thariq

488,293 次观看 • 7 个月前

Day 140 of vibe-coding as a designer. I'm shocked how few designers know about this workflow. I skipped Figma and made a beautiful Robinhood design from Claude Code + Paper, in just one prompt. Wild! 🤯 This feels like the future of design.

Day 140 of vibe-coding as a designer. I'm shocked how few designers know about this workflow. I skipped Figma and made a beautiful Robinhood design from Claude Code + Paper, in just one prompt. Wild! 🤯 This feels like the future of design.

Felix Lee

43,314 次观看 • 2 个月前

I made this entire video using Claude Design. And the output is insane. 🤯

I made this entire video using Claude Design. And the output is insane. 🤯

Vaibhav Sisinty

13,558 次观看 • 2 个月前

Built and published the fictional design agency archive from day 12 using Claude Code + Figma MCP. Claude got the project surprisingly close very quickly, but the final polish still came down to human direction, especially around motion, depth, blur, and interaction feel. Live link in thread.

Built and published the fictional design agency archive from day 12 using Claude Code + Figma MCP. Claude got the project surprisingly close very quickly, but the final polish still came down to human direction, especially around motion, depth, blur, and interaction feel. Live link in thread.

Emisho

22,711 次观看 • 1 个月前

Claude Code on desktop lets you select DOM elements directly, much easier than describing which component you want updated! Claude gets the tag, classes, key styles, surrounding HTML, and a cropped screenshot. React apps also get the source file, component name and props

Claude Code on desktop lets you select DOM elements directly, much easier than describing which component you want updated! Claude gets the tag, classes, key styles, surrounding HTML, and a cropped screenshot. React apps also get the source file, component name and props

Lydia Hallie ✨

605,510 次观看 • 3 个月前

Publish Workflow – built with Claude Code

Publish Workflow – built with Claude Code

Kevin

30,308 次观看 • 2 个月前

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)

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

54,503 次观看 • 1 个月前

Built this with the new shadcn CLI MCP + Namespaced registry and Claude Code in around 5 minutes

Built this with the new shadcn CLI MCP + Namespaced registry and Claude Code in around 5 minutes

Manu Arora

30,417 次观看 • 9 个月前

watching Figma, a $10B UX design monopoly, melt down with a single Claude tweet.

watching Figma, a $10B UX design monopoly, melt down with a single Claude tweet.

ℏεsam

2,885,178 次观看 • 2 个月前

Introducing Generative UI for MCP Apps One server. Infinite interfaces. Instead of building views, define a component catalog. The AI assembles the right UI based on your API, CLI or MCP server tools. Works in Claude, ChatGPT, VS Code, Cursor and more

Introducing Generative UI for MCP Apps One server. Infinite interfaces. Instead of building views, define a component catalog. The AI assembles the right UI based on your API, CLI or MCP server tools. Works in Claude, ChatGPT, VS Code, Cursor and more

Chris Tate

164,515 次观看 • 3 个月前

This would have taken me forever without Claude AI I constantly get impressed by how far I can take concepts I had in my head to a functional component in a couple of hours. Normally, I'd spend just that amount of time designing in Figma. Now, I completely skip Figma and go straight to code. Designing in code is back and I love every minute of it.

This would have taken me forever without Claude AI I constantly get impressed by how far I can take concepts I had in my head to a functional component in a couple of hours. Normally, I'd spend just that amount of time designing in Figma. Now, I completely skip Figma and go straight to code. Designing in code is back and I love every minute of it.

Meng To

90,837 次观看 • 1 年前

a great way to get started is to use our skill, built into Claude Code. get the latest Claude Code release: $ claude update then start Claude Code and run our subcommand: $ claude /claude-api managed-agents-onboarding

a great way to get started is to use our skill, built into Claude Code. get the latest Claude Code release: $ claude update then start Claude Code and run our subcommand: $ claude /claude-api managed-agents-onboarding

Lance Martin

14,835 次观看 • 2 个月前

Continuing the silliness in Claude Code. Keeping with the Wireframe Design Studio theme and added these cyan grid/content indicators that snap to the content.

Continuing the silliness in Claude Code. Keeping with the Wireframe Design Studio theme and added these cyan grid/content indicators that snap to the content.

James McDonald

17,023 次观看 • 4 个月前

Shipping my personal site today.. built with a combination of Claude Code, Codex, and Figma MCP! I'm rolling it out with small bits around how we shipped UI3. More to come in the following weeks!

Shipping my personal site today.. built with a combination of Claude Code, Codex, and Figma MCP! I'm rolling it out with small bits around how we shipped UI3. More to come in the following weeks!

Wayne S.

11,770 次观看 • 3 个月前

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.

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

a project i've been excited about: make Claude Code better at using the Claude API. just ask Claude Code about Claude API features (e.g., prompt caching, adaptive thinking + effort, tools, etc).

a project i've been excited about: make Claude Code better at using the Claude API. just ask Claude Code about Claude API features (e.g., prompt caching, adaptive thinking + effort, tools, etc).

Lance Martin

31,964 次观看 • 3 个月前

Say hi to the Kibo UI QR Code shadcn component! 🔠 Pass in any string 💪 Adjustable level of robustness 🎨 Customizable styling 🧠 Works with the new OKLCH CSS variables 💻 React Server Component available ↔️ Infinitely scalable SVG Link 👇🧵

Say hi to the Kibo UI QR Code shadcn component! 🔠 Pass in any string 💪 Adjustable level of robustness 🎨 Customizable styling 🧠 Works with the new OKLCH CSS variables 💻 React Server Component available ↔️ Infinitely scalable SVG Link 👇🧵

Hayden Bleasel

21,110 次观看 • 1 年前

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

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 次观看 • 1 年前

Announcing Built with Opus 4.6: a Claude Code virtual hackathon. Join the Claude Code team for a week of building. Winners will be hand-selected to win $100K in Claude API credits. Apply here:

Announcing Built with Opus 4.6: a Claude Code virtual hackathon. Join the Claude Code team for a week of building. Winners will be hand-selected to win $100K in Claude API credits. Apply here:

Claude

1,035,859 次观看 • 4 个月前