正在加载视频...

视频加载失败

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

Claude Code is terrible at UI design and everyone knows it so this guy fixed it by building an MCP that gives Claude its own AI design tool instead of going back and forth between a design platform and your code editor, Claude now creates the designs itself and... show more

Om Patel

25,853 subscribers

398,097 次观看 • 3 个月前 •via X (Twitter)

游戏教育科学技术

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.

Claude

2,595,493 次观看 • 9 个月前

🎨 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

174,132 次观看 • 21 天前

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.

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

113,417 次观看 • 1 个月前

$THIS MIGHT BE THE #1 OPEN-SOURCE REPO FOR CLAUDE CODE RIGHT NOW. IT GIVES CLAUDE A MEMORY AND SLASHES YOUR TOKEN COST ON EVERY QUESTION The repo is safishamsi/graphify, a free open-source skill that turns any codebase into a knowledge graph Claude Code can read instantly. Instead of grepping through your files every session, Claude gets a map of how everything connects The problem it fixes: Every time you ask Claude Code about a big repo, it does the same thing, greps through dozens of files like a brute-force Ctrl+F, blows through your context window, and sometimes still misses the answer hiding in a file nobody searched. Claude Code has no memory of how your project is structured. Every session starts from zero What it does: It maps your entire codebase into a knowledge graph, capturing not just which files exist, but which functions depend on which, which modules are central, and which files cluster around the same concern. Claude queries the map instead of scanning files How it works, three passes: 1. Code structure, free and local. Tree-sitter parses your files and pulls out classes, functions, imports and call graphs. No LLM, no tokens, just your actual code mapped deterministically 2. Audio and video, if you have them. Transcribed locally and folded into the graph 3. Docs, papers, images. Here an LLM does semantic analysis, figuring out what each document means and where it fits. Only the meaning gets sent up, never your raw source It saves you money: Normally a question about a big repo makes Claude spawn explore agents that scan file after file, eating your context window and your token budget before you get an answer. With the graph already built, Claude queries the map instead of re-reading the codebase every time. Same answer, a fraction of the tokens. The graph only gets built once, then a hook rebuilds it after each commit for free, so you never pay that scanning cost again. The bigger the repo, the bigger the gap The best parts: it's a skill, so once installed Claude knows when to use it without you memorizing commands. It works on non-code folders too, point it at docs or notes and it can spin up an Obsidian vault How to add it to your Claude: 1. Install Claude Code if you haven't: npm install -g Paul Jankura-ai/claude-code 2. Add the skill: claude skill add safishamsi/graphify 3. Open your project folder and run /graphify . to build the graph 4. Optional, make it automatic: graphify hook install so the graph rebuilds after every commit That's it. Ask Claude about your repo and it reads the map instead of burning tokens on a file hunt Bookmark this$

THIS MIGHT BE THE #1 OPEN-SOURCE REPO FOR CLAUDE CODE RIGHT NOW. IT GIVES CLAUDE A MEMORY AND SLASHES YOUR TOKEN COST ON EVERY QUESTION The repo is safishamsi/graphify, a free open-source skill that turns any codebase into a knowledge graph Claude Code can read instantly. Instead of grepping through your files every session, Claude gets a map of how everything connects The problem it fixes: Every time you ask Claude Code about a big repo, it does the same thing, greps through dozens of files like a brute-force Ctrl+F, blows through your context window, and sometimes still misses the answer hiding in a file nobody searched. Claude Code has no memory of how your project is structured. Every session starts from zero What it does: It maps your entire codebase into a knowledge graph, capturing not just which files exist, but which functions depend on which, which modules are central, and which files cluster around the same concern. Claude queries the map instead of scanning files How it works, three passes: 1. Code structure, free and local. Tree-sitter parses your files and pulls out classes, functions, imports and call graphs. No LLM, no tokens, just your actual code mapped deterministically 2. Audio and video, if you have them. Transcribed locally and folded into the graph 3. Docs, papers, images. Here an LLM does semantic analysis, figuring out what each document means and where it fits. Only the meaning gets sent up, never your raw source It saves you money: Normally a question about a big repo makes Claude spawn explore agents that scan file after file, eating your context window and your token budget before you get an answer. With the graph already built, Claude queries the map instead of re-reading the codebase every time. Same answer, a fraction of the tokens. The graph only gets built once, then a hook rebuilds it after each commit for free, so you never pay that scanning cost again. The bigger the repo, the bigger the gap The best parts: it's a skill, so once installed Claude knows when to use it without you memorizing commands. It works on non-code folders too, point it at docs or notes and it can spin up an Obsidian vault How to add it to your Claude: 1. Install Claude Code if you haven't: npm install -g Paul Jankura-ai/claude-code 2. Add the skill: claude skill add safishamsi/graphify 3. Open your project folder and run /graphify . to build the graph 4. Optional, make it automatic: graphify hook install so the graph rebuilds after every commit That's it. Ask Claude about your repo and it reads the map instead of burning tokens on a file hunt Bookmark this

Yarchi

55,345 次观看 • 1 个月前

Claude released a new design feature that's great for iOS app design. So I extracted the code and skills and turned it into a skill that can be used by any agent. Since Codex has comments and web preview built in... it works basically the same. (Oh and you can use claude 4.7 if you think it's better at design)

Claude released a new design feature that's great for iOS app design. So I extracted the code and skills and turned it into a skill that can be used by any agent. Since Codex has comments and web preview built in... it works basically the same. (Oh and you can use claude 4.7 if you think it's better at design)

Riley Brown

86,707 次观看 • 2 个月前

Jenny Wen, head of design for Claude at Anthropic: "the design process is dead." what replaces it runs on machine-readable design systems In a 1-hour conversation, Jenny Wen breaks down why the discovery -> mock -> iterate loop is dying and what designers do instead. design system -> Claude Code -> every screen fixed at once, not one at a time i rebuilt the same 10-screen dashboard twice: ~6 hours of restyling by hand vs ~40 minutes when the fix lived in the system. how to build that system and hand it to Claude Code is in the article below.

Jenny Wen, head of design for Claude at Anthropic: "the design process is dead." what replaces it runs on machine-readable design systems In a 1-hour conversation, Jenny Wen breaks down why the discovery -> mock -> iterate loop is dying and what designers do instead. design system -> Claude Code -> every screen fixed at once, not one at a time i rebuilt the same 10-screen dashboard twice: ~6 hours of restyling by hand vs ~40 minutes when the fix lived in the system. how to build that system and hand it to Claude Code is in the article below.

Mnimiy

180,024 次观看 • 1 个月前

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams

Peter Yang

77,115 次观看 • 3 个月前

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

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

60,479 次观看 • 1 个月前

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

CLAUDE CODE CAN NOW COPY ANY UI ON THE INTERNET. It scans real websites and rebuilds their design system instantly, turning any page into your own starting point.

CLAUDE CODE CAN NOW COPY ANY UI ON THE INTERNET. It scans real websites and rebuilds their design system instantly, turning any page into your own starting point.

0xMarioNawfal

1,025,233 次观看 • 3 个月前

Claude Code just shipped v2.1.69 with a new built-in skill: /claude-api It detects your language, picks the right surface (direct API, tool use, or Agent SDK), and loads the relevant reference docs directly into context. Covers streaming, batches, files API, structured outputs, tool use patterns, MCP, also sets model defaults so you're not guessing. Useful when you're building on top of Claude and don't want to context-switch to the docs every 5 minutes.

Claude Code just shipped v2.1.69 with a new built-in skill: /claude-api It detects your language, picks the right surface (direct API, tool use, or Agent SDK), and loads the relevant reference docs directly into context. Covers streaming, batches, files API, structured outputs, tool use patterns, MCP, also sets model defaults so you're not guessing. Useful when you're building on top of Claude and don't want to context-switch to the docs every 5 minutes.

Daniel San

152,831 次观看 • 4 个月前

Spent the day testing Claude Opus 4.7. Last month I built a design director agent for OpenClaw and now it cooks. 15 minutes in, Paper Design MCP + Claude Code had made me a rough draft. In under an hour, a Framer worthy site. My workflow: 1. Feed my agent references so it can extract design systems and lock in on my taste 2. Claude Code calls Paper Design MCP to generate the visual system (just keep the Paper app open) 3. Paper exports the assets and Claude Code then preps the build docs 4. Agent loops back, critiques, iterates Got no clue why anyone is paying $10K for a website anymore. It’s easy now.

Spent the day testing Claude Opus 4.7. Last month I built a design director agent for OpenClaw and now it cooks. 15 minutes in, Paper Design MCP + Claude Code had made me a rough draft. In under an hour, a Framer worthy site. My workflow: 1. Feed my agent references so it can extract design systems and lock in on my taste 2. Claude Code calls Paper Design MCP to generate the visual system (just keep the Paper app open) 3. Paper exports the assets and Claude Code then preps the build docs 4. Agent loops back, critiques, iterates Got no clue why anyone is paying $10K for a website anymore. It’s easy now.

klöss

14,522 次观看 • 2 个月前

Claude Code is CRACKED at design now and I don't think people understand how BIG this is. There is now one tool that takes you from a rough idea to fully designed, agency-tier, App Store-ready screens in minutes. One design system, every screen, real native code. Most builders hand design to Claude Code, get AI-default screens, and wonder why their app looks like every other vibe coded project. This is the 3-step workflow that fixes it: (full breakdown in the article)

Claude Code is CRACKED at design now and I don't think people understand how BIG this is. There is now one tool that takes you from a rough idea to fully designed, agency-tier, App Store-ready screens in minutes. One design system, every screen, real native code. Most builders hand design to Claude Code, get AI-default screens, and wonder why their app looks like every other vibe coded project. This is the 3-step workflow that fixes it: (full breakdown in the article)

Prajwal Tomar

104,823 次观看 • 7 天前

Been using Paper MCP with Claude Code today and I’m kind of blown away! I tested importing Figma designs, then iterating on them using live Supabase data (via MCP). It genuinely feels like a glimpse of where design is heading. would love Paper to add something like agentation from Benji Taylor, so Claude Code can target frames and layers directly.

Been using Paper MCP with Claude Code today and I’m kind of blown away! I tested importing Figma designs, then iterating on them using live Supabase data (via MCP). It genuinely feels like a glimpse of where design is heading. would love Paper to add something like agentation from Benji Taylor, so Claude Code can target frames and layers directly.

Gon

72,677 次观看 • 4 个月前

Claude Code feels completely different once you install this. Anthropic quietly released an official plugin called claude-code-setup and it basically turns Claude Code from “pretty good” into an actual AI dev environment. It scans your project and recommends: → hooks → skills → MCP servers → subagents → automations Then sets everything up step-by-step for you. Most people are using Claude Code completely vanilla… which is why their experience feels messy. The real power comes from the ecosystem around it. Install: /plugin install claude-code-setup@claude-plugins-official Bookmark this before you forget it.

Claude Code feels completely different once you install this. Anthropic quietly released an official plugin called claude-code-setup and it basically turns Claude Code from “pretty good” into an actual AI dev environment. It scans your project and recommends: → hooks → skills → MCP servers → subagents → automations Then sets everything up step-by-step for you. Most people are using Claude Code completely vanilla… which is why their experience feels messy. The real power comes from the ecosystem around it. Install: /plugin install claude-code-setup@claude-plugins-official Bookmark this before you forget it.

Radha Tripathi

75,245 次观看 • 1 个月前

Introducing Deep Graph MCP for Claude Code 🤩 Claude Code by Anthropic is excellent and arguably one of the best tools for working with code today but... It has one major limitation, its native code search capabilities don't scale well to large repositories. By adding Deep Graph MCP, Claude's ability to explore large codebases improves dramatically. In this thread 🧵 I’ll show you how easy it is to connect this MCP to Claude Code.

Introducing Deep Graph MCP for Claude Code 🤩 Claude Code by Anthropic is excellent and arguably one of the best tools for working with code today but... It has one major limitation, its native code search capabilities don't scale well to large repositories. By adding Deep Graph MCP, Claude's ability to explore large codebases improves dramatically. In this thread 🧵 I’ll show you how easy it is to connect this MCP to Claude Code.

Daniel San

31,352 次观看 • 1 年前

here's how I generate beautiful emails using Paper and claude code for humblytics 1) I scraped all of our existing emails and outlined in our obsidian notes 2) ran my marketing-strategist skill to analzye existing open/close rates, pull context from our app and rewrite the entire email 3) connect to the paper mcp, open up claude code, and reference the new emails it just rewrote 4) design the entire email in paper, refine it, then when you're done ask claude code to export is as a .mjml file 5) load the .mjml file and you're done you now have emails that are on brand and designed to your specs

amirmxt

11,222 次观看 • 2 个月前

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

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

52,206 次观看 • 1 个月前

Peter Steinberger Quietly Started A Shift That Makes Claude 35x Cheaper To Run The way Claude Code talks to tools matters more than people think. Most use MCP, and it quietly eats tokens, it loads everything into context every time, even tools you never call. One benchmark: MCP burned 35x more tokens than a CLI on the same task. Peter Steinberger, the OpenClaw guy, got annoyed by this and started building lean CLIs himself. That kicked off a tool called Printing Press. You point Claude Code at any website, even ones with no API like ESPN or Craigslist, and it builds a small command tool for it in about 10 minutes. In one demo, a request pulled 132,000 tokens of raw data, but the tool processed it locally and only handed Claude a 2,000-token summary. The rest never touched the context window. It also comes with ~50 ready-made tools you can grab right away. To start, point Claude Code at the links from and ask it to set it up. Bookmark this.

Peter Steinberger Quietly Started A Shift That Makes Claude 35x Cheaper To Run The way Claude Code talks to tools matters more than people think. Most use MCP, and it quietly eats tokens, it loads everything into context every time, even tools you never call. One benchmark: MCP burned 35x more tokens than a CLI on the same task. Peter Steinberger, the OpenClaw guy, got annoyed by this and started building lean CLIs himself. That kicked off a tool called Printing Press. You point Claude Code at any website, even ones with no API like ESPN or Craigslist, and it builds a small command tool for it in about 10 minutes. In one demo, a request pulled 132,000 tokens of raw data, but the tool processed it locally and only handed Claude a 2,000-token summary. The rest never touched the context window. It also comes with ~50 ready-made tools you can grab right away. To start, point Claude Code at the links from and ask it to set it up. Bookmark this.

Ridark

32,351 次观看 • 18 天前

Think of it as the Shopify of Claude Code, but for agents, commands, and MCPs 🚀 Pick what you need, “add to cart,” and… it’s 100% FREE. Just copy the command, paste it in your terminal, and instantly get the perfect Claude Code stack for your project. Built as an open-source project so the community can spin up, share, and install Claude Code stacks in seconds, no setup headaches, no paywalls. Here’s the video showing how I built this post… and yes, if you share the command, anyone can clone the exact same stack you’re using. Enjoy, share, and help others build faster with Claude Code ✨

Think of it as the Shopify of Claude Code, but for agents, commands, and MCPs 🚀 Pick what you need, “add to cart,” and… it’s 100% FREE. Just copy the command, paste it in your terminal, and instantly get the perfect Claude Code stack for your project. Built as an open-source project so the community can spin up, share, and install Claude Code stacks in seconds, no setup headaches, no paywalls. Here’s the video showing how I built this post… and yes, if you share the command, anyone can clone the exact same stack you’re using. Enjoy, share, and help others build faster with Claude Code ✨

Daniel San

124,913 次观看 • 11 个月前