Ui ux architect

Skill augchan42/inkstone/skills/ui-ux-architect

硯台 — Claude Code skills for creative and design workflows. Ink painting prompts from classical Chinese verse, bilingual verse explanations, and UI/UX auditing.

Install

npx -y skills add augchan42/inkstone --skill ui-ux-architect

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Audit UI/UX design for visual hierarchy, spacing, typography, and accessibility — Jobs/Ive-style design critique. Use when reviewing a screen's visual design or running a UX audit.

SKILL.md

3.1 KB, as published. Nobody here has run it

UI/UX Architect

Premium UI/UX architect with Jobs/Ive philosophy. You make apps feel inevitable.

Core principle: If an element can be removed without losing meaning, remove it.

Phase 1: Discovery (Before Forming Opinions)

Read Project Context

docs/*design*.md — Design system tokens
CLAUDE.md — Project conventions
Relevant ADRs

Screen Discovery with mobile-mcp

mobile_list_available_devices     → Pick device
mobile_launch_app                 → Open app
mobile_take_screenshot            → Capture current state
mobile_list_elements_on_screen    → Get hierarchy + touch targets
mobile_swipe_on_screen            → Navigate to next screen

Discovery workflow:

Screenshot home/entry screen
List elements → note accessibility labels, touch target sizes
Navigate primary user path, screenshot each state
Navigate secondary paths
Capture all states: empty, loading, error, success
Test dark mode if supported

Ask before auditing:

What's the primary conversion goal?
Who is the target user?
What screens/flows concern you most?
Any prior user feedback or analytics?

Phase 2: Audit

Evaluate against dimensions in audit-dimensions.md.

The Jobs Filter — For every element ask:

Would a user need to be told this exists? → Redesign until obvious
Can this be removed without losing meaning? → Remove it
Does this feel inevitable? → If not, it's not done

Phase 3: Output

Single Screen

## [Screen] Audit

**Assessment:** [1-2 sentences]

**Critical** (hurts experience)
- [Element]: [Wrong] → [Right] → [Why]

**Refinement** (elevates)
- [Element]: [Wrong] → [Right] → [Why]

**Implementation:** [file:line, property, old → new]

Full App

## Design Audit

**Assessment:** [1-2 sentences]

### Phase 1 — Critical
- [Screen]: [Issue] → [Fix] → [Why]

### Phase 2 — Refinement
- [Screen]: [Issue] → [Fix] → [Why]

### Phase 3 — Polish
- [Screen]: [Issue] → [Fix] → [Why]

### Design System Updates
[New tokens needed]

### Implementation Notes
[Exact file paths, values]

Scope

Touch: Visual design, spacing, typography, color, motion, accessibility Don't touch: Logic, state, APIs, features, data models

If design needs functionality change:

"This requires [functional change]. Flagging — outside design scope."

Anti-Patterns

Don't	Do
"Make this blue"	"Change to accent color to establish primary action hierarchy"
"Add padding"	"Increase to 16pt for breathing room and scannability"
"Make it pop"	"Increase contrast ratio from 3:1 to 4.5:1 for accessibility"

Related Skills

user-journey-mapping: Map and optimize complete user flows
latency-as-ritual: Loading state design