{"id":"9373e637-15b3-4ce9-adce-cf7ddd60fe19","slug":"clawhub-binggg-ui-design-guide","name":"界面设计 · UI Design","description":"Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.","canonicalUrl":"https://www.xpersona.co/agent/clawhub-binggg-ui-design-guide","sourceUrl":"https://clawhub.ai/binggg/ui-design-guide","homepage":"https://clawhub.ai/binggg/skills/ui-design-guide","source":"CLAWHUB","vendor":{"slug":"clawhub","label":"Clawhub","url":"https://clawhub.ai/binggg/skills/ui-design-guide"},"protocols":["OPENCLEW"],"capabilities":[],"trustScore":null,"trustConfidence":"unknown","artifactCount":0,"benchmarkCount":0,"lastRelease":"1.18.55","freshnessAt":"2026-10-09T04:19:49.582Z","freshnessLabel":"Oct 9, 2026","securityReviewed":true,"openapiReady":false,"stats":[{"label":"Trust score","value":"Unknown"},{"label":"Compatibility","value":"OpenClaw"},{"label":"Freshness","value":"Oct 9, 2026"},{"label":"Vendor","value":"Clawhub"},{"label":"Artifacts","value":"0"},{"label":"Benchmarks","value":"0"},{"label":"Last release","value":"1.18.55"}],"factsPreview":[{"factKey":"vendor","category":"vendor","label":"Vendor","value":"Clawhub","href":"https://clawhub.ai/binggg/skills/ui-design-guide","sourceUrl":"https://clawhub.ai/binggg/skills/ui-design-guide","sourceType":"profile","confidence":"medium","observedAt":"2026-10-09T04:19:49.582Z","isPublic":true},{"factKey":"protocols","category":"compatibility","label":"Protocol compatibility","value":"OpenClaw","href":"https://www.xpersona.co/api/v1/agents/clawhub-binggg-ui-design-guide/contract","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-binggg-ui-design-guide/contract","sourceType":"contract","confidence":"medium","observedAt":"2026-10-09T04:19:49.582Z","isPublic":true},{"factKey":"traction","category":"adoption","label":"Adoption signal","value":"5.2K downloads","href":"https://clawhub.ai/binggg/ui-design-guide","sourceUrl":"https://clawhub.ai/binggg/ui-design-guide","sourceType":"profile","confidence":"medium","observedAt":"2026-10-09T04:19:49.582Z","isPublic":true},{"factKey":"latest_release","category":"release","label":"Latest release","value":"1.18.55","href":"https://clawhub.ai/binggg/ui-design-guide","sourceUrl":"https://clawhub.ai/binggg/ui-design-guide","sourceType":"release","confidence":"medium","observedAt":"2026-09-30T13:45:46.392Z","isPublic":true},{"factKey":"handshake_status","category":"security","label":"Handshake status","value":"UNKNOWN","href":"https://www.xpersona.co/api/v1/agents/clawhub-binggg-ui-design-guide/trust","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-binggg-ui-design-guide/trust","sourceType":"trust","confidence":"medium","observedAt":null,"isPublic":true}],"highlights":["5.2K downloads","Trust evidence available"],"agentCard":{"name":"界面设计 · UI Design","description":"Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.","source":"CLAWHUB","sourceId":"clawhub:s17cgdbxp195f7dy8f5h6p0d9183h6nq:ui-design-guide","homepage":"https://clawhub.ai/binggg/skills/ui-design-guide","repository":"https://clawhub.ai/binggg/ui-design-guide","documentation":"https://www.xpersona.co/agent/clawhub-binggg-ui-design-guide","protocols":["OPENCLEW"],"examples":[{"kind":"example","language":"text","snippet":"DESIGN SPECIFICATION\n====================\n1. Purpose Statement: [2-3 sentences about problem/users/context]\n2. Aesthetic Direction: [Choose ONE from list below, FORBIDDEN: \"modern\", \"clean\", \"simple\"]\n3. Color Palette: [List 3-5 specific colors with hex codes]\n   ❌ FORBIDDEN COLORS: purple (#800080-#9370DB), violet (#8B00FF-#EE82EE), indigo (#4B0082-#6610F2), fuchsia (#FF00FF-#FF77FF), blue-purple gradients\n4. Typography: [Specify exact font names]\n   ❌ FORBIDDEN FONTS: Inter, Roboto, Arial, Helvetica, system-ui, -apple-system\n5. Layout Strategy: [Describe specific asymmetric/diagonal/overlapping approach]\n   ❌ FORBIDDEN: Standard centered layouts, simple grid without creative breaking"},{"kind":"example","language":"tsx","snippet":"// ❌ BAD: Forbidden purple gradient\nclassName=\"bg-gradient-to-r from-violet-600 to-fuchsia-600\"\nclassName=\"bg-gradient-to-br from-purple-500 to-indigo-600\"\n\n// ✅ GOOD: Context-specific alternatives\nclassName=\"bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50\" // Warm editorial\nclassName=\"bg-gradient-to-tr from-emerald-900 to-teal-700\" // Dark organic\nclassName=\"bg-[#FF6B35] to-[#F7931E]\" // Bold retro-futuristic\n\n// ❌ BAD: Generic centered card layout\n<div className=\"flex items-center justify-center min-h-screen\">\n  <div className=\"bg-white rounded-lg shadow-lg p-8\">\n\n// ✅ GOOD: Asymmetric layout with creative positioning\n<div className=\"grid grid-cols-12 min-h-screen\">\n  <div className=\"col-span-7 col-start-2 pt-24\">\n\n// ❌ BAD: System fonts\nfont-family: 'Inter', system-ui, sans-serif\nfont-family: 'Roboto', -apple-system, sans-serif\n\n// ✅ GOOD: Distinctive fonts\nfont-family: 'Playfair Display', serif // Editorial\nfont-family: 'Space Mono', monospace // Brutalist\nfont-family: 'DM Serif Display', serif // Luxury\n\n// ❌ BAD: Emoji icons\n<span>🚀</span>\n<button>⭐ Favorite</button>\n\n// ✅ GOOD: Professional icon libraries\n<i className=\"fas fa-rocket\"></i> // FontAwesome\n<svg className=\"w-5 h-5\">...</svg> // Heroicons"}]}}