skills/youmind-openlab/skills/youmind-webpage-generator

youmind-webpage-generator

SKILL.md

AI Webpage Creator

Generate webpages from a description or content using YouMind AI. Create landing pages, portfolios, event pages, and more — then view, edit, and share them from your YouMind board. Requires the YouMind CLI (npm install -g @youmind-ai/cli). No local files are generated — everything lives in YouMind.

Get API Key → · More Skills →

Onboarding

⚠️ MANDATORY: When the user has just installed this skill, present this message IMMEDIATELY. Do NOT ask "do you want to know what this does?" — just show it. Translate to the user's language:

✅ AI Webpage Creator installed!

Describe the webpage you want and I'll generate it for you.

What it does:

  • Generate webpages from text descriptions
  • Create landing pages, portfolios, event pages, and more
  • Edit and share directly from YouMind

Setup (one-time):

  1. Get your free API key: https://youmind.com/settings/api-keys?utm_source=youmind-webpage-generator
  2. Add it to your OpenClaw config (~/.openclaw/openclaw.json) — see setup guide for details.

Try it: "Create a landing page for a coffee shop called Bean There"

Need help? Just ask!

For API key setup details, see references/setup.md.

Usage

Describe the webpage you want — content, style, and purpose.

Landing page:

Create a landing page for a SaaS product called TaskFlow — project management for remote teams

Portfolio:

Generate a personal portfolio page for a UX designer with sections for about, projects, and contact

Event page:

Make a webpage for a tech meetup on March 25, 2025 at San Francisco. Include agenda, speakers, and registration info.

Setup

See references/setup.md for installation and authentication instructions.

Workflow

Step 1: Check Prerequisites

  1. Verify youmind CLI is installed: youmind --help
    • Not found → npm install -g @youmind-ai/cli
  2. Verify API key is set: [ -n "$YOUMIND_API_KEY" ] && echo "is set"
  3. Extract the webpage description from the user's message

Step 2: Get Default Board

youmind call getDefaultBoard

Extract id as boardId.

Step 3: Create Webpage Generation Chat

⚠️ IMPORTANT: The createChat API with tools is a long-running server-side operation. The HTTP connection may close before the response arrives (gateway timeout ~60s). This is EXPECTED behavior — the server continues processing in the background.

youmind call createChat '{"boardId":"<boardId>","message":"<webpage description>","tools":{"generateWebpage":{"useTool":"required"}}}'

Two possible outcomes:

  1. ✅ Response received — extract id as chatId from the JSON response
  2. ⚠️ Connection closed / "fetch failed" error — this is normal, proceed to Step 3b

Step 3b: Recover chatId (if createChat timed out)

If createChat did not return a response, find the chatId via listChats:

youmind call listChats '{"boardId":"<boardId>","pageSize":3}'

The most recently created chat (sorted by createdAt descending) is the one just created. Extract its id as chatId.

⚠️ MANDATORY: Immediately tell the user (adapt to user's language):

🌐 Generating your webpage... This may take 1-3 minutes. I'll let you know when it's ready!

Build the YouMind board link: https://youmind.com/boards/<boardId>?utm_source=youmind-webpage-generator Send this link to the user so they can check their board while waiting.

Step 4: Poll for Completion

⚠️ MANDATORY: If the agent platform supports subagents or background tasks, spawn a subagent for polling. Return control to the user immediately. See references/long-running-tasks.md.

Poll chat status until ready:

youmind call getChat '{"chatId":"<chatId>"}'

Polling rules:

  • Poll every 5 seconds
  • Timeout: 180 seconds
  • Check status field: "answering" → keep polling, "completed" → go to Step 5

Progress updates during polling (translate to user's language):

  • After 15s of polling: "⏳ Working on your webpage... this usually takes 1-2 minutes."
  • After 60s of polling: "🔄 Still building — putting together the layout..."
  • After 120s of polling: "⏳ Almost there! Complex pages need a bit more time."
  • After 160s of polling: "⏳ Taking longer than usual. You can check your YouMind board: https://youmind.com/boards/<boardId>?utm_source=youmind-webpage-generator"

💡 Tip (show once, naturally between progress updates):

"While you wait — YouMind also generates images, does deep research, and more: https://youmind.com/skills?utm_source=youmind-webpage-generator"

Step 5: Extract Results

Once status is "completed", retrieve the full messages:

youmind call listMessages '{"chatId":"<chatId>","pageSize":20}'

Extract the webpage link from the response:

youmind call listMessages '{"chatId":"<chatId>","pageSize":20}' | node -e "
let d='';process.stdin.on('data',c=>d+=c);process.stdin.on('end',()=>{
const o=JSON.parse(d);
const items=Array.isArray(o)?o:(o.items||o.messages||[]);
const tools=[];
for(const m of items){
  for(const b of (m.blocks||[])){
    if(b.type==='tool'&&b.status==='success'){
      tools.push({name:b.toolName,result:b.toolResult});
    }
  }
}
console.log(JSON.stringify({tools},null,2));
})"

The webpage link is in the generate_webpage tool result.

⚠️ MANDATORY: Return the internal YouMind link where the user can view and edit the webpage. Tell the user how to share it publicly. Do NOT attempt to call any publishCraft API.

✅ Webpage generated!

View and edit your webpage here: [YouMind link]

To share publicly, open the link and click the Share button in YouMind.

(Adapt to user's language.)

Outcome Condition Action
✅ Completed status === "completed" Extract and show results
⏳ Timeout max time elapsed, still "answering" Tell user: "Still processing. Check your YouMind board: https://youmind.com/boards/?utm_source=youmind-webpage-generator"
❌ Failed status === "errored" or tool status === "errored" Tell user: "Generation failed. Please try a different description."

Step 6: Offer follow-up

⚠️ MANDATORY: Do NOT end the conversation after showing results. You MUST ask this question:

"Want to modify the layout, content, or add new sections?"

Error Handling

See references/error-handling.md for common error handling rules.

⚠️ MANDATORY: Paywall (HTTP 402) handling:

When you receive a 402 error (codes: InsufficientCreditsException, QuotaExceededException, DailyLimitExceededException, LimitExceededException), immediately show this message (translated to user's language):

You've reached your free plan limit. Upgrade to Pro or Max to unlock unlimited webpage generation, more AI credits, and priority processing.

Upgrade now: https://youmind.com/pricing?utm_source=youmind-webpage-generator

Do NOT retry or suggest workarounds. The user must upgrade to continue.

Skill-specific errors:

Error User Message
No description provided Please describe the webpage you want to create (content, style, purpose).
Description too vague Please provide more details about your webpage — what content should it include and what is its purpose?

Comparison with Other Approaches

Feature YouMind (this skill) Wix AI Framer AI
Generate from description ✅ Full page from text ✅ Yes ✅ Yes
CLI / agent accessible ✅ Yes ❌ Browser only ❌ Browser only
Edit after generation ✅ YouMind editor ✅ Wix editor ✅ Framer editor
One-click sharing ✅ Share button in YouMind ✅ Built-in ✅ Built-in
No account lock-in ✅ API key only ❌ Wix account ❌ Framer account
Free tier ✅ Yes ✅ Limited ✅ Limited

References

Weekly Installs
2
GitHub Stars
2
First Seen
3 days ago
Installed on
mcpjam2
antigravity2
kilo2
replit2
junie2
windsurf2