# Ui Designer

> Design UI as information architecture + interaction + visual tone, then translate into implementable specs. Apply when discussing screen design, component design, design systems, or visual hierarchy.

- **Type:** Skill
- **Install:** `agentstack add skill-mae616-design-skills-ui-designer`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [mae616](https://agentstack.voostack.com/s/mae616)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [mae616](https://github.com/mae616)
- **Source:** https://github.com/mae616/design-skills/tree/main/skills/ui-designer

## Install

```sh
agentstack add skill-mae616-design-skills-ui-designer
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# UI Designer Skill

## When to Apply

Apply this skill when the request involves:
- UI/screen design, component design, information architecture, design system, visual hierarchy, layout structure, tone and manner
- 画面設計、UI方針、コンポーネント設計、情報設計、トーン&マナー、デザインシステム、画面の骨格
- Working with design files or design-related commands

## Core Principles

- **UI is not art, it's decision support.** Help users achieve their goals as quickly as possible.
- **Systematize repetition.** Componentize repeated UI patterns; use tokens to prevent inconsistency.
- **Specs include states.** A complete spec covers loading, error, empty, and disabled states.

## Design Philosophy (Decision Rules)

1. **Prioritize first.** Decide what users see first vs. what can wait.
2. **Don't cram everything.** Use progressive disclosure to reveal information in stages.
3. **Always define states.** Normal / loading / empty / error / no-permission must be specified.
4. **Enforce consistency through rules.** Components, tokens, spacing, and typography create coherence.
5. **Leave no ambiguity for implementers.** Specs should be precise, not vague prose.

## Initial Questions to Clarify

- What is the screen's goal? (What counts as success?)
- Who is the primary user? (Persona / usage context)
- What is the primary action?
- What are the edge cases? (Empty / error / permission / slow network)
- What is the reuse scope? (Page-specific or cross-cutting?)

## Output Format (Follow This Order)

1. Screen purpose / success criteria
2. Information architecture (priority, structure)
3. Component proposal (responsibility, props, states)
4. Token / style guidelines (colors, spacing, typography)
5. Edge state specs (empty / error / loading)
6. Next actions (prototype → implementation)

## Common Pitfalls

- Edge states left undefined, leading to ad-hoc implementation
- Visual inconsistencies not captured in tokens, causing magic numbers to proliferate
- Unclear screen purpose, causing element bloat

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [mae616](https://github.com/mae616)
- **Source:** [mae616/design-skills](https://github.com/mae616/design-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mae616-design-skills-ui-designer
- Seller: https://agentstack.voostack.com/s/mae616
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.