Tencent SkillHub · AI

UI/UX Design and Development

Generate and serve live HTML/CSS/JS UI designs from natural language prompts. Use when the user asks to design, create, build, or prototype a website, landing page, UI, dashboard, web page, or frontend mockup. Also triggers on requests to update, tweak, or iterate on a previously generated design. Replaces traditional UI design + frontend dev workflow.

skill openclawclawhub Free

0 Downloads

0 Stars

0 Installs

0 Score

High Signal

⬇ 0 downloads ★ 0 stars Unverified but indexed

Install for OpenClaw

Quick setup

Download the package from Yavira.
Extract the archive and review SKILL.md first.
Import or place the package into your OpenClaw setup.

Requirements

Target platform: OpenClaw
Install method: Manual import
Extraction: Extract archive
Prerequisites: OpenClaw
Primary doc: SKILL.md

Package facts

Download mode: Yavira redirect
Package format: ZIP package
Source platform: Tencent SkillHub
What's included: SKILL.md, scripts/setup.sh, scripts/screenshot.sh, scripts/convert-image.sh

Validation

Use the Yavira download entry.
Review SKILL.md after the package is downloaded.
Confirm the extracted package contains the expected setup assets.

Install with your agent

Agent handoff

Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.

Download the package from Yavira.
Extract it into a folder your agent can access.
Paste one of the prompts below and point your agent at the extracted folder.

New install

I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.

Upgrade existing

I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.

Open Send to Agent page Open JSON manifest Open Markdown brief

Trust & source

Release facts

Source: Tencent SkillHub
Verification: Indexed source record
Version: 1.0.0

Provenance

Publisher: wing8169
Source page: View original listing
Canonical URL: Open canonical page

Documentation

ClawHub primary doc Primary doc: SKILL.md 24 sections Open source page

UI Designer

Generate production-quality React pages from natural language, serve live, iterate until satisfied.

Setup

Check TOOLS.md for ### UI Designer config. If missing, run first-time setup: Ask user which port (default: 5174) Run: bash scripts/setup.sh <port> Save config to TOOLS.md

Project Structure

<serve_dir>/ ├── project-a/ │ ├── project.json (config: name, preferences, design system, pages) │ ├── assets/ (images, converted to .webp) │ ├── landing/index.html (React page via CDN) │ └── about/index.html

React Page Template (CDN, no build step)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> function App() { return <div>...</div>; } ReactDOM.createRoot(document.getElementById('root')).render(<App />); </script> </body> </html>

Workflow

Critical: Message the user at EVERY action — not just milestones. If you're reading a file, say "Reading project config...". If you're writing HTML, say "Writing bounty page...". If you're taking a screenshot, say "Taking screenshot...". The user should never wonder what you're doing. Treat it like a live build log.

Step 1: Project Name

Ask: "What's the project name?" If <serve_dir>/<project>/ exists: read project.json, show current setup and existing pages, ask if amending or adding If new: create directory + project.json → Message user: "Project created / loaded ✓"

Step 2: Preferences (new or amending)

Ask about design preferences (style, font, colors, brand assets). Save to project.json. → Message user: "Preferences saved ✓"

Step 3: Page Slug

Ask: "What slug for this page?" Check if exists → ask to overwrite or new → Message user: "Slug confirmed: /<slug> ✓"

Step 4: Design Details & Design System

Ask about page content + design system (see Design Principles below). Update project.json with design system details. → Message user: "Got it, generating now..."

Step 5: Generate

Generate the React page. Apply Design Principles strictly. → Message user: "HTML generated, running visual review..."

Step 6: Screenshot Review Loop

bash scripts/screenshot.sh "http://localhost:<port>/<project>/<slug>/" /tmp/<slug>-review.png 1400 900 Analyze with image tool. Fix issues. Re-screenshot. Also check mobile (width=390). → Message user: "Review done, sending preview..." Do at least one desktop + one mobile review pass before sharing.

Step 7: Share and Iterate

Send live URL + screenshot to user. Ask for feedback. Apply changes → re-screenshot → share. Repeat. → Keep user informed at every iteration step

Step 8: Media Assets

If user provides images: Save to <project>/assets/ Convert to .webp: bash scripts/convert-image.sh <input> <output.webp> [quality] Reference in HTML as ../assets/filename.webp → Message user: "Image converted: 1.2MB → 340KB (72% smaller) ✓"

Step 9: Export

Zip the project folder and send: cd <serve_dir> && zip -r /tmp/<project>.zip <project>/ Send zip via message tool with filePath. The CDN-based React pages work standalone — just open index.html or serve with any static server.

Image Handling

Convert all user-provided images to .webp for performance: bash scripts/convert-image.sh input.png output.webp 80 Default quality: 80 (good balance of quality/size) For hero/banner images: quality 85 For thumbnails/icons: quality 70 Always report compression savings to user For placeholder images during prototyping: Photos: https://picsum.photos/seed/<name>/<width>/<height> Solid placeholders: https://placehold.co/<width>x<height>/<bg>/<text>

Design Principles

Apply these consistently to every generated page. These are non-negotiable quality standards.

Layout & Spacing

Use consistent spacing scale — stick to Tailwind's scale (4, 6, 8, 12, 16, 20, 24). Don't mix random values. Max content width — always constrain content (max-w-5xl or max-w-6xl). Never let text run full-width. Vertical rhythm — consistent gaps between sections (py-16 for sections, py-8 for subsections). Padding on mobile — minimum px-4 on all containers. Text must never touch screen edges.

Typography

Clear hierarchy — h1 largest, then h2, h3. Max 3-4 font sizes per page. Line length — max 65-75 characters per line for readability. Use max-w-prose or max-w-2xl on text blocks. Font weight contrast — bold for headings (font-bold/font-semibold), regular for body. Text color hierarchy — white for headings, gray-300 for body, gray-500 for muted/secondary.

Color & Contrast

WCAG AA minimum — text must have 4.5:1 contrast against background. Limit palette — max 1 primary color + 1 accent + neutrals. Don't rainbow. Consistent accent usage — primary color for CTAs, links, active states only. Don't overuse. Dark backgrounds — use layered darkness (bg-900 → bg-800 → bg-700) for depth, not flat black.

Responsive Design

Mobile-first — design for 390px first, enhance for larger screens. Breakpoints — use sm: (640px), md: (768px), lg: (1024px). Test all three. Touch targets — buttons/links min 44x44px on mobile. Stack on mobile — grids collapse to single column. Never horizontal scroll for content. Navigation — hamburger menu on mobile with slide-down panel. Always include.

Components & Interactions

Icons — always use SVG, never emoji (emoji break in headless browsers and render inconsistently). Buttons — clear hover states (color shift + slight scale or shadow). Consistent border-radius. Cards — subtle border (border-white/5 or border-dark-600), slight bg difference from page bg. Transitions — add transition class to all interactive elements. Duration 150-200ms. Focus states — all interactive elements must have visible focus rings for accessibility.

Images & Performance

All images in .webp — convert user images with scripts/convert-image.sh. Lazy loading — add loading="lazy" to images below the fold. Aspect ratios — use aspect-video or aspect-square classes to prevent layout shift. Alt text — every image needs descriptive alt text.

Code Quality

Semantic HTML — use header, main, section, footer, nav. Not div soup. No Lorem ipsum — always use contextually relevant placeholder text. React components — break UI into logical components (Navbar, Hero, Features, etc.). State management — use useState for interactive elements (tabs, modals, dropdowns).

Common Mistakes to Avoid

❌ Text touching screen edges on mobile ❌ Emoji for icons (use SVG) ❌ Flat black backgrounds (use layered darks) ❌ No hover states on clickable elements ❌ Inconsistent border-radius across elements ❌ Giant font sizes that overflow on mobile ❌ Missing meta viewport tag ❌ Forgetting hamburger menu on mobile

Category context

Agent frameworks, memory systems, reasoning layers, and model-native orchestration.

Source: Tencent SkillHub

Largest current source with strong distribution and engagement signals.

Package contents

Included in package

3 Scripts1 Docs

SKILL.md Primary doc
scripts/convert-image.sh Scripts
scripts/screenshot.sh Scripts
scripts/setup.sh Scripts