Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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

Chiamaka Igwe

3,540 subscribers

14,287 views • 3 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Identify Which Sectors Showing Strong Sales Growth I’ve created a simple interactive dashboard that lets you view Screener results using bar charts and pie charts. You can also instantly see which stocks belong to which sector, making your analysis faster and more visual. How to Use the Dashboard 1. Download the CSV file Click the Export button on this Screener link: 2. Convert the CSV to JSON Use this online tool to convert your CSV file into a JSON file: 3. Download the HTML file from the link below and open it in your browser: 4. Upload your JSON file Once uploaded, the dashboard will instantly display industry-wise growth charts.

Identify Which Sectors Showing Strong Sales Growth I’ve created a simple interactive dashboard that lets you view Screener results using bar charts and pie charts. You can also instantly see which stocks belong to which sector, making your analysis faster and more visual. How to Use the Dashboard 1. Download the CSV file Click the Export button on this Screener link: 2. Convert the CSV to JSON Use this online tool to convert your CSV file into a JSON file: 3. Download the HTML file from the link below and open it in your browser: 4. Upload your JSON file Once uploaded, the dashboard will instantly display industry-wise growth charts.

Sneha S

76,090 views • 7 months ago

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.

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.

Paras Chopra

214,709 views • 1 month ago

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,394 views • 2 months ago

I've been working on a course for ~2 years, and it's finally out! It's called Responsive Design for Beginners, and in it you'll learn how to build a responsive website from a Figma design with HTML, SCSS, JS. here's what the final website looks like:

I've been working on a course for ~2 years, and it's finally out! It's called Responsive Design for Beginners, and in it you'll learn how to build a responsive website from a Figma design with HTML, SCSS, JS. here's what the final website looks like:

Jess Chan | Coder Coder

23,354 views • 2 years ago

If you make Power BI reports, I think you might enjoy stepping outside of Power BI to experiment with coding agents and dataviz libraries like Vega, Altair, or d3.js. Here's an example of a dashboard I made with FitBit data. While making the pbir-cli (testing starts this week, thanks to everyone who showed interest!), we learned a lot. Chiefly: we've found it's really, really hard to get an agent to work well with Power BI reports!! Power BI reports are built around abstraction and different intersecting layers. Themes, metadata, extensions, the model... all of it built for a low-code SSBI experience (clicky-clicky-draggy-droppy). That's fine for you and me (mostly). For a coding agent, though, it's inflexible... maybe even hostile. Even with the right tools and context, you simply can't get a Power BI report to reliably do _exactly_ what you want; it's just not meant for that. If you experiment a bit with Vega, Altair, or d3.js... you'll see what I mean; the contrast is pretty clear. This isn't necessarily a bad thing; unlimited flexibility may lead to inconsistency, and there's creativity in constraints. But still, I've been wanting to explore visualization without these constraints... My experiments beyond Power BI reports have been interesting and given me a lot to think about. The most promising approach so far: viz-as-code with custom embedded visuals, pulling from local or remote data sources. This stepcount dashboard is one such example... made in just a few hours between other tasks. Materializing a dashboard like this from natural language wasn't really viable a year ago. Project out another 12–18 months and it's certainly difficult to imagine what the future looks like... That said, reports and dashboards in an enterprise context aren't just visuals. Governance, distribution, integration, etc... years of individual and organizational investment. All of that makes change have a speed limit; we won't be plugging in custom embedded dashboards, overnight. But if you're curious, I do think it's a good investment to step outside Power BI and experiment. Investments you may even be turned into custom visual designs, anyway :). As Havens Consulting put it recently to me: it's time to multiclass...

If you make Power BI reports, I think you might enjoy stepping outside of Power BI to experiment with coding agents and dataviz libraries like Vega, Altair, or d3.js. Here's an example of a dashboard I made with FitBit data. While making the pbir-cli (testing starts this week, thanks to everyone who showed interest!), we learned a lot. Chiefly: we've found it's really, really hard to get an agent to work well with Power BI reports!! Power BI reports are built around abstraction and different intersecting layers. Themes, metadata, extensions, the model... all of it built for a low-code SSBI experience (clicky-clicky-draggy-droppy). That's fine for you and me (mostly). For a coding agent, though, it's inflexible... maybe even hostile. Even with the right tools and context, you simply can't get a Power BI report to reliably do _exactly_ what you want; it's just not meant for that. If you experiment a bit with Vega, Altair, or d3.js... you'll see what I mean; the contrast is pretty clear. This isn't necessarily a bad thing; unlimited flexibility may lead to inconsistency, and there's creativity in constraints. But still, I've been wanting to explore visualization without these constraints... My experiments beyond Power BI reports have been interesting and given me a lot to think about. The most promising approach so far: viz-as-code with custom embedded visuals, pulling from local or remote data sources. This stepcount dashboard is one such example... made in just a few hours between other tasks. Materializing a dashboard like this from natural language wasn't really viable a year ago. Project out another 12–18 months and it's certainly difficult to imagine what the future looks like... That said, reports and dashboards in an enterprise context aren't just visuals. Governance, distribution, integration, etc... years of individual and organizational investment. All of that makes change have a speed limit; we won't be plugging in custom embedded dashboards, overnight. But if you're curious, I do think it's a good investment to step outside Power BI and experiment. Investments you may even be turned into custom visual designs, anyway :). As Havens Consulting put it recently to me: it's time to multiclass...

Kurt Buhler

28,483 views • 4 months ago

Claude Mythos / Oceanus is insane see the level of detail using Three.js (from jsDelivr).HTML and a custom meshing engine it made (in like 5 minutes and low effort thinking level) Credit to Lentils and z..AI , this is so good people are not realising it yet 😭

Claude Mythos / Oceanus is insane see the level of detail using Three.js (from jsDelivr).HTML and a custom meshing engine it made (in like 5 minutes and low effort thinking level) Credit to Lentils and z..AI , this is so good people are not realising it yet 😭

Chetaslua

99,537 views • 1 month ago

Amazed by HTML-in-canvas demos? it's natively supported by HyperFrames and we built a catalog of effects anyone can use with one command $ npx hyperframes add html-in-canvas take your videos to the next level

Amazed by HTML-in-canvas demos? it's natively supported by HyperFrames and we built a catalog of effects anyone can use with one command $ npx hyperframes add html-in-canvas take your videos to the next level

HeyGen

501,788 views • 2 months ago

receiving a lot of good words about lavish-axi (ty!) in v0.1.27 i just made it installable and invocable as a skill "/lavish" or with a prompt "/lavish let's discuss what options we have" this is the quickest way to upgrade your workflow from reading long wall of text and markdown to interactive html artifacts which are a lot more pleasant and efficient to work with why not just ask the agent to write an html? you'll know when you need to give some feedback to the agent about things in the html and realize there's no good way to make those edits and iterations. lavish gives you the ability to work with the agent via the html itself if you have been using lavish already, make sure to upgrade to latest version! quite a few good bug fixes shipped recently that would help the agent generate correct styling and poll more reliably

receiving a lot of good words about lavish-axi (ty!) in v0.1.27 i just made it installable and invocable as a skill "/lavish" or with a prompt "/lavish let's discuss what options we have" this is the quickest way to upgrade your workflow from reading long wall of text and markdown to interactive html artifacts which are a lot more pleasant and efficient to work with why not just ask the agent to write an html? you'll know when you need to give some feedback to the agent about things in the html and realize there's no good way to make those edits and iterations. lavish gives you the ability to work with the agent via the html itself if you have been using lavish already, make sure to upgrade to latest version! quite a few good bug fixes shipped recently that would help the agent generate correct styling and poll more reliably

Kun Chen

14,584 views • 1 month ago

LLM Wikis + HTML Artifacts are insanely powerful. You should seriously consider this in your workflows. LLM Wikis captures all the important information that lets you and your agents do meaningful work. HTML artifacts present that information in interesting ways that allow you to take important actions along with your agents. My HTML artifacts sit on top of my LLM wikis. They are dynamic and are easily extended as needs arise. I have hooked my Artifacts to talk to my agents, and similarly, the agents can talk to artifacts. This has allowed me to build powerful artifacts that reduce my inbox to zero, keep me updated on any topic of interest, fast prototyping, do deep research, design/trigger new experiments, generate figures to improve understanding, schedule research, search relevant information, discover topics, and so much more. What you see in the clip is not a website. It's a simple interactive HTML artifact. HTML artifacts are useful for designers, engineers, researchers, students, and anyone working with agents. Lastly, HTML doesn't replace Markdown. They are a much better combination working together.

LLM Wikis + HTML Artifacts are insanely powerful. You should seriously consider this in your workflows. LLM Wikis captures all the important information that lets you and your agents do meaningful work. HTML artifacts present that information in interesting ways that allow you to take important actions along with your agents. My HTML artifacts sit on top of my LLM wikis. They are dynamic and are easily extended as needs arise. I have hooked my Artifacts to talk to my agents, and similarly, the agents can talk to artifacts. This has allowed me to build powerful artifacts that reduce my inbox to zero, keep me updated on any topic of interest, fast prototyping, do deep research, design/trigger new experiments, generate figures to improve understanding, schedule research, search relevant information, discover topics, and so much more. What you see in the clip is not a website. It's a simple interactive HTML artifact. HTML artifacts are useful for designers, engineers, researchers, students, and anyone working with agents. Lastly, HTML doesn't replace Markdown. They are a much better combination working together.

elvis

246,912 views • 2 months ago

I made a plugin that turns figma designs to code using Claude AI Works with HTML, CSS, Tailwind, SwiftUI, Flutter, etc. This is production level code and you can enter custom prompts like "make it functional" or "add hover states". Oh and it's free. You can use your api keys.

I made a plugin that turns figma designs to code using Claude AI Works with HTML, CSS, Tailwind, SwiftUI, Flutter, etc. This is production level code and you can enter custom prompts like "make it functional" or "add hover states". Oh and it's free. You can use your api keys.

Meng To

220,996 views • 1 year ago

Lamang is about to feel richer, more dynamic, and more interactive, giving you a wealth of reasons to explore, loot, and experiment with a wider variety of weapons and gear. Watch the second devlog to see the new content coming in the #Spearhead Update, and share your thoughts!

Lamang is about to feel richer, more dynamic, and more interactive, giving you a wealth of reasons to explore, loot, and experiment with a wider variety of weapons and gear. Watch the second devlog to see the new content coming in the #Spearhead Update, and share your thoughts!

Gray Zone Warfare 🔜 Gamescom

61,561 views • 4 months ago

how to use Google's NEW open source Design.md + AI Skills to make your startup look like a $100 million company in 1 hour: 1. Design.md is an open source file from Google that captures the soul of a design. Typography, colors, spacing, all in one markdown file. You attach it to your prompt and your agent builds beautiful things every time. 2. Think of it this way. The HTML is the finished dish. The design.md is the recipe. The skills are the ingredients. Put them together and everything you build looks consistent and professional. 3. Don't create a design system from scratch. Find a brand you love. Linear, Stripe, Vercel, whatever resonates. Study it. Use ChatGPT or Claude to help you extract the design language into your own design.md file. 4. Build skills on top of your design.md. A landing page skill. A mobile app skill. A motion design skill. A slide deck skill. Each one references the same design.md so everything looks like it came from the same designer. 5. The biggest mistake people make: they nail one screen and then everything else looks generic. Design.md solves this. One file keeps every page, every format, every medium consistent. 6. Use it across everything. Your landing page. Your app. Your pitch deck. Your promo videos. Same DNA. Same taste. Same system. That's what separates a startup that looks real from one that looks vibe-coded. 7. Build a second brain for design inspiration. When you see something beautiful in the real world or online, capture it. Save it. When you're building something new, reference it. Taste is developed, not downloaded. 8. It's obvious but the difference between a product people trust and a product people bounce from is how it looks and feels. Design.md gives you that edge. you can watch below shoutout to Meng To for coming on The Startup Ideas Podcast (SIP) 🧃 and walking through his full workflow. if you want to use AI to actually build gorgeous designs, you'll want to use see this. watch

GREG ISENBERG

503,527 views • 2 months ago

I’m giving away the full template that I use to deliver my $999 AI Assessment reports. Completely free. I just rebuilt it from the ground up in Claude Design. -Download the free template -Ask Claude Design to "import it as-is" -fill in with your client details This video explains exactly how to upload the template to Claude Design and how to position each section of the report. Download it at

I’m giving away the full template that I use to deliver my $999 AI Assessment reports. Completely free. I just rebuilt it from the ground up in Claude Design. -Download the free template -Ask Claude Design to "import it as-is" -fill in with your client details This video explains exactly how to upload the template to Claude Design and how to position each section of the report. Download it at

Corey Ganim

20,311 views • 1 month ago

Introducing SuperDesign.Dev The first open-source Design Agent that lives inside Cursor, Windsurf, or any IDE: 👉 Instantly spin up 10 different design in parallel 👉 Explore, fork, and iterate 10x faster 👉 Create new or iterate on your existing UI — all fully local JackJack and I shipped this as a quick weekend experiment to validate a hunch: design is the killer use case for parallel agents. Currently at V0.005 — a simple customization of the Claude Code SDK + static HTML generation. (We might be the first product powered by the Anthropic Claude Code SDK!) More coming soon: web app, mobile app, SVG generation, and more. GitHub: Try it out: ----- Upvote on Hacker News ❤️:

Introducing SuperDesign.Dev The first open-source Design Agent that lives inside Cursor, Windsurf, or any IDE: 👉 Instantly spin up 10 different design in parallel 👉 Explore, fork, and iterate 10x faster 👉 Create new or iterate on your existing UI — all fully local JackJack and I shipped this as a quick weekend experiment to validate a hunch: design is the killer use case for parallel agents. Currently at V0.005 — a simple customization of the Claude Code SDK + static HTML generation. (We might be the first product powered by the Anthropic Claude Code SDK!) More coming soon: web app, mobile app, SVG generation, and more. GitHub: Try it out: ----- Upvote on Hacker News ❤️:

Jason Zhou

49,433 views • 1 year ago

Claude + Nano Banana Pro + A Canvas = Over Powered! Tell this Agent: "I want to draw something" And you just unlocked your new playground and super power! Link to the agent below 👇

Claude + Nano Banana Pro + A Canvas = Over Powered! Tell this Agent: "I want to draw something" And you just unlocked your new playground and super power! Link to the agent below 👇

GLIF

15,999 views • 7 months ago

designing my new personal site with Pencil.dev connected it to Claude Code and turned on "Swarm Mode" and watched agents design my site in real-time, with their cursors actually moving and operating the screen, not just cosmetically! instead of the agents producing a raw HTML file, they generate something called .pen which is just a json file describing all layouts, components, and design. this means that it's easier than ever to have teams collaborate on design exactly as they do on source code (designers and engineers can now speak the same language!) once you are happy with a screen, you can open a new chat and reference .pen frame and start to generate the code (in React/ Next/ Tailwind etc), and run it on your dev server, producing a live website that visually matches your design

designing my new personal site with Pencil.dev connected it to Claude Code and turned on "Swarm Mode" and watched agents design my site in real-time, with their cursors actually moving and operating the screen, not just cosmetically! instead of the agents producing a raw HTML file, they generate something called .pen which is just a json file describing all layouts, components, and design. this means that it's easier than ever to have teams collaborate on design exactly as they do on source code (designers and engineers can now speak the same language!) once you are happy with a screen, you can open a new chat and reference .pen frame and start to generate the code (in React/ Next/ Tailwind etc), and run it on your dev server, producing a live website that visually matches your design

Sandra

93,463 views • 4 months ago

Claude Opus 4.8 should be the final reason to stop writing specs by hand Anthropic's Claude Code architect shows the new workflow in 31 minutes The model interviews you first Then it pulls out the requirements better than your own 200-line markdown doc No dead specs No messy notes No file nobody reads Claude writes the spec Renders it in html Checks the result inside the same file Opus 4.8 Auto mode X high effort This is less like prompting More like letting the agent understand the job before it builds Bookmark and watch the video below

Claude Opus 4.8 should be the final reason to stop writing specs by hand Anthropic's Claude Code architect shows the new workflow in 31 minutes The model interviews you first Then it pulls out the requirements better than your own 200-line markdown doc No dead specs No messy notes No file nobody reads Claude writes the spec Renders it in html Checks the result inside the same file Opus 4.8 Auto mode X high effort This is less like prompting More like letting the agent understand the job before it builds Bookmark and watch the video below

rari

39,164 views • 1 month ago

New course: Build agents that respond to users with not only plaintext, but custom UIs like charts, forms, and whiteboards, generated on demand and displayed right in the chat. This short course is built in partnership with CopilotKit🪁 and taught by Atai Barkai, co-founder of CopilotKit. You'll learn three approaches: Your agent can pick from custom components you build, like charts and forms. It can compose new layouts from a set of building blocks you provide, like rows, cards, and text. Or it can incorporate existing third-party apps, like a whiteboard or a calendar, right inside the conversation. Skills you’ll gain: - Build agents that render custom components like charts and forms on demand - Build an app where the agent and user collaborate on shared data, beyond just the chat window - Place third-party apps like maps, calendars, and whiteboards right in your interface Join and build agents that give users something to see and act on!

New course: Build agents that respond to users with not only plaintext, but custom UIs like charts, forms, and whiteboards, generated on demand and displayed right in the chat. This short course is built in partnership with CopilotKit🪁 and taught by Atai Barkai, co-founder of CopilotKit. You'll learn three approaches: Your agent can pick from custom components you build, like charts and forms. It can compose new layouts from a set of building blocks you provide, like rows, cards, and text. Or it can incorporate existing third-party apps, like a whiteboard or a calendar, right inside the conversation. Skills you’ll gain: - Build agents that render custom components like charts and forms on demand - Build an app where the agent and user collaborate on shared data, beyond just the chat window - Place third-party apps like maps, calendars, and whiteboards right in your interface Join and build agents that give users something to see and act on!

Andrew Ng

209,269 views • 2 months ago

Imagine being able to copy any website’s design in seconds 👀 Someone gave Claude Code this superpower: → Built an MCP that reads a site’s HTML/CSS → Pulls out the colors, fonts, layouts, and components → Recreates the UI so you can remix it Find a design you like. Grab the structure. Add your own style. Building clean UIs just got way easier 🚀 Follow Bethany Hyde for more AI & coding tips ⚡

Imagine being able to copy any website’s design in seconds 👀 Someone gave Claude Code this superpower: → Built an MCP that reads a site’s HTML/CSS → Pulls out the colors, fonts, layouts, and components → Recreates the UI so you can remix it Find a design you like. Grab the structure. Add your own style. Building clean UIs just got way easier 🚀 Follow Bethany Hyde for more AI & coding tips ⚡

Bethany Hyde

209,583 views • 23 days ago

Soooo Thariq has straight up changed my life with these 5 words: "HTML is the new markdown." It's so obvious in hindsight: while .md is simple to write and agents can read it well, it's a total slog to eyeball as a human. In this special ep recorded live at Code with Claude, Thariq walks me through how he: - uses HTML artifacts as interactive specs - builds throwaway micro-UIs - maintains a living design system in HTML - prompts Claude with "whatever is needed" to give it room to actually think He also tells us what comes after the SWE + PM role 👀 As always, a huge TY to our amazing sponsors: 🔀 Celigo - Intelligent automation built for AI: 🪪 Persona - trusted identity verification for any use case: Watch now on YT:

Soooo Thariq has straight up changed my life with these 5 words: "HTML is the new markdown." It's so obvious in hindsight: while .md is simple to write and agents can read it well, it's a total slog to eyeball as a human. In this special ep recorded live at Code with Claude, Thariq walks me through how he: - uses HTML artifacts as interactive specs - builds throwaway micro-UIs - maintains a living design system in HTML - prompts Claude with "whatever is needed" to give it room to actually think He also tells us what comes after the SWE + PM role 👀 As always, a huge TY to our amazing sponsors: 🔀 Celigo - Intelligent automation built for AI: 🪪 Persona - trusted identity verification for any use case: Watch now on YT:

claire vo 🖤

199,817 views • 1 month ago