{
  "schemaVersion": "1.0",
  "item": {
    "slug": "ui-ux-dev",
    "name": "UI/UX Design and Development",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/wing8169/ui-ux-dev",
    "canonicalUrl": "https://clawhub.ai/wing8169/ui-ux-dev",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/ui-ux-dev",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-ux-dev",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "scripts/setup.sh",
      "scripts/screenshot.sh",
      "scripts/convert-image.sh"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "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."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "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."
        },
        {
          "label": "Upgrade existing",
          "body": "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."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/ui-ux-dev"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/ui-ux-dev",
    "agentPageUrl": "https://openagent3.xyz/skills/ui-ux-dev/agent",
    "manifestUrl": "https://openagent3.xyz/skills/ui-ux-dev/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/ui-ux-dev/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "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."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "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."
      },
      {
        "label": "Upgrade existing",
        "body": "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."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "UI Designer",
        "body": "Generate production-quality React pages from natural language, serve live, iterate until satisfied."
      },
      {
        "title": "Setup",
        "body": "Check TOOLS.md for ### UI Designer config. If missing, run first-time setup:\n\nAsk user which port (default: 5174)\nRun: bash scripts/setup.sh <port>\nSave config to TOOLS.md"
      },
      {
        "title": "Project Structure",
        "body": "<serve_dir>/\n├── project-a/\n│   ├── project.json       (config: name, preferences, design system, pages)\n│   ├── assets/             (images, converted to .webp)\n│   ├── landing/index.html  (React page via CDN)\n│   └── about/index.html"
      },
      {
        "title": "React Page Template (CDN, no build step)",
        "body": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Page Title</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script src=\"https://unpkg.com/react@18/umd/react.production.min.js\"></script>\n  <script src=\"https://unpkg.com/react-dom@18/umd/react-dom.production.min.js\"></script>\n  <script src=\"https://unpkg.com/@babel/standalone/babel.min.js\"></script>\n</head>\n<body>\n  <div id=\"root\"></div>\n  <script type=\"text/babel\">\n    function App() { return <div>...</div>; }\n    ReactDOM.createRoot(document.getElementById('root')).render(<App />);\n  </script>\n</body>\n</html>"
      },
      {
        "title": "Workflow",
        "body": "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."
      },
      {
        "title": "Step 1: Project Name",
        "body": "Ask: \"What's the project name?\"\n\nIf <serve_dir>/<project>/ exists: read project.json, show current setup and existing pages, ask if amending or adding\nIf new: create directory + project.json\n→ Message user: \"Project created / loaded ✓\""
      },
      {
        "title": "Step 2: Preferences (new or amending)",
        "body": "Ask about design preferences (style, font, colors, brand assets).\nSave to project.json.\n\n→ Message user: \"Preferences saved ✓\""
      },
      {
        "title": "Step 3: Page Slug",
        "body": "Ask: \"What slug for this page?\"\n\nCheck if exists → ask to overwrite or new\n→ Message user: \"Slug confirmed: /<slug> ✓\""
      },
      {
        "title": "Step 4: Design Details & Design System",
        "body": "Ask about page content + design system (see Design Principles below).\nUpdate project.json with design system details.\n\n→ Message user: \"Got it, generating now...\""
      },
      {
        "title": "Step 5: Generate",
        "body": "Generate the React page. Apply Design Principles strictly.\n\n→ Message user: \"HTML generated, running visual review...\""
      },
      {
        "title": "Step 6: Screenshot Review Loop",
        "body": "bash scripts/screenshot.sh \"http://localhost:<port>/<project>/<slug>/\" /tmp/<slug>-review.png 1400 900\n\nAnalyze with image tool. Fix issues. Re-screenshot. Also check mobile (width=390).\n\n→ Message user: \"Review done, sending preview...\"\n\nDo at least one desktop + one mobile review pass before sharing."
      },
      {
        "title": "Step 7: Share and Iterate",
        "body": "Send live URL + screenshot to user.\nAsk for feedback. Apply changes → re-screenshot → share. Repeat.\n\n→ Keep user informed at every iteration step"
      },
      {
        "title": "Step 8: Media Assets",
        "body": "If user provides images:\n\nSave to <project>/assets/\nConvert to .webp: bash scripts/convert-image.sh <input> <output.webp> [quality]\nReference in HTML as ../assets/filename.webp\n\n→ Message user: \"Image converted: 1.2MB → 340KB (72% smaller) ✓\""
      },
      {
        "title": "Step 9: Export",
        "body": "Zip the project folder and send:\n\ncd <serve_dir> && zip -r /tmp/<project>.zip <project>/\n\nSend zip via message tool with filePath. The CDN-based React pages work standalone — just open index.html or serve with any static server."
      },
      {
        "title": "Image Handling",
        "body": "Convert all user-provided images to .webp for performance:\n\nbash scripts/convert-image.sh input.png output.webp 80\n\nDefault quality: 80 (good balance of quality/size)\nFor hero/banner images: quality 85\nFor thumbnails/icons: quality 70\nAlways report compression savings to user\n\nFor placeholder images during prototyping:\n\nPhotos: https://picsum.photos/seed/<name>/<width>/<height>\nSolid placeholders: https://placehold.co/<width>x<height>/<bg>/<text>"
      },
      {
        "title": "Design Principles",
        "body": "Apply these consistently to every generated page. These are non-negotiable quality standards."
      },
      {
        "title": "Layout & Spacing",
        "body": "Use consistent spacing scale — stick to Tailwind's scale (4, 6, 8, 12, 16, 20, 24). Don't mix random values.\nMax content width — always constrain content (max-w-5xl or max-w-6xl). Never let text run full-width.\nVertical rhythm — consistent gaps between sections (py-16 for sections, py-8 for subsections).\nPadding on mobile — minimum px-4 on all containers. Text must never touch screen edges."
      },
      {
        "title": "Typography",
        "body": "Clear hierarchy — h1 largest, then h2, h3. Max 3-4 font sizes per page.\nLine length — max 65-75 characters per line for readability. Use max-w-prose or max-w-2xl on text blocks.\nFont weight contrast — bold for headings (font-bold/font-semibold), regular for body.\nText color hierarchy — white for headings, gray-300 for body, gray-500 for muted/secondary."
      },
      {
        "title": "Color & Contrast",
        "body": "WCAG AA minimum — text must have 4.5:1 contrast against background.\nLimit palette — max 1 primary color + 1 accent + neutrals. Don't rainbow.\nConsistent accent usage — primary color for CTAs, links, active states only. Don't overuse.\nDark backgrounds — use layered darkness (bg-900 → bg-800 → bg-700) for depth, not flat black."
      },
      {
        "title": "Responsive Design",
        "body": "Mobile-first — design for 390px first, enhance for larger screens.\nBreakpoints — use sm: (640px), md: (768px), lg: (1024px). Test all three.\nTouch targets — buttons/links min 44x44px on mobile.\nStack on mobile — grids collapse to single column. Never horizontal scroll for content.\nNavigation — hamburger menu on mobile with slide-down panel. Always include."
      },
      {
        "title": "Components & Interactions",
        "body": "Icons — always use SVG, never emoji (emoji break in headless browsers and render inconsistently).\nButtons — clear hover states (color shift + slight scale or shadow). Consistent border-radius.\nCards — subtle border (border-white/5 or border-dark-600), slight bg difference from page bg.\nTransitions — add transition class to all interactive elements. Duration 150-200ms.\nFocus states — all interactive elements must have visible focus rings for accessibility."
      },
      {
        "title": "Images & Performance",
        "body": "All images in .webp — convert user images with scripts/convert-image.sh.\nLazy loading — add loading=\"lazy\" to images below the fold.\nAspect ratios — use aspect-video or aspect-square classes to prevent layout shift.\nAlt text — every image needs descriptive alt text."
      },
      {
        "title": "Code Quality",
        "body": "Semantic HTML — use header, main, section, footer, nav. Not div soup.\nNo Lorem ipsum — always use contextually relevant placeholder text.\nReact components — break UI into logical components (Navbar, Hero, Features, etc.).\nState management — use useState for interactive elements (tabs, modals, dropdowns)."
      },
      {
        "title": "Common Mistakes to Avoid",
        "body": "❌ Text touching screen edges on mobile\n❌ Emoji for icons (use SVG)\n❌ Flat black backgrounds (use layered darks)\n❌ No hover states on clickable elements\n❌ Inconsistent border-radius across elements\n❌ Giant font sizes that overflow on mobile\n❌ Missing meta viewport tag\n❌ Forgetting hamburger menu on mobile"
      }
    ],
    "body": "UI Designer\n\nGenerate production-quality React pages from natural language, serve live, iterate until satisfied.\n\nSetup\n\nCheck TOOLS.md for ### UI Designer config. If missing, run first-time setup:\n\nAsk user which port (default: 5174)\nRun: bash scripts/setup.sh <port>\nSave config to TOOLS.md\nProject Structure\n<serve_dir>/\n├── project-a/\n│   ├── project.json       (config: name, preferences, design system, pages)\n│   ├── assets/             (images, converted to .webp)\n│   ├── landing/index.html  (React page via CDN)\n│   └── about/index.html\n\nReact Page Template (CDN, no build step)\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Page Title</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script src=\"https://unpkg.com/react@18/umd/react.production.min.js\"></script>\n  <script src=\"https://unpkg.com/react-dom@18/umd/react-dom.production.min.js\"></script>\n  <script src=\"https://unpkg.com/@babel/standalone/babel.min.js\"></script>\n</head>\n<body>\n  <div id=\"root\"></div>\n  <script type=\"text/babel\">\n    function App() { return <div>...</div>; }\n    ReactDOM.createRoot(document.getElementById('root')).render(<App />);\n  </script>\n</body>\n</html>\n\nWorkflow\n\nCritical: 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.\n\nStep 1: Project Name\n\nAsk: \"What's the project name?\"\n\nIf <serve_dir>/<project>/ exists: read project.json, show current setup and existing pages, ask if amending or adding\nIf new: create directory + project.json\n→ Message user: \"Project created / loaded ✓\"\nStep 2: Preferences (new or amending)\n\nAsk about design preferences (style, font, colors, brand assets). Save to project.json.\n\n→ Message user: \"Preferences saved ✓\"\nStep 3: Page Slug\n\nAsk: \"What slug for this page?\"\n\nCheck if exists → ask to overwrite or new\n→ Message user: \"Slug confirmed: /<slug> ✓\"\nStep 4: Design Details & Design System\n\nAsk about page content + design system (see Design Principles below). Update project.json with design system details.\n\n→ Message user: \"Got it, generating now...\"\nStep 5: Generate\n\nGenerate the React page. Apply Design Principles strictly.\n\n→ Message user: \"HTML generated, running visual review...\"\nStep 6: Screenshot Review Loop\nbash scripts/screenshot.sh \"http://localhost:<port>/<project>/<slug>/\" /tmp/<slug>-review.png 1400 900\n\n\nAnalyze with image tool. Fix issues. Re-screenshot. Also check mobile (width=390).\n\n→ Message user: \"Review done, sending preview...\"\n\nDo at least one desktop + one mobile review pass before sharing.\n\nStep 7: Share and Iterate\n\nSend live URL + screenshot to user. Ask for feedback. Apply changes → re-screenshot → share. Repeat.\n\n→ Keep user informed at every iteration step\nStep 8: Media Assets\n\nIf user provides images:\n\nSave to <project>/assets/\nConvert to .webp: bash scripts/convert-image.sh <input> <output.webp> [quality]\nReference in HTML as ../assets/filename.webp\n→ Message user: \"Image converted: 1.2MB → 340KB (72% smaller) ✓\"\nStep 9: Export\n\nZip the project folder and send:\n\ncd <serve_dir> && zip -r /tmp/<project>.zip <project>/\n\n\nSend zip via message tool with filePath. The CDN-based React pages work standalone — just open index.html or serve with any static server.\n\nImage Handling\n\nConvert all user-provided images to .webp for performance:\n\nbash scripts/convert-image.sh input.png output.webp 80\n\nDefault quality: 80 (good balance of quality/size)\nFor hero/banner images: quality 85\nFor thumbnails/icons: quality 70\nAlways report compression savings to user\n\nFor placeholder images during prototyping:\n\nPhotos: https://picsum.photos/seed/<name>/<width>/<height>\nSolid placeholders: https://placehold.co/<width>x<height>/<bg>/<text>\nDesign Principles\n\nApply these consistently to every generated page. These are non-negotiable quality standards.\n\nLayout & Spacing\nUse consistent spacing scale — stick to Tailwind's scale (4, 6, 8, 12, 16, 20, 24). Don't mix random values.\nMax content width — always constrain content (max-w-5xl or max-w-6xl). Never let text run full-width.\nVertical rhythm — consistent gaps between sections (py-16 for sections, py-8 for subsections).\nPadding on mobile — minimum px-4 on all containers. Text must never touch screen edges.\nTypography\nClear hierarchy — h1 largest, then h2, h3. Max 3-4 font sizes per page.\nLine length — max 65-75 characters per line for readability. Use max-w-prose or max-w-2xl on text blocks.\nFont weight contrast — bold for headings (font-bold/font-semibold), regular for body.\nText color hierarchy — white for headings, gray-300 for body, gray-500 for muted/secondary.\nColor & Contrast\nWCAG AA minimum — text must have 4.5:1 contrast against background.\nLimit palette — max 1 primary color + 1 accent + neutrals. Don't rainbow.\nConsistent accent usage — primary color for CTAs, links, active states only. Don't overuse.\nDark backgrounds — use layered darkness (bg-900 → bg-800 → bg-700) for depth, not flat black.\nResponsive Design\nMobile-first — design for 390px first, enhance for larger screens.\nBreakpoints — use sm: (640px), md: (768px), lg: (1024px). Test all three.\nTouch targets — buttons/links min 44x44px on mobile.\nStack on mobile — grids collapse to single column. Never horizontal scroll for content.\nNavigation — hamburger menu on mobile with slide-down panel. Always include.\nComponents & Interactions\nIcons — always use SVG, never emoji (emoji break in headless browsers and render inconsistently).\nButtons — clear hover states (color shift + slight scale or shadow). Consistent border-radius.\nCards — subtle border (border-white/5 or border-dark-600), slight bg difference from page bg.\nTransitions — add transition class to all interactive elements. Duration 150-200ms.\nFocus states — all interactive elements must have visible focus rings for accessibility.\nImages & Performance\nAll images in .webp — convert user images with scripts/convert-image.sh.\nLazy loading — add loading=\"lazy\" to images below the fold.\nAspect ratios — use aspect-video or aspect-square classes to prevent layout shift.\nAlt text — every image needs descriptive alt text.\nCode Quality\nSemantic HTML — use header, main, section, footer, nav. Not div soup.\nNo Lorem ipsum — always use contextually relevant placeholder text.\nReact components — break UI into logical components (Navbar, Hero, Features, etc.).\nState management — use useState for interactive elements (tabs, modals, dropdowns).\nCommon Mistakes to Avoid\n❌ Text touching screen edges on mobile\n❌ Emoji for icons (use SVG)\n❌ Flat black backgrounds (use layered darks)\n❌ No hover states on clickable elements\n❌ Inconsistent border-radius across elements\n❌ Giant font sizes that overflow on mobile\n❌ Missing meta viewport tag\n❌ Forgetting hamburger menu on mobile"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/wing8169/ui-ux-dev",
    "publisherUrl": "https://clawhub.ai/wing8169/ui-ux-dev",
    "owner": "wing8169",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/ui-ux-dev",
    "downloadUrl": "https://openagent3.xyz/downloads/ui-ux-dev",
    "agentUrl": "https://openagent3.xyz/skills/ui-ux-dev/agent",
    "manifestUrl": "https://openagent3.xyz/skills/ui-ux-dev/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/ui-ux-dev/agent.md"
  }
}