Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

CJfromJBW's profile picture

CJ @ Jackie Brown

3,525 subscribers

27,054 görüntüleme • 2 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

🚨 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,264 görüntüleme • 2 ay önce

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."
0:12

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

485,831 görüntüleme • 6 ay önce

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.
0:13

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,135 görüntüleme • 2 ay önce

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

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

Vaibhav Sisinty

13,558 görüntüleme • 1 ay önce

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.
0:10

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 görüntüleme • 25 gün önce

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
0:16

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,147 görüntüleme • 2 ay önce

Publish Workflow – built with Claude Code
0:17

Publish Workflow – built with Claude Code

Kevin

27,739 görüntüleme • 2 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

53,727 görüntüleme • 24 gün önce

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

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

Manu Arora

30,417 görüntüleme • 9 ay önce

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

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

ℏεsam

2,884,743 görüntüleme • 1 ay önce

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
0:14

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

162,418 görüntüleme • 3 ay önce

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.
0:15

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 görüntüleme • 1 yıl önce

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
0:11

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,764 görüntüleme • 2 ay önce

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.
0:12

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 görüntüleme • 4 ay önce

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!
0:10

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,113 görüntüleme • 2 ay önce

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,178 görüntüleme • 4 ay önce

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:
0:12

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,299 görüntüleme • 4 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

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).
0:11

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,959 görüntüleme • 2 ay önce

one of my favorite ways to use claude code skills right now - combining remotion with claude-in-chrome for motion video creation. the workflow is addictive. the clip you see here was produced with minimal prompting effort let me know if you would like me to write a full break down of this process. you describe to claude code what you want, claude code writes the remotion components, opens the remotion studio (via browser) with claude-in-chrome, sees the actual rendered output, and iterates on it in real time. need the arrows pointing to the center of the bubbles instead of the edge? just say it. need the layout shifted to the center? say it. claude sees the preview, adjusts the code, re-renders. then when you're happy you tell claude code to render the final video. but skills are what make this possible. remotion knowledge + browser automation + the taste to iterate visually. no copy pasting screenshots back and forth. no "can you try moving it 10px to the right" over chat. it just looks and fixes. this is the kind of workflow that makes you realize how much further claude code can go beyond just writing code in a terminal. i didn't touch any code while working on the clip you see if you haven't tried combining skills together like this - start experimenting. the skills combos is where the magic is at.
0:16

one of my favorite ways to use claude code skills right now - combining remotion with claude-in-chrome for motion video creation. the workflow is addictive. the clip you see here was produced with minimal prompting effort let me know if you would like me to write a full break down of this process. you describe to claude code what you want, claude code writes the remotion components, opens the remotion studio (via browser) with claude-in-chrome, sees the actual rendered output, and iterates on it in real time. need the arrows pointing to the center of the bubbles instead of the edge? just say it. need the layout shifted to the center? say it. claude sees the preview, adjusts the code, re-renders. then when you're happy you tell claude code to render the final video. but skills are what make this possible. remotion knowledge + browser automation + the taste to iterate visually. no copy pasting screenshots back and forth. no "can you try moving it 10px to the right" over chat. it just looks and fixes. this is the kind of workflow that makes you realize how much further claude code can go beyond just writing code in a terminal. i didn't touch any code while working on the clip you see if you haven't tried combining skills together like this - start experimenting. the skills combos is where the magic is at.

elvis

46,392 görüntüleme • 3 ay önce