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.
Install
$ agentstack add skill-mae616-design-skills-ui-designer ✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README, it links to the public security report.
Links to your public security report.[](https://agentstack.voostack.com/security/report/skill-mae616-design-skills-ui-designer) Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →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)
- Prioritize first. Decide what users see first vs. what can wait.
- Don't cram everything. Use progressive disclosure to reveal information in stages.
- Always define states. Normal / loading / empty / error / no-permission must be specified.
- Enforce consistency through rules. Components, tokens, spacing, and typography create coherence.
- 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)
- Screen purpose / success criteria
- Information architecture (priority, structure)
- Component proposal (responsibility, props, states)
- Token / style guidelines (colors, spacing, typography)
- Edge state specs (empty / error / loading)
- 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
- Source: mae616/design-skills
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet, be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.