How do I install the UI Design skill?

Run npx skillmds@latest add webiny/ui-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is UI Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UI Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is UI Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published UI Design?

webiny (@webiny) published this skill. Their other Agent Skills are listed on their SkillMD profile.

UI Design by webiny — Agent Skill

Name: UI Design
Author: webiny

UI Design

Invoke when the user asks about changing the look of the UI — colors, theme, layout, fonts, component styles, or page composition. Spawns or guides a ui-designer agent. Use when: "change colors", "redesign", "make it dark", "update the theme", "design", "style the page", "fix the layout".

webiny 4f0fbc8 1.8 KB Updated Sep 17, 2026

File contents

UI Design — How to Change the Visual Layer

This project's UI is built for design changes. React is a dumb display layer — all business logic lives in TypeScript classes (presenters, use cases, repositories). Designers can freely change any visual file without breaking business logic.

Quick Reference

Want to change...	Edit this file
Colors (entire app)	`src/ui/theme/tokens.ts` → `colors`
Font / sizes	`src/ui/theme/tokens.ts` → `typography`
Spacing / radius	`src/ui/theme/tokens.ts` → `spacing` / `radii`
Shadows	`src/ui/theme/tokens.ts` → `shadows`
Header / nav colors	`src/ui/theme/tokens.ts` → `defaultShell`
Layout dimensions	`src/ui/theme/tokens.ts` → `layout`
Component defaults	`src/ui/theme/theme.ts` → `DEFAULT_COMPONENTS`
Button/Card/Badge look	`src/ui/components/wrappers/{Component}.tsx`
Navigation structure	`src/ui/AppShell.tsx`
Page layout	`src/ui/presentation/{Domain}/{Page}/components/*.tsx`

For Agents

When spawning a design agent, use agentType: "ui-designer". The agent has built-in instructions for what to change and what not to touch.

Agent({ subagent_type: "ui-designer", prompt: "Change the primary color to teal..." })

Architecture

tokens.ts (source of truth)
  ↓
theme.ts (builds component theme)
  ↓
wrappers/*.tsx (design system — Button, Card, etc.)
  ↓
presentation/*/components/*.tsx (pages — just renders vm data)

Frequently asked questions