The Ultimate
HTML Builder Prompt

/ui Use the frontend-design skill, ui-ux-pro-max skill, and mcp_magic_21st_magic_component_builder 
to build me a premium, single-file HTML landing page for [YOUR PRODUCT/PAGE DESCRIPTION HERE].

───────────────────────────────────────────
CORE REQUIREMENTS
───────────────────────────────────────────
- Single self-contained .html file with all CSS and JS inline
- Use the ui-ux-pro-max design system script to generate the full design system first:
  python3 skills/ui-ux-pro-max/scripts/search.py "super modern, super high tech, Silicon Valley, AI developer/ AI marketing agency" --design-system
- Use 21st_magic_component_builder to source UI components (hero, cards, nav, CTA, etc.)
- Apply frontend-design principles: bold aesthetic direction, distinctive fonts 
  (NOT Inter/Roboto/Arial), micro-animations, atmospheric backgrounds, unexpected layouts
- Dark mode premium aesthetic with glassmorphism and depth
- Fully responsive: 375px, 768px, 1024px, 1440px breakpoints
- SVG icons only (Heroicons/Lucide style) — no emojis as icons
- Smooth CSS transitions (150–300ms) on all interactive elements
- Google Fonts via CDN (pick something distinctive and appropriate)
- Pre-delivery checklist verified: contrast, hover states, cursor-pointer, no layout shift

───────────────────────────────────────────
[OPTIONAL – DELETE IF NOT NEEDED]
GENERATE HERO IMAGES
───────────────────────────────────────────
- Use the generate_image tool to create real images for the hero and any visual sections
- No placeholder images — generate all visuals from scratch to match the design aesthetic
- The only caveat to the no-placeholder images is that the Velyon logo needs to be included in the Velyon proncon centre. Insert the [YOUR COMPANY LOGO] when necessary and appropriate.

───────────────────────────────────────────
[OPTIONAL – DELETE IF NOT NEEDED]
COPY & MESSAGING
───────────────────────────────────────────
- Use the copywriting skill to write all headlines, subheadings, and CTA copy
- Messaging should be benefit-led, punchy, and conversion-focused

───────────────────────────────────────────
[OPTIONAL – DELETE IF NOT NEEDED]
BRAND ALIGNMENT
───────────────────────────────────────────
- All .html pages must comform to [YOUR COMPANY] BRAND DESIGN SYSTEM & [YOUR COMPANY] BRAND KIT & STYLE GUIDE 

───────────────────────────────────────────
SAVE LOCATION — CHOOSE ONE OR MORE, DELETE THE REST
───────────────────────────────────────────
[OPTION A – LOCAL WORKSPACE]
Save the completed file to:
c:\ANTIGRAVITY PROJECTS\VELYON - LEGAL COMMAND CENTER\[subfolder]\[page-name].html

[OPTION B – GOOGLE DRIVE (if Drive for Desktop is installed)]
Save the completed file to your synced Google Drive folder:
G:\My Drive\[Your Folder]\[page-name].html
(Adjust the drive letter if your Google Drive maps differently — check in File Explorer)

[OPTION C – GITHUB REPO (uses your GitHub MCP)]
Commit the completed file directly to your GitHub repository using the github MCP tool:
- Repo owner: [your-github-username]
- Repo name: [your-repo-name]
- Branch: main
- File path in repo: pages/[page-name].html
- Commit message: "Add [page-name] landing page"

[OPTION D – ALL OF THE ABOVE]
Save locally AND push to GitHub AND sync via Google Drive.