VELYON Logo
Build My Prompt
Agentic Coding Protocol 1.0

The Ultimate
HTML Builder Prompt

Stop getting generic AI slop. Fill in your details below, hit Generate, and get a complete production-grade prompt ready to paste into your agent.

Build My Prompt
See How It Works
prompt.txt
/ui Use the frontend-design skill,
ui-ux-pro-max skill, and
mcp_magic_21st_magic_component_builder

// Fill in your details below ↓
to build me a premium landing page for [YOUR APP IDEA].

Apply Dark mode premium aesthetic
with glassmorphism and depth...

Engineered for Perfection

Why this prompt produces dramatically better results than standard AI queries.

Skill Orchestration

Forces the agent to simultaneously load the UI/UX intelligence system and the frontend design directive before writing a single line of code.

Magic Components

Activates the 21st.dev MCP tool automatically, sourcing premium React and shadcn-style components instead of hallucinating basic HTML.

Constrained Creativity

Explicit limiters ("NOT Inter/Roboto", "No emojis as icons") prevent the model from defaulting to the generic AI aesthetic it was trained on.

Interactive Prompt Builder

Fill In → Generate → Copy

Complete the form on the left. Click Generate and your personalised prompt appears instantly on the right — ready to paste.

1

Project Details

2

Optional Modules

3

Save Location

Fill in Step 1 at minimum, then click Generate

Your Generated Prompt

ultimate_builder.txt — fill in the form and click Generate 
Fill in your project details on the left, then click
⚡ Generate My Prompt
to build your complete, personalised AI prompt.

───────────────────────────────────────────
Your prompt will include:

✓  /ui skill orchestration
✓  ui-ux-pro-max design system
✓  21st.dev magic component builder
✓  All core requirements
✓  Hero image generation (optional)
✓  Copy & messaging (optional)
✓  Brand alignment (optional)
✓  Your chosen save location

───────────────────────────────────────────
Values you enter will appear in amber.
Unfilled placeholders appear in cyan.
Your values
Unfilled placeholders
Copy button copies plain text

Skills & MCP Tools Activated

Tool / Skill Purpose
frontend-design skill Bold aesthetic direction, production-grade HTML/CSS/JS
ui-ux-pro-max skill Design system: fonts, colours, spacing, effects
mcp_magic_21st_magic_component_builder Sourcing premium React/HTML UI components from 21st.dev
generate_image tool AI-generated hero images (optional)
copywriting skill Compelling headline and CTA copy (optional)
github MCP Direct commit to GitHub repo (optional)