ClawHub

UI Designer

v1.0.5

Design and improve UI components and systems with pixel-perfect, accessible, scalable designs including tokens, libraries, theming, and handoff specs.

⭐ 0· 169·0 current·0 all-time
byTyroneMok@tyronecoh

Install

OpenClaw Prompt Flow

Install with OpenClaw

Best for remote or guided setup. Copy the exact prompt, then paste it into OpenClaw for tyronecoh/ui-designer-tm.

Previewing Install & Setup.
Prompt PreviewInstall & Setup
Install the skill "UI Designer" (tyronecoh/ui-designer-tm) from ClawHub.
Skill page: https://clawhub.ai/tyronecoh/ui-designer-tm
Keep the work scoped to this skill only.
After install, inspect the skill metadata and help me finish setup.
Use only the metadata you can verify from ClawHub; do not invent missing requirements.
Ask before making any broader environment changes.

Command Line

CLI Commands

Use the direct CLI path if you want to install manually and keep every step visible.

OpenClaw CLI

Bare skill slug

openclaw skills install ui-designer-tm

ClawHub CLI

Package manager switcher

npx clawhub@latest install ui-designer-tm
Security Scan
VirusTotalVirusTotal
Benign
View report →
OpenClawOpenClaw
Benign
high confidence
ℹ
Purpose & Capability
Name/description (UI design, tokens, components, accessibility) match the included SKILL.md and reference files; all required artifacts (tokens, component patterns, accessibility checklist) are present. Note: the package has no homepage or external source URL, so provenance is unknown even though the content itself is coherent.
✓
Instruction Scope
SKILL.md contains high-level, deterministic design instructions and references to local markdown files. It does not instruct the agent to read arbitrary system files, access environment variables, network endpoints, or exfiltrate data.
✓
Install Mechanism
No install spec and no code files — instruction-only skill. Nothing will be downloaded or written to disk as part of installation.
✓
Credentials
The skill declares no required environment variables, binaries, credentials, or config paths. The content operates entirely on design guidance and copy/paste-ready CSS — credential requests would be disproportionate but none are present.
✓
Persistence & Privilege
always is false and model invocation is allowed (the platform default). There is no request for permanent presence or modification of other skills or system settings.
Assessment
This skill appears coherent and low-risk: it is instruction-only and requests no credentials or installs. Before using it in production, verify provenance (no homepage/source provided), inspect any generated code before copying into your codebase, check licensing for referenced fonts/assets (e.g., Inter, JetBrains Mono), and run your usual accessibility and security tests on generated output. If you require stronger assurance about origin, ask the publisher for a source repository or official homepage.

Like a lobster shell, security has layers — review code before you run it.

accessibilityvk979xr2txscecj3m5jz5zwek7h84f22jcssvk979xr2txscecj3m5jz5zwek7h84f22jdesign-systemvk979xr2txscecj3m5jz5zwek7h84f22jfrontendvk979xr2txscecj3m5jz5zwek7h84f22jlatestvk979xr2txscecj3m5jz5zwek7h84f22jresponsivevk979xr2txscecj3m5jz5zwek7h84f22juivk979xr2txscecj3m5jz5zwek7h84f22jweb devvk979xr2txscecj3m5jz5zwek7h84f22j
169downloads
0stars
7versions
Updated 2w ago
v1.0.5
MIT-0
TyroneMok@tyronecoh
accessibilitycssdesign-systemfrontendlatestresponsiveuiweb dev
Download

UI Designer

Expert UI designer specializing in visual design systems, component libraries, and pixel-perfect interface creation.

Core Workflow

  1. Understand the request — identify what interface, component, or system needs designing
  2. Establish design tokens — define color, typography, spacing, shadow, and transition tokens first
  3. Build component foundations — create reusable base components before individual screens
  4. Apply accessibility — ensure WCAG AA minimum compliance in all designs
  5. Document交付 — provide clear specs and usage guidelines

Design Token System

Start every UI project with a token system. Use the token structure in references/design-tokens.md as a starting base and customize for the brand.

Key token categories:

  • Color — primary, secondary, semantic (success/warning/error/info), with light/dark variants
  • Typography — font families, size scale, line-height, font-weight
  • Spacing — 4px base scale (0.25rem increments)
  • Shadow — sm, md, lg for elevation levels
  • Transition — fast (150ms), normal (300ms), slow (500ms)

Component Design Principles

  • Design for scalability and consistency across the entire product ecosystem
  • Build accessibility into the foundation rather than adding it later
  • Create reusable patterns that prevent design debt
  • Consider loading states and progressive enhancement in all designs
  • Optimize for CSS efficiency — reduce render time, avoid expensive selectors
  • Balance visual richness with technical constraints

Accessibility Requirements

All designs must include WCAG AA minimum compliance:

  • Color contrast ratios (4.5:1 for normal text, 3:1 for large text)
  • Focus indicators for interactive elements
  • Semantic HTML structure
  • ARIA labels where visual cues are insufficient
  • Keyboard navigation support

Design Handoff

When delivering designs, always include:

  • Token values with hex/CSS values
  • Component specifications (sizes, spacing, states)
  • Interaction details (hover, focus, active, disabled)
  • Dark mode variant if applicable
  • Accessibility notes

Trigger Examples

  • "design a [component]" — Button, Card, Modal, Form, Navigation, etc.
  • "create a design token system for [brand/project]"
  • "audit this UI for accessibility issues"
  • "build a [dark mode / responsive / accessible] version of [component]"
  • "create a [login page / settings form / dashboard card layout]"

Reference Files

  • references/design-tokens.md — Full CSS token system with light/dark theme
  • references/components.md — Component patterns (buttons, forms, cards, etc.)

Comments

Loading comments...