LogoClawIndex
CasesSkillsAbout
LogoClawIndex

ui-designer - UI design workflow for React and Tailwind CSS projects.

Generates runnable React, Tailwind CSS, and React Router design projects with page routing, dialogs, and asset viewers from user descriptions.

Tags

Updated: 2026-09-19
ui-designreacttailwind-cssreact-routerdesign-systemprototyping

Capabilities

Collect design requirementsGenerate project configuration filesGenerate Design TokensCreate SVG icon components

Typical Inputs

UI design descriptionTarget platform specificationStyle and brand preferences

Typical Outputs

Project configuration filesDesign Token CSS filesSVG icon component files

What this skill does

  • Collect design requirements
  • Generate project configuration files
  • Generate Design Tokens
  • Create SVG icon components
  • Generate React UI components
  • Create page blueprints
  • Generate page components and routes
  • Create asset viewer container
  • Inspect project quality checklist
  • Export multi platform component code

Inputs

  • UI design description
  • Target platform specification
  • Style and brand preferences
  • Design reference specifications

Outputs

  • Project configuration files
  • Design Token CSS files
  • SVG icon component files
  • React UI component files
  • Page blueprint JSON files
  • React page component files
  • React Router setup
  • Asset viewer components
  • Exported target platform code

Requirements

  • Node.js runtime environment
  • npm package manager
  • vscode_askQuestions tool support

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.