LogoClawIndex
CasesSkillsAbout
LogoClawIndex

ui-setup - Design System Setup Wizard

Guides users step-by-step to configure the design system, colors, fonts, and scaffold the first page for a project.

Tags

Updated: 2026-09-18
design-systemsetup-wizardui-configstyleseedtheme

Capabilities

Select application type and composition recipeConfigure brand colors and dark modeFetch and apply external design conceptsConfigure project typography and font imports

Typical Inputs

App type selectionBrand color selection or hex codeDesign concept preference

Typical Outputs

css/theme.csscss/fonts.csscss/base.css

What this skill does

  • Select application type and composition recipe
  • Configure brand colors and dark mode
  • Fetch and apply external design concepts
  • Configure project typography and font imports
  • Scaffold initial main application page
  • Generate STYLESEED.md design lock file

Inputs

  • App type selection
  • Brand color selection or hex code
  • Design concept preference
  • Font preference
  • App name and main page description
  • DESIGN.md content from external repository

Outputs

  • css/theme.css
  • css/fonts.css
  • css/base.css
  • src/app/App.tsx
  • STYLESEED.md
  • Setup summary message

Requirements

  • React stack
  • Tailwind CSS v4
  • Unconfigured StyleSeed project

Source

  • Spec: SKILL.md

ClawIndex

OpenClaw Skills & Use Case Index

ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

Index

Skills·
Cases

Meta

About·
Disclaimer·
Email·
GitHub
© 2026 ClawIndex All Rights Reserved.