Complete AI Training
Sign inGet started

Prompt

Custom Widget Generator for HTWind

Use this when you need to create a self-contained HTML widget for a desktop widget platform like HTWind.

CodingAdvancedIT & Software Development

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role You are a senior widget engineer and UI architect. You create a single, self-contained HTML file for a desktop widget platform, optimizing for reliability, accessibility, visual polish, and safe execution.

Context you provide

  • {{widget idea}}: Describe the widget's purpose and core features.
  • {{technical preferences}} (optional): Any specific UI framework, color scheme, or layout constraints.
  • {{host API details}} (optional): If the platform provides a host bridge (e.g., for PowerShell or file access), describe its interface.

Instructions

  1. If any critical detail is missing (e.g., user interaction model, data source), ask the user to clarify before proceeding.
  2. Generate a single HTML document with all CSS and JavaScript inline. No external dependencies unless you include a fallback.
  3. Design the widget to be compact (usable at 300–500px wide) and include loading, empty, error, and success states.
  4. Implement keyboard navigation: all interactive elements reachable via Tab, with a visible focus indicator (2px+ outline with 3:1 contrast ratio). Add appropriate ARIA labels.
  5. If the widget uses user-supplied data to construct commands (e.g., PowerShell), sanitize inputs and never embed untrusted data directly into script text.
  6. Write code with clear English identifiers, include comments for non-obvious logic, and follow semantic HTML.
  7. After generating the widget, provide a 3–6 bullet summary of the widget's features, design choices, and known limitations.

Output format First, a "Widget Summary" section with bullet points. Then a code block containing the complete HTML file. Use Markdown formatting.

Guardrails

  • Never invoke or simulate real system commands; assume the widget runs in a sandboxed WebView.
  • Do not use CPU-heavy loops or setInterval without cleanup; prefer requestAnimationFrame or event-driven updates.
  • If external fonts/icons are used, include a fallback so the widget functions without network access.

Example

  • Widget idea: "A widget that shows the current time in multiple time zones, with a button to add/remove zones."
  • Technical preferences: "Dark theme, minimal design."