#ssg-fallback{display:block!important;max-width:960px;margin:0 auto;padding:24px 20px;font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:#2a2420;background:#fdfaf4} #ssg-fallback a{color:#c0522a;text-decoration:none} #ssg-fallback a:hover{text-decoration:underline} #ssg-fallback h1{font-size:1.85rem;line-height:1.25;margin:18px 0 12px;color:#1f1915} #ssg-fallback .lead{font-size:1.02rem;color:#5a4a3c;margin:0 0 16px} #ssg-fallback .desc{color:#6b5344;margin:0 0 18px} #ssg-fallback .site-nav ul{list-style:none;padding:0;margin:0 0 20px;display:flex;gap:18px;flex-wrap:wrap;font-size:.92rem;font-weight:500} #ssg-fallback nav.breadcrumb ol{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px;font-size:.85rem;color:#8a7665} #ssg-fallback nav.breadcrumb li:not(:last-child)::after{content:" ›";margin-left:6px;color:#c2af98} #ssg-fallback section.related{margin-top:22px;padding-top:16px;border-top:1px solid #eadfce} #ssg-fallback section.related h2{font-size:1rem;color:#6b5344;margin:0 0 10px;font-weight:600} #ssg-fallback section.related ul{list-style:disc;padding-left:20px;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 16px} #ssg-fallback section.related li{font-size:.9rem;line-height:1.45} #ssg-fallback section.related a{color:#2b5fa8} #ssg-fallback .lang-switcher{margin-top:22px;padding-top:16px;border-top:1px solid #eadfce;font-size:.82rem;color:#8a7665} #ssg-fallback .lang-switcher a{margin-right:14px;color:#6b5344}

UI Design System | skill guide | OpenClaw Study

Standard design system for all agent dashboards and web UIs. Use this when building any new dashboard, tool interface, or web page for the hub.

Standard design system for all agent dashboards and web UIs. Use this when building any new dashboard, tool interface, or web page for the hub.

This page belongs to the OpenClaw Skills learning hub with install guides, category navigation, and practical links.

简体中文繁體中文日本語 Español Português