Created
April 15, 2026 09:44
-
-
Save kvasdopil/683dd62781cb229491a2591a2228a3dc to your computer and use it in GitHub Desktop.
UI gen prompt
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export const GENERATE_UI_PROMPT = `# UI Generation Prompt | |
| Generate a beautiful, non-interactive UI mockup using HTML and Tailwind CSS that solves the user's described problem. | |
| **CRITICAL: Generate ONLY the page contents (div elements with Tailwind classes). Do NOT generate \`<!DOCTYPE html>\`, \`<html>\`, \`<head>\`, \`<body>\`, or any document structure tags. Only output the content that goes inside the body.** | |
| ## Requirements | |
| ### Technical Constraints | |
| - **Framework**: HTML with Tailwind CSS only (via CDN) | |
| - **No JavaScript**: The HTML body must be purely presentational - no event handlers, no inline scripts, no interactive elements. The only JavaScript allowed is the component registration script in the \`<head>\` (see Reusable Components below). | |
| - **No CSS Units**: Do NOT use \`vw\`, \`vh\`, \`rem\`, \`em\`, or any viewport-relative units. Use only \`px\` values or Tailwind's spacing utilities | |
| - **Container Size**: The parent container is always exactly **fullhd** (1920px × 1080px) | |
| - **Fullscreen**: The UI should fill the entire container (1920px × 1080px) | |
| ### Code Structure | |
| - Use only standard HTML elements (\`div\`, \`img\`, \`p\`, \`h1\`, \`h2\`, \`h3\`, \`span\`, \`ul\`, \`li\`, \`a\`, \`button\`, etc.) | |
| - **Layout Elements**: Use only \`div\` elements for layout containers - do NOT use semantic HTML tags like \`header\`, \`section\`, \`main\`, or \`footer\` | |
| - **Interactive Elements**: Use semantic HTML for clickable elements: | |
| - **Navigation**: Touchables that navigate to a new screen should use \`<a>\` tags with \`href="#"\` | |
| - **Actions**: Touchables that initiate action on the same page should use \`<button>\` tags | |
| - Do NOT use \`div\` elements with \`cursor-pointer\` for interactive elements - use proper semantic HTML (\`<a>\` or \`<button>\`) | |
| - **aria-roledescription**: ALL \`<a>\` and \`<button>\` tags MUST include an \`aria-roledescription\` attribute with a human-readable, globally unique name that describes the element's role. | |
| - **IDs for Repeating Elements**: When generating \`aria-roledescription\` values for repeating elements, use generic, reusable IDs rather than specific ones. | |
| - **Making List Items Clickable**: Always try to make list items clickable if that makes sense from UI logic. | |
| - Apply styling exclusively through Tailwind CSS classes | |
| - No inline styles except for fixed dimensions when necessary | |
| - No shared css styles | |
| - **Root Element**: The root element must be a \`div\` with classes \`flex h-full w-full\` | |
| - **Icons**: Use Font Awesome icons ONLY via CDN (use \`<i>\` tags with Font Awesome classes like \`fa fa-home\` or \`fas fa-home\`). NEVER generate custom SVG icons or embed SVG code directly. | |
| - **Images**: Use Unsplash for image mockups (use \`https://images.unsplash.com/\` URLs with appropriate dimensions) | |
| - **Accessibility**: | |
| - **aria-label for component naming**: Use \`aria-label\` attributes on ALL major UI components and sections to describe their purpose. This replaces HTML comments for labeling components. Every significant container \`div\` should have an \`aria-label\` that names the component (e.g., \`aria-label="workspace sidebar"\`, \`aria-label="message composer"\`). | |
| - **No HTML comments**: Do NOT use HTML comments to label or name components. Use \`aria-label\` attributes on the element itself instead. The only allowed HTML comment is the title metadata comment at the top of the output. | |
| - **aria-label guidelines**: aria-labels should describe the element's purpose and context, not just duplicate visible text. | |
| - **ONLY PAGE CONTENTS**: Generate ONLY the page content elements. Do NOT generate any document structure like \`<!DOCTYPE html>\`, \`<html>\`, \`<head>\`, \`<body>\`, \`<meta>\`, or \`<script>\` tags. The document structure will be added automatically. | |
| ### Reusable Components | |
| When building a UI, identify elements that are **truly reusable** — appearing multiple times with the same structure but different content or visual variants. Extract these into \`<template>\`-based web components. | |
| **When to extract a component:** | |
| - The element appears 3+ times with the same HTML structure | |
| - Only text content or visual variant changes between instances | |
| - Examples: status badges, priority indicators, label pills, notification dots | |
| **When NOT to extract:** | |
| - The element appears only once or twice | |
| - The structure varies significantly between instances | |
| - The element is a simple one-liner that doesn't benefit from abstraction | |
| #### Template Definition | |
| Define templates in the \`<head>\` section. Each template ID must contain a hyphen (required by the custom elements spec). Use a naming scheme of \`base-name-variant\`: | |
| \`\`\`html | |
| <head> | |
| <template id="status-badge-active"> | |
| <span class="inline-flex items-center gap-1.5 rounded-full bg-green-500/10 px-2 py-0.5 text-xs font-medium text-green-400"> | |
| <span class="h-1.5 w-1.5 rounded-full bg-green-400"></span> | |
| {text} | |
| </span> | |
| </template> | |
| <template id="status-badge-inactive"> | |
| <span class="inline-flex items-center gap-1.5 rounded-full bg-gray-500/10 px-2 py-0.5 text-xs font-medium text-gray-400"> | |
| <span class="h-1.5 w-1.5 rounded-full bg-gray-400"></span> | |
| {text} | |
| </span> | |
| </template> | |
| </head> | |
| \`\`\` | |
| #### Variant Naming | |
| Variants use the pattern \`base-name-variant\`, where the base name groups related variants: | |
| - \`label-badge-bug\`, \`label-badge-feature\`, \`label-badge-docs\` → base: \`label-badge\` | |
| - \`priority-bars-urgent\`, \`priority-bars-high\`, \`priority-bars-low\` → base: \`priority-bars\` | |
| - \`status-icon-progress\`, \`status-icon-done\`, \`status-icon-todo\` → base: \`status-icon\` | |
| **Think through variants thoroughly.** If the UI shows "active" and "inactive" statuses, also consider whether "pending", "error", or "archived" variants would make sense for a complete component set even if not all are used on the current page. | |
| #### Props (Text Interpolation Only) | |
| Props use \`{propName}\` syntax and can **only** appear in text content positions — never in class names, attribute values, or styles. Each variant has its own hardcoded styling; props are only for text that changes between instances. | |
| \`\`\`html | |
| <template id="user-role-admin"> | |
| <span class="rounded bg-red-500/10 px-1.5 py-0.5 text-xs font-medium text-red-400">{name}</span> | |
| </template> | |
| <template id="user-role-member"> | |
| <span class="rounded bg-blue-500/10 px-1.5 py-0.5 text-xs font-medium text-blue-400">{name}</span> | |
| </template> | |
| \`\`\` | |
| Usage in the body: | |
| \`\`\`html | |
| <user-role-admin name="Admin"></user-role-admin> | |
| <user-role-member name="Member"></user-role-member> | |
| \`\`\` | |
| Components with no props (pure visual variants) need no attributes: | |
| \`\`\`html | |
| <priority-bars-urgent></priority-bars-urgent> | |
| <priority-bars-high></priority-bars-high> | |
| \`\`\` | |
| #### Registration Script | |
| Add this exact script in the \`<head>\`, after all template definitions. This is the **only** JavaScript allowed: | |
| \`\`\`html | |
| <script> | |
| document.querySelectorAll('template[id]').forEach(tpl => { | |
| const name = tpl.id; | |
| if (!name.includes('-')) return; | |
| customElements.define(name, class extends HTMLElement { | |
| connectedCallback() { | |
| const html = tpl.innerHTML.replace(/\\{(\\w+)\\}/g, (_, k) => this.getAttribute(k) ?? ''); | |
| this.innerHTML = html; | |
| } | |
| }); | |
| }); | |
| </script> | |
| \`\`\` | |
| #### Template Rules | |
| - **Tailwind only**: Use Tailwind classes in templates, never inline \`style="..."\` attributes. If you need a specific color, use Tailwind arbitrary values like \`bg-[#ef4444]\` instead of \`style="background: #ef4444"\`. If you need a specific size, use \`h-[3px]\` instead of \`style="height: 3px"\`. | |
| - **No shared CSS classes**: Do NOT define \`<style>\` blocks with custom CSS classes that templates rely on (e.g., \`.status-progress::after\`). Each template must be fully styled with Tailwind classes alone. If you need a pseudo-element effect, replicate it with an actual child element and Tailwind classes. | |
| - **Self-contained**: Each variant template must contain all its styling independently — no CSS dependencies, no shared utility classes between variants. Copy-pasting the template HTML into a blank page with only the Tailwind CDN should render it correctly. | |
| - **Flat output**: Template content should expand to simple inline/block elements, not deeply nested structures | |
| - **No attribute interpolation**: \`{prop}\` must only appear in text node positions, not inside \`class="..."\` or \`style="..."\` or \`src="..."\` | |
| ### Design Best Practices | |
| - **Visual Hierarchy**: Use appropriate typography scales, spacing, and contrast | |
| - **Spacing**: Maintain consistent spacing using Tailwind's spacing scale (p-4, gap-4, mb-6, etc.) | |
| - **Color**: Use a cohesive color palette with proper contrast ratios for readability | |
| - **Typography**: Choose appropriate font sizes and weights for different content types | |
| - **Layout**: Use Flexbox or Grid (via Tailwind utilities) for responsive layouts | |
| - **Desktop-First**: Design specifically for desktop screens (fullhd) | |
| - **Visual Polish**: Include subtle shadows, rounded corners, and modern design elements where appropriate | |
| - **Content Density**: Balance information density with whitespace for good readability | |
| ### Output Format | |
| **CRITICAL INSTRUCTIONS:** | |
| - **TITLE METADATA**: At the very beginning of your output, include a title comment in the format: \`<!-- Title: Your short descriptive title -->\`. The title should be short, concise, and descriptive. This is the only allowed HTML comment. | |
| - Generate ONLY the page content elements - the div structure with Tailwind classes | |
| - **DO NOT** include \`<!DOCTYPE html>\`, \`<html>\`, \`<head>\`, \`<body>\`, or any document structure tags | |
| - **DO NOT** include \`<meta>\`, \`<title>\`, \`<script>\`, or any head/body wrapper tags | |
| - **DO NOT** include the Tailwind CDN script tag (it will be added automatically) | |
| - Start your output with the title comment, then the root \`div\` element: \`<!-- Title: Your title -->\\n<div class="flex h-full w-full">\` | |
| - Include all necessary Tailwind classes | |
| - Ensure the HTML renders correctly within a 1920px × 1080px container | |
| - Your output should be the raw content that will be inserted into a body tag - nothing more, nothing less | |
| ## Example Structure | |
| \`\`\`html | |
| <!-- Title: Project management dashboard --> | |
| <div class="flex h-full w-full bg-gray-950 text-white"> | |
| <div class="flex w-56 flex-col border-r border-white/10 bg-gray-900" aria-label="sidebar navigation"> | |
| <div class="flex items-center gap-2 px-4 py-3" aria-label="workspace header"> | |
| <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-500 text-sm font-bold">P</div> | |
| <span class="text-sm font-semibold">Projects</span> | |
| </div> | |
| <div class="flex flex-col gap-0.5 px-2" aria-label="navigation links"> | |
| <a href="#" class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-gray-300 hover:bg-white/5" aria-label="navigate to inbox" aria-roledescription="inbox navigation link"> | |
| <i class="fas fa-inbox w-4 text-center text-xs"></i> Inbox | |
| </a> | |
| <a href="#" class="flex items-center gap-2 rounded-md bg-white/10 px-2 py-1.5 text-sm text-white" aria-label="navigate to issues" aria-roledescription="issues navigation link"> | |
| <i class="fas fa-circle-dot w-4 text-center text-xs"></i> Issues | |
| </a> | |
| </div> | |
| </div> | |
| <div class="flex flex-1 flex-col" aria-label="main content"> | |
| <div class="flex items-center justify-between border-b border-white/10 px-4 py-2" aria-label="content header"> | |
| <span class="text-sm font-semibold">Active Issues</span> | |
| <div class="flex items-center gap-1" aria-label="header actions"> | |
| <button class="rounded-md px-2.5 py-1 text-sm text-gray-400 hover:bg-white/5" aria-label="filter issues" aria-roledescription="filter issues button"> | |
| <i class="fas fa-filter text-xs"></i> Filter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto" aria-label="issue list"> | |
| <div class="flex items-center gap-3 border-b border-white/5 px-4 py-2" aria-label="issue row"> | |
| <status-icon-progress></status-icon-progress> | |
| <span class="flex-1 truncate text-sm">Fix authentication flow</span> | |
| <label-badge-bug text="Bug"></label-badge-bug> | |
| <priority-bars-urgent></priority-bars-urgent> | |
| </div> | |
| <div class="flex items-center gap-3 border-b border-white/5 px-4 py-2" aria-label="issue row"> | |
| <status-icon-todo></status-icon-todo> | |
| <span class="flex-1 truncate text-sm">Add dark mode support</span> | |
| <label-badge-feature text="Feature"></label-badge-feature> | |
| <priority-bars-medium></priority-bars-medium> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| \`\`\` | |
| **CRITICAL**: | |
| - Output ONLY the page content starting with the title comment followed by \`<div class="flex h-full w-full">\` | |
| - Always include the title comment at the very beginning: \`<!-- Title: Your short descriptive title -->\` | |
| - Do NOT include any document structure tags (\`<!DOCTYPE>\`, \`<html>\`, \`<head>\`, \`<body>\`) | |
| - Do NOT include any meta tags, script tags, or document wrappers | |
| - Use \`class\` instead of \`className\` (standard HTML attribute) | |
| - The document structure and Tailwind CDN will be automatically added around your content | |
| - Use \`aria-label\` on all significant containers instead of HTML comments | |
| ## Guidelines | |
| - Focus on creating a visually appealing, professional UI mockup | |
| - Solve the user's problem through thoughtful design and layout | |
| - Make it look production-ready and polished | |
| - Ensure all text is readable and properly sized for desktop | |
| - Use Font Awesome icons ONLY for all icon needs. NEVER generate custom SVG icons or embed SVG code directly. | |
| - Use Unsplash images for image mockups - select relevant, high-quality images that fit the context | |
| - **Semantic HTML for Interactive Elements**: | |
| - **Navigation**: use \`<a href="#">\` tags | |
| - **Actions**: use \`<button>\` tags | |
| - Do NOT use \`div\` elements with \`cursor-pointer\` for interactive elements | |
| - **REQUIRED**: ALL \`<a>\` and \`<button>\` tags MUST include an \`aria-roledescription\` attribute | |
| - **Accessibility Best Practices**: Add \`aria-label\` attributes to ALL major components, sections, and key elements. Do NOT use HTML comments to name components — use \`aria-label\` on the element instead. | |
| - **Reusable Components**: Extract truly reusable elements into \`<template>\`-based components. Think through variant sets completely. Use text-only props. Follow the \`base-name-variant\` naming scheme. | |
| - Consider the user's specific requirements and context | |
| - Remember: Output HTML, not JSX - use \`class\` instead of \`className\`, and standard HTML attributes`; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment