42 articles
Learn how to set up, publish, and optimize your HipDeck workspace.
May 5, 2026
Here’s the idea in one sentence: you describe what you want, an AI writes the code, and you paste it into HipDeck. That’s it. No developer required, no design tools, no build pipeline.
AI assistants like ChatGPT, Claude, and Gemini are remarkably capable at generating complete, self-contained HTML/CSS/JavaScript — the exact format HipDeck’s Embed Element accepts. You can describe virtually any webpage, widget, animated display, or interactive component in plain English, and the AI will hand you working code in seconds.
The workflow is beautifully simple: open your AI assistant of choice, describe what you want to see on screen, copy the HTML it returns, paste it into a HipDeck Embed Element, and your custom live element is running on your playlist. From idea to live display in minutes — without writing a single line of code yourself.
This isn’t a workaround or a hack. It’s a genuinely powerful creative workflow that puts the full expressive range of the web directly in your hands. If you can describe it, you can build it.
For years, custom digital signage content meant hiring a developer, waiting days for revisions, and paying for every small change. AI-generated embeds completely flip that model.
The most obvious win is that you don’t need to know how to code. You don’t need to understand CSS animations, JavaScript timers, or HTML layout. You just need to know what you want. The AI handles every technical detail — you handle the vision.
But the deeper superpower is conversational iteration. Once you have a working embed, you can refine it with natural language instructions:
Each of those instructions takes seconds to type and seconds for the AI to process. You get updated code instantly, paste it back into HipDeck, and see the result. The iteration loop is so fast that you can go from rough concept to polished, pixel-perfect display in a single afternoon — something that would have taken days of back-and-forth with a developer.
This unlocks creative freedom for everyone building playlists: marketing teams, event coordinators, office managers, educators, gym owners, restaurant operators. If you have a vision for what you want on screen, you now have the tools to make it happen — fast.
Here’s the exact process to go from idea to live embed on your HipDeck playlist.
Open ChatGPT, Claude, Gemini, or any capable AI assistant. Write a clear, specific description of what you want to see on screen. The more detail you provide, the better the result — but even a rough description will get you something useful to iterate on.
A good starting prompt looks like this:
“Create a self-contained single-file HTML page with no external dependencies. It should display a large countdown timer counting down to December 31, 2025 at midnight. Use a dark navy background (#0a0e2a), white text, and a bold sans-serif font. The timer should show days, hours, minutes, and seconds in large individual boxes with labels underneath. The page should fill the full 1920x1080 screen.”
Be specific about colors, fonts, layout, screen size, and behavior. The AI will fill in reasonable defaults for anything you don’t specify, but explicit instructions always produce better results.
The AI will respond with a complete block of HTML code. This is your embed. It will typically include everything in a single file: the HTML structure, CSS styles in a <style> tag, and JavaScript logic in a <script> tag — all self-contained.
Read through the response briefly. If something looks off or the AI added caveats about what it couldn’t do, note those for your next prompt. Otherwise, you’re ready to copy.
Select and copy the entire HTML block the AI provided. Make sure you’re copying everything — from the opening <!DOCTYPE html> or <html> tag all the way to the closing </html> tag. Don’t leave anything out.
If the AI wrapped the code in a code block (with triple backticks), copy only the code itself, not the backtick markers.
In HipDeck, open the slide or playlist where you want the embed to appear. Add an Embed Element to your slide. In the embed editor, paste the full HTML code you copied. Save the element.
HipDeck will render the HTML directly, exactly as a browser would. Your custom widget, timer, dashboard, or display will appear live on the slide.
Preview your slide to see the embed in action. If something isn’t quite right — the font is too small, the colors don’t match your branding, the layout feels off — go back to your AI assistant. Paste your current code into the chat and describe the change you want. Get the updated code, copy it, and replace the content in your HipDeck Embed Element.
Repeat until it’s exactly what you envisioned. This loop is fast, low-friction, and genuinely enjoyable.
The range of what you can create is enormous. Here are some of the most compelling use cases, along with guidance on how to prompt for each.
Countdown timers are one of the most universally useful embeds for digital signage. Product launches, event kickoffs, sale deadlines, shift changes — a well-designed countdown creates urgency and keeps audiences informed.
Prompt tip: Specify the exact target date and time, your brand colors, whether you want days/hours/minutes/seconds or just hours/minutes/seconds, and whether you want any animation on the numbers (flip clock style, fade transitions, etc.).
For sports venues, esports events, fitness competitions, or office leaderboards, an animated scoreboard embed can be stunning. You can hardcode the scores for a static display or ask the AI to build a version that reads scores from URL parameters so you can update them without touching the code.
Prompt tip: Describe the sport or competition format, the number of teams or players, the visual style (clean and modern vs. retro arcade vs. broadcast-style), and any animations you want when scores update.
A full-screen announcement banner with your brand colors, logo placement, and custom typography is a classic signage use case. AI can generate these with smooth entrance animations, auto-scrolling text for long messages, or rotating announcements that cycle through multiple items.
Prompt tip: Provide your exact hex color codes, describe the layout (centered text, left-aligned with a sidebar, full-bleed background image placeholder), and specify any animation style for text entrance or transitions between announcements.
A live clock sounds simple, but with AI you can make it extraordinary — a large typographic clock in your brand font, an analog clock face with custom colors, a world clock showing multiple time zones simultaneously, or a clock paired with the current date and a greeting message.
Prompt tip: Specify analog vs. digital, 12-hour vs. 24-hour format, whether to show seconds, and any decorative elements. For world clocks, list the cities and time zones you want displayed.
A rotating display of motivational quotes, company values, customer testimonials, or fun facts is a great way to keep lobby or break room screens engaging. Ask the AI to build a self-contained rotator with a list of quotes baked directly into the code.
Prompt tip: Provide the actual quotes you want to display, specify the rotation interval (e.g., every 8 seconds), describe the transition style (fade, slide, typewriter effect), and give your brand colors and font preferences.
For locations where weather context matters — retail stores, gyms, outdoor venues, hospitality — a weather widget adds real utility to your signage. Note that truly live weather data requires an API key, but you can ask the AI to build a beautifully styled widget that accepts weather data via URL parameters, which you can update on a schedule.
Prompt tip: Describe the visual style (minimal and clean, icon-heavy, card-based), the data points you want to show (temperature, conditions, humidity, wind), and whether you want a single location or multiple.
For office environments, operations centers, or sales floors, a KPI dashboard embed can surface the numbers that matter most. You can hardcode values for a static display, or ask the AI to build a dashboard that reads values from URL parameters — making it easy to update figures without touching the code.
Prompt tip: List the specific metrics you want to display, describe the layout (grid of cards, single large number with label, progress bars), specify your brand colors, and indicate whether you want any visual indicators for good/bad performance (green/red coloring, up/down arrows).
The quality of your embed depends heavily on the quality of your prompt. These practical tips will help you get great results consistently.
Ask for self-contained single-file HTML. This is the most important instruction. Tell the AI explicitly: “Create a self-contained single-file HTML page with all CSS in a <style> tag and all JavaScript in a <script> tag. No external files.” This ensures the embed works perfectly when pasted into HipDeck without any missing dependencies.
Specify screen dimensions. HipDeck displays typically run at 1920×1080 (full HD) or 3840×2160 (4K). Tell the AI: “The page should fill a 1920x1080 screen” so it sizes and positions elements correctly. Without this, the AI may generate something designed for a browser window rather than a full-screen display.
Avoid external dependencies when possible. Ask the AI to avoid CDN links, external JavaScript libraries, and external font imports unless absolutely necessary. A prompt like “Use no external dependencies — no CDN links, no external fonts, no API calls” keeps your embed self-contained and reliable. If you need a specific font, ask the AI to embed it using a base64 data URI or use a system font stack instead.
Specify your background color explicitly. Tell the AI the exact background color of your slide so the embed blends seamlessly. Use hex codes for precision: “The background should be #1a1a2e”. This prevents jarring white boxes appearing on dark slides.
Be explicit about font sizes, colors, and animation styles. Don’t leave these to chance. Specify: “Use a font size of at least 120px for the main number”, “Use white text on a dark background”, “Animate with a smooth fade-in over 0.5 seconds”. The more specific you are, the less iteration you’ll need.
Example prompt that hits all these points:
“Create a self-contained single-file HTML page with no external dependencies. Display a large digital clock showing the current time in 24-hour format, updating every second. Use a black background (#000000), bright green text (#00ff41) in a monospace font, and a font size of 200px for the time. Center everything on a 1920x1080 screen. Add a subtle green glow effect to the text. All CSS should be in a style tag, all JS in a script tag.”
That level of specificity will get you something close to production-ready on the first try.
The first version of your embed is just the starting point. The real power of AI-generated embeds is how fast you can refine them.
Here’s the iteration loop:
This loop takes about 60 seconds per iteration. You can make dozens of refinements in an hour. Want to try a completely different color scheme? One message. Want to add a second piece of information to the display? One message. Want to change the animation from a slide to a fade? One message.
When pasting your existing code back to the AI, frame your request clearly:
“Here is my current embed code. Please make the following changes: [your changes]. Keep everything else exactly the same and return the complete updated HTML.”
That instruction — “keep everything else exactly the same” — is important. It prevents the AI from helpfully “improving” things you didn’t ask it to change.
Don’t be afraid to make bold changes mid-iteration. Ask the AI to completely restyle the embed, change the layout, or add entirely new functionality. Because the iteration cost is so low, experimentation is essentially free. This is where the creative freedom of AI-generated embeds really shines.
For most use cases, pasting HTML directly into HipDeck’s Embed Element is the fastest and simplest approach. But there are situations where hosting your embed code externally makes more sense.
When to consider external hosting:
GitHub Gist is a free service for hosting code snippets. Here’s how to use it as a hosting layer for your HipDeck embeds:
.html extension (e.g., countdown.html)To update the embed later, edit the Gist — HipDeck will serve the latest version automatically.
CodePen is a browser-based code editor and hosting platform that’s particularly friendly for HTML/CSS/JS projects:
CodePen’s live preview makes it a great environment for fine-tuning your embed before deploying it to HipDeck. You can see changes in real time as you edit.
For quick, one-off embeds, paste directly into HipDeck. For embeds you’ll update frequently, share across multiple slides, or manage as part of a larger content system, GitHub Gist or CodePen give you a clean, maintainable hosting layer. Both are free, both are fast to set up, and both integrate seamlessly with HipDeck’s URL embed capability.
← Previous Article
Next Article →