Article Cover Image
Makes a header image for your article in a palette and drawing style you choose
by Jim Liu
UI Design Skills
by MC DeanPluginMake visuals
Helps you choose color palettes, type scales, grids and layouts for app or web screens
About UI Design Skills
UI Design Skills is a Claude Code plugin with 19 interface-design skills and 5 commands that help your agent draft color palettes, type scales, spacing, layout grids and screen layouts, or audit a design.
For Product designersFoundersFront-end developers
Made by MC Dean
MC Dean publishes the Designer Skills collection of skills, commands and plugins for design work, from research to delivery.
- Stars
- ★ 3.2k
- License
- MIT
- Cost
- Free
- For
- Claude Code
- Contents
- Instructions only
Overview
UI Design is a Claude Code plugin from the Designer Skills collection by MC Dean. It adds 19 interface-design skills and 5 commands covering color systems, dark mode, typography scales, spacing, layout grids, responsive design, visual hierarchy and iOS and Android conventions. You describe a brand, a mood or a screen, and it returns a documented palette, a type system, a layout or an audit as text. It suits designers and founders shaping how a product looks.
It covers the reasons behind visual choices, such as grouping and hierarchy principles, so you get guidance you can apply, not just a list of colors.
Try these first
Start with the first one: it is a small task you can check easily.
- /ui-design:color-palette #3B82F6 primary blue, calm and modern. List the text and background pairs so I can check contrast.First try
- /ui-design:type-system Build a type scale for a reading app on phone and desktop.
- /ui-design:design-screen Lay out a settings screen for [app] with account, notifications and privacy sections.
- /ui-design:platform-audit Check this screen description against iOS and Android conventions: [paste description]
Example prompts written by Agent Flows Hub.
What you get
From the creator's documentation.
| Output | What it is | Reads |
|---|---|---|
| Color systems | Tonal scales, semantic roles, contrast notes and dark-mode mappings | What you paste |
| Typography | A type scale with sizes, weights, line heights and line length | What you paste |
| Layout and spacing | Grids, gutters, breakpoints and a spacing scale with rules | What you paste |
| Screen layouts | A full screen layout from a description or requirements | What you paste |
| Audits | Responsive and iOS or Android convention checks for a design | What you paste |
| Visual principles | Hierarchy and grouping principles applied to your screen | What you paste |
Good to know
You have a brand color and a rough idea and need a full palette or type system. The plugin's commands run the steps in order and document the result with usage notes.
Limits
- The output is a written spec, not a design file. You still apply the colors, fonts and grids in your own design or code tool.
- Contrast and platform checks are described in text; confirm contrast with a checker before you ship.
Notes by Agent Flows Hub (original project name: ui-design), written from the creator's documentation, not from running it ourselves. ui-design plugin: skills and commands · Designer Skills: getting started
Stuck setting it up?
Tell us what happened. We take a look first; if it needs paid work, you get an estimate before anything starts.
More to make visuals
Other plugins
- Understand Anything Turns a codebase or notes folder into a clickable map with plain-English explanations
- Zapier for Claude Code Walks you through connecting Zapier to Claude Code and running your first app action
- Animate Makes short animated explainer videos in one of seven drawing styles, rendered to MP4
- ASu Job Search Kit Improves your resume, checks job fit, runs practice interviews and tracks applications
- Canva for Codex Lets Codex resize, edit, critique and brand-check your Canva designs from a chat
- career-ops Scores job posts against your CV, then drafts a tailored CV and cover letter