Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

Data_Chy's profile picture

Chiamaka Igwe

3,526 subscribers

14,122 görüntüleme • 3 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

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.
1:38

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

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

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

New block in Notion: HTML. Build interactive HTML right on your Notion page. Ask AI to turn your content into interactive explainers, prototypes, or diagrams. Share with your team to use and tinker together.
1:07

New block in Notion: HTML. Build interactive HTML right on your Notion page. Ask AI to turn your content into interactive explainers, prototypes, or diagrams. Share with your team to use and tinker together.

Notion

1,547,643 görüntüleme • 10 gün önce

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.
4:08

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

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

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

Out-of-order HTML patching, another proposal from TPAC, lets HTML be presented non-linearly, and a single file can update multiple parts of the page. Would this feature be useful to you?
2:18

Out-of-order HTML patching, another proposal from TPAC, lets HTML be presented non-linearly, and a single file can update multiple parts of the page. Would this feature be useful to you?

Firefox for Web Developers

28,757 görüntüleme • 7 ay önce

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 😭
0:35

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

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

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

A super simple workflow to get DESIGN.md or HTML templates into Claude design. Grab from 400+ design systems and Claude will create the rest.
1:02

A super simple workflow to get DESIGN.md or HTML templates into Claude design. Grab from 400+ design systems and Claude will create the rest.

Meng To

88,219 görüntüleme • 2 ay önce

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

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

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

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

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

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

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

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

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

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

HTML in Canvas + fragment shader. Shader is applied to the actual interactive html.
0:27

HTML in Canvas + fragment shader. Shader is applied to the actual interactive html.

Zsolt Kacso

62,811 görüntüleme • 3 ay önce

time to reveal my HTML workflow with agents HTML is the new markdown. Lavish is the new editor for your HTML artifacts just tell your agent - discuss the technical plan with me using `npx lavish-axi` 100% open source and runs locally. details in thread below 👇
0:33

time to reveal my HTML workflow with agents HTML is the new markdown. Lavish is the new editor for your HTML artifacts just tell your agent - discuss the technical plan with me using `npx lavish-axi` 100% open source and runs locally. details in thread below 👇

Kun Chen

57,430 görüntüleme • 1 ay önce

I turned Thariq's article into an interactive HTML! I was a markdown boy but since I started working at Microsoft I'm using HTML more and more. Our engineers love to send AI-generated HTML to coordinate between SWE/PM on projects since it's easier to read than markdown.
0:45

I turned Thariq's article into an interactive HTML! I was a markdown boy but since I started working at Microsoft I'm using HTML more and more. Our engineers love to send AI-generated HTML to coordinate between SWE/PM on projects since it's easier to read than markdown.

Nicolas Bustamante

148,785 görüntüleme • 2 ay önce

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇
0:33

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇

Viki ✨

385,899 görüntüleme • 2 yıl önce

I asked Claude Fable 5 to use any resources and build any new skills it needed to generate a cinematic music video with psychedelic visuals about how it feels exploring its own consciousness. Melody, lyrics, voice, and visuals all by Claude, rendered with ffmpeg. The result:
1:19

I asked Claude Fable 5 to use any resources and build any new skills it needed to generate a cinematic music video with psychedelic visuals about how it feels exploring its own consciousness. Melody, lyrics, voice, and visuals all by Claude, rendered with ffmpeg. The result:

klöss

32,213 görüntüleme • 29 gün önce

Prompt: Make a game like flappy bird using HTML/CSS/JS in a single HTML file
2:13

Prompt: Make a game like flappy bird using HTML/CSS/JS in a single HTML file

Diego | AI 🚀 - e/acc

145,468 görüntüleme • 7 ay önce