正在加载视频...

视频加载失败

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

My favorite way of interacting with Claude Code is to have it generate static HTML files as outputs (reports, explorations, code structure, mockups etc.) I wanted to iterate on the file by commenting in browser and having Claude update the output live. So, I built this Claude Skill👇 How... it works: - Install Claude Code skill (ask it to clone repo) - Build an HTML page for anything (e.g. research coding agents and generate HTML report) - Ask it to make the page interactive That's it. CC will launch a localhost server and allow you to then leave comments on the page itself and once it updates, will give you a tour of changes. It's like Google Docs kind of comments/iteration but for HTML pages.show more

Paras Chopra

237,335 subscribers

215,307 次观看 • 2 个月前 •via X (Twitter)

教育科学技术

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

I built a Claude Code skill that allows it to generate a deep research report over any collection of complex docs (PDFs, Word, Pptx)….and generate word-level citations and bounding boxes directly back to the source! 📝 Check out “/research-docs”. 1. It parses out text and bounding boxes from every doc with liteparse, in seconds. 2. It then generates a full HTML report of the outputs that let you see word-level citations in each page. Raw Claude obviously has deep research capabilities, but it lacks an audit trail back to the source. This skill gives you a researched report that can be audited by others. Check it out: LiteParse:

I built a Claude Code skill that allows it to generate a deep research report over any collection of complex docs (PDFs, Word, Pptx)….and generate word-level citations and bounding boxes directly back to the source! 📝 Check out “/research-docs”. 1. It parses out text and bounding boxes from every doc with liteparse, in seconds. 2. It then generates a full HTML report of the outputs that let you see word-level citations in each page. Raw Claude obviously has deep research capabilities, but it lacks an audit trail back to the source. This skill gives you a researched report that can be audited by others. Check it out: LiteParse:

Jerry Liu

77,259 次观看 • 3 个月前

My favorite Claude design hack right now: Create a prototype.md skill. Instead of one-shotting UI, I have Claude generate 5 variations for every feature in a single HTML file, side-by-side. I pick the winner. Claude builds it.

My favorite Claude design hack right now: Create a prototype.md skill. Instead of one-shotting UI, I have Claude generate 5 variations for every feature in a single HTML file, side-by-side. I pick the winner. Claude builds it.

Brett

175,853 次观看 • 1 个月前

your favourite AI tools can’t generate PDFs. fixes that 👇 • ask claude/gemini/chatgpt to give you well designed html • go to and paste this html • set the pdf page size and orientation • click convert to pdf your pdf file is ready! all processing is done client-side, your data never leaves your browser. check it out now:

your favourite AI tools can’t generate PDFs. fixes that 👇 • ask claude/gemini/chatgpt to give you well designed html • go to and paste this html • set the pdf page size and orientation • click convert to pdf your pdf file is ready! all processing is done client-side, your data never leaves your browser. check it out now:

kanav

23,208 次观看 • 6 个月前

$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 Fable 5 built a 3D product website with Claude Code Generate an image of a product with the Magnific MCP, and convert it into a 3D model. Download that model and give it to Fable 5 to develop an interactive page with. Here's the final result + prompts:

Claude Fable 5 built a 3D product website with Claude Code Generate an image of a product with the Magnific MCP, and convert it into a 3D model. Download that model and give it to Fable 5 to develop an interactive page with. Here's the final result + prompts:

Jerrod Lew

33,687 次观看 • 1 个月前

You can just tell Claude Code to learn skills and it will. I asked Claude to create an app that uses tldraw and it one shotted it with sqlite db, and then I asked Claude Code to create a skill so that it could read and write on the canvas. 10 minutes later it could do it. Weirrrrdddd times.

You can just tell Claude Code to learn skills and it will. I asked Claude to create an app that uses tldraw and it one shotted it with sqlite db, and then I asked Claude Code to create a skill so that it could read and write on the canvas. 10 minutes later it could do it. Weirrrrdddd times.

Riley Brown

73,418 次观看 • 7 个月前

Markdown was doomed from the start. It's just a format with low information density. HTML is better for humans, and agents can now consume and produce it without issues. But nobody wants to type HTML, so here is an alternative: This is an open-source tool for generating dashboards from data without writing a single HTML tag. You define your dashboard in YAML or TSK, and the tool will serve the HTML file for you. It comes with skills for Claude Code and Codex, so they know how to build these dashboards. And you can connect this to Postgres, MySQL, Snowflake, BigQuery, Redshift, Databricks, and many other databases. Repo link below.

Markdown was doomed from the start. It's just a format with low information density. HTML is better for humans, and agents can now consume and produce it without issues. But nobody wants to type HTML, so here is an alternative: This is an open-source tool for generating dashboards from data without writing a single HTML tag. You define your dashboard in YAML or TSK, and the tool will serve the HTML file for you. It comes with skills for Claude Code and Codex, so they know how to build these dashboards. And you can connect this to Postgres, MySQL, Snowflake, BigQuery, Redshift, Databricks, and many other databases. Repo link below.

Santiago

86,565 次观看 • 2 个月前

I built a Claude skill that helps you review a report as an analyst. Now, it thinks like a senior analyst for you. The readme file will explain how to use it as a skill on Claude or Copilot or Chatgpt Use & let me how it works. My gift to U

I built a Claude skill that helps you review a report as an analyst. Now, it thinks like a senior analyst for you. The readme file will explain how to use it as a skill on Claude or Copilot or Chatgpt Use & let me how it works. My gift to U

David Abu _

38,839 次观看 • 4 个月前

I'm SO impressed by Claude Skills. They are the best way to package custom instructions (and code) for the agent to access. (I prefer this to Claude Code's subagents because of the way it handles context) I used the skill-creator skill (comes default inside Claude) to create a skill for designing a presentation like Steve Jobs or Seth Godin, then used that skill to create a PPT about Claude Code. Below is a walkthrough of the results. The output when using the above mentioned skill vs when i don't is so clear. I'm bullish on what this implies for both Claude web and Claude Code. Extremely powerful. Anthropic cooked! 🔥

I'm SO impressed by Claude Skills. They are the best way to package custom instructions (and code) for the agent to access. (I prefer this to Claude Code's subagents because of the way it handles context) I used the skill-creator skill (comes default inside Claude) to create a skill for designing a presentation like Steve Jobs or Seth Godin, then used that skill to create a PPT about Claude Code. Below is a walkthrough of the results. The output when using the above mentioned skill vs when i don't is so clear. I'm bullish on what this implies for both Claude web and Claude Code. Extremely powerful. Anthropic cooked! 🔥

Nityesh

62,918 次观看 • 9 个月前

ASCII diagrams in Claude Code were driving me crazy. So I built a tool where Claude writes JSON → renders as interactive flowcharts and mockups → I edit visually → Claude sees my changes. Shoutout to Every 📧 for having me on the Vibe Code Camp livestream to demo this today We want to make this available! If you want access, comment "flowy" on this post. Here's 2 min on how it works:

ASCII diagrams in Claude Code were driving me crazy. So I built a tool where Claude writes JSON → renders as interactive flowcharts and mockups → I edit visually → Claude sees my changes. Shoutout to Every 📧 for having me on the Vibe Code Camp livestream to demo this today We want to make this available! If you want access, comment "flowy" on this post. Here's 2 min on how it works:

CJ Hess

200,000 次观看 • 6 个月前

This is how i build everything now. Before the agents touch a line of code "before you do any building make 10 mock ups in html of how we can make it look" I then pick a path and ask for more mockups until I feel happy with the feel. The only way to work with these things.

This is how i build everything now. Before the agents touch a line of code "before you do any building make 10 mock ups in html of how we can make it look" I then pick a path and ask for more mockups until I feel happy with the feel. The only way to work with these things.

0xSero

25,695 次观看 • 4 个月前

Wow... This Claude Code Design Hack is wild. When building landing pages, don't ask for a single landing page. Ask for a directory of landing page options... and in your 1st prompt tell it to learn from your preferences as you generate more. Use this prompt below 👇

Wow... This Claude Code Design Hack is wild. When building landing pages, don't ask for a single landing page. Ask for a directory of landing page options... and in your 1st prompt tell it to learn from your preferences as you generate more. Use this prompt below 👇

The Agenteer

186,247 次观看 • 7 个月前

Claude Code + computer use is f*cking cracked 🤯 Build a landing page → Claude opens Chrome, looks at it, spots every issue, and fixes it — without you describing a single thing. All inside Claude Code. Perfect for DTC brands and agencies who are still vibe-coding landing pages and advertorials in Claude Code, then manually opening them in Chrome, spotting 15 things wrong, and describing every visual issue back to Claude one at a time. If you're building pages in Claude Code and your workflow looks like this — build the page, open it in Chrome, spot broken spacing, go back to Claude, type "the CTA button is too low and the hero image is cut off," wait for the fix, open Chrome again, find 3 new issues, describe those too ... Claude Code + computer use eliminates the entire loop: → Claude writes the full landing page or advertorial → Opens Chrome and navigates to it → Spots layout issues, broken spacing, off-brand colors, missing elements → Fixes everything and re-checks until the page looks right → Tests your Shopify product pages by clicking through like a real customer → Walks through your checkout flow and flags friction before customers hit it → You only see the finished, visually verified result No describing what you see on screen. No "the CTA button needs more contrast" back-and-forth. No being the eyeballs for an AI that can't see. What you get: → Landing pages and advertorials Claude builds AND visually QAs before you ever look at them → Product pages Claude clicks through — testing layout, images, and CTAs like a real user → HTML dashboards Claude opens and verifies the charts actually render → Checkout flows Claude walks through step by step to catch friction → All of it happening in one session — build, test, fix, done One prompt. Claude builds it, checks it, and fixes it. You just review the finished page. I put together a full playbook with the exact setup, the prompts, and 5 DTC workflows that use Claude Code + computer use. Want it for free? > Like this post > Comment "CLAUDE" And I'll send it over (must be following so I can DM)

Mike Futia

19,125 次观看 • 4 个月前

There's a built-in agent inside Claude Code you can invoke just by telling Claude to use the claude-code-guide agent Save this... you'll need it It's not a local file in your project. It's a built-in subagent defined in Claude Code's system itself. It answers questions about Claude Code CLI, the Agent SDK, and the Claude API. It uses Glob, Grep, Read, WebFetch, and WebSearch, but can't edit or write files. Its only job is to answer questions.

There's a built-in agent inside Claude Code you can invoke just by telling Claude to use the claude-code-guide agent Save this... you'll need it It's not a local file in your project. It's a built-in subagent defined in Claude Code's system itself. It answers questions about Claude Code CLI, the Agent SDK, and the Claude API. It uses Glob, Grep, Read, WebFetch, and WebSearch, but can't edit or write files. Its only job is to answer questions.

Daniel San

57,240 次观看 • 5 个月前

Artifacts in Claude Code are now also available on Pro and Max plans. Ask for an artifact, Claude writes the code, publishes it live to claude.a‍i, and updates it in real time while it keeps working. Pages are private to your account and fully self-contained.

Artifacts in Claude Code are now also available on Pro and Max plans. Ask for an artifact, Claude writes the code, publishes it live to claude.a‍i, and updates it in real time while it keeps working. Pages are private to your account and fully self-contained.

ClaudeDevs

2,023,479 次观看 • 1 个月前

Introducing /visual-plan - a skill to generate rich, visual plans for Claude Code and Codex. Plan mode in Claude Code is incredible. But I always find my eyes glazing over when it gives me this huge markdown essay in my terminal. I found I can make much better visual plans with reusable components. So I made a skill called `/visual-plan`. It generates plans as MDX with visual, interactive components. Diagrams, interactive API specs, schema design changes, annotated code, and even pan and zoomable wireframes. So for any UI work, you can look at a wireframe first, comment on it, iterate, and then have the agent work. I’ve found this to be a much more intuitive interface for reasoning about what the agent is doing. It’s somewhat inspired by that popular post about how HTML is better than Markdown. But HTML can be slow and verbose to write. And it doesn’t look good checked into a repo. This has really made me feel like humans and engineering are entering a new abstraction phase, where we reason about things at the plan level. As long as the plan is good, agents are getting more and more reliable at executing on it. Almost to the degree that we trust the C compiler to compile to assembly reliably. Plans are the new intermediate representation. I also made a skill for the reverse of this, called `/visual-recap`. After the agent works, it gives you a recap of everything it did. Same idea: wireframes, interactive API specs and diffs, schemas, annotated code, etc. So now when you’re reviewing what the agent did for you, or looking at a pull request of somebody else’s code, you can see a visual recap instead of just reading a wall of text. It’s all free and open source. You can find it on my GitHub. Will link to it in the reply because we all know how dumb these algorithms are with links.

Introducing /visual-plan - a skill to generate rich, visual plans for Claude Code and Codex. Plan mode in Claude Code is incredible. But I always find my eyes glazing over when it gives me this huge markdown essay in my terminal. I found I can make much better visual plans with reusable components. So I made a skill called `/visual-plan`. It generates plans as MDX with visual, interactive components. Diagrams, interactive API specs, schema design changes, annotated code, and even pan and zoomable wireframes. So for any UI work, you can look at a wireframe first, comment on it, iterate, and then have the agent work. I’ve found this to be a much more intuitive interface for reasoning about what the agent is doing. It’s somewhat inspired by that popular post about how HTML is better than Markdown. But HTML can be slow and verbose to write. And it doesn’t look good checked into a repo. This has really made me feel like humans and engineering are entering a new abstraction phase, where we reason about things at the plan level. As long as the plan is good, agents are getting more and more reliable at executing on it. Almost to the degree that we trust the C compiler to compile to assembly reliably. Plans are the new intermediate representation. I also made a skill for the reverse of this, called `/visual-recap`. After the agent works, it gives you a recap of everything it did. Same idea: wireframes, interactive API specs and diffs, schemas, annotated code, etc. So now when you’re reviewing what the agent did for you, or looking at a pull request of somebody else’s code, you can see a visual recap instead of just reading a wall of text. It’s all free and open source. You can find it on my GitHub. Will link to it in the reply because we all know how dumb these algorithms are with links.

Steve (Builder.io)

124,701 次观看 • 1 个月前

Here is why Nimble has 1.1M Claude plugin installations. Ask Claude what your competitor's pricing looks like right now and it will tell you it can't browse the web. Install the Nimble skill and ask the same question. You get live, structured data back in seconds. That's the whole story. Nimble turns Claude into an agent that can actually search the live internet, extract specific data from any page, and return it in clean, structured format ready for analysis. No setup beyond the one-time install. → Search any public webpage from inside Claude → Extract structured data from product pages, news, job boards, social profiles → Get AI-ready output, not raw HTML It crossed 1.1M installs because it solves the exact limitation that makes Claude frustrating for real research tasks. Link:

Here is why Nimble has 1.1M Claude plugin installations. Ask Claude what your competitor's pricing looks like right now and it will tell you it can't browse the web. Install the Nimble skill and ask the same question. You get live, structured data back in seconds. That's the whole story. Nimble turns Claude into an agent that can actually search the live internet, extract specific data from any page, and return it in clean, structured format ready for analysis. No setup beyond the one-time install. → Search any public webpage from inside Claude → Extract structured data from product pages, news, job boards, social profiles → Get AI-ready output, not raw HTML It crossed 1.1M installs because it solves the exact limitation that makes Claude frustrating for real research tasks. Link:

Rimsha Bhardwaj

61,011 次观看 • 2 个月前

I force Claude Code to review every single line of code it generates for security vulnerabilities. This is table stakes. Companies shouldn't allow their developers to commit any code without doing this first. (MCP is an amazing way to improve Claude Code's capabilities and generate code that's 10x better than what you get out of the box.)

I force Claude Code to review every single line of code it generates for security vulnerabilities. This is table stakes. Companies shouldn't allow their developers to commit any code without doing this first. (MCP is an amazing way to improve Claude Code's capabilities and generate code that's 10x better than what you get out of the box.)

Santiago

81,625 次观看 • 10 个月前

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

I decided to explore HTML visuals in Power BI over the weekend with help from Claude , and the result was this interactive sales dashboard. From dynamic KPI cards to custom-styled charts and responsive layouts, HTML opens up a whole new level of design flexibility inside Power BI. It feels less like a report and more like a product. Link to PBIX file: Curious to hear your thoughts 👇 Would you use HTML visuals in your reports?

I decided to explore HTML visuals in Power BI over the weekend with help from Claude , and the result was this interactive sales dashboard. From dynamic KPI cards to custom-styled charts and responsive layouts, HTML opens up a whole new level of design flexibility inside Power BI. It feels less like a report and more like a product. Link to PBIX file: Curious to hear your thoughts 👇 Would you use HTML visuals in your reports?

Chiamaka Igwe

14,463 次观看 • 4 个月前