More screenshots
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+20 moreClaude CodeCursorCodex CLIMuseDots
Manus
Grok
Grok Bot+17 agentsUI/UX Designer: Dashboards, Landing Pages & Mobile Apps
Turns Claude into a senior UX designer: every screen ships with Loading, Empty, and Error states, 11 design styles, and HTML, Figma, or spec output.
Free
UI/UX Designer: Dashboards, Landing Pages & Mobile Apps
Example session with this skill installed
Design a shipment tracking dashboard for a logistics platform. Dark mode, HTML output.
- Read your context and instructions
- Compiled the ui ux designer
Summary
A complete, working HTML dashboard for a logistics platform, "Logistic OS", in dark mode, with every state built in.
What was delivered
| Area | What it includes |
|---|---|
| Navigation | Dual nav: icon rail plus a collapsible panel with Shipments (All, In Transit, Delivered, Delayed, Exceptions) and Logistics (Carriers, Routes, Documents), with live count badges |
| KPI cards | Total Shipments 1,284, In Transit 487, Delivered 612, Delayed / Exception 43, each with a trend line |
| Charts | Stacked weekly Shipment Volume bar chart with 7D / 30D / 90D toggle, plus a Status Breakdown donut |
| Table | Recent Shipments with search, All / Transit / Delayed filters, sortable columns, and pagination |
| Detail panel | Shipment SHP-2024-0847 with container, route, carrier, weight, a tracking timeline, and a Download BoL action |
| States | Default, Loading (skeletons), Empty ("No shipments found" + Create First Booking), Error ("Failed to load shipments" + Retry) |
Built-in quality
- Responsive at 1280, 1024, 768, and 480px
- Visible focus states and ARIA labels throughout
- prefers-reduced-motion fallback
Next steps
- Swap the sample data for your API
- Ask the skill for the mobile version or a Figma file of the same screen
Connects securely to your tools. The creator never sees your data.
About this skill
Ask any AI to "design a dashboard" and you get the same generic screen every time, with no loading, empty, or error states. This skill encodes 14 years of enterprise SaaS design (aviation, logistics, HR) into Claude.
What it does
- Renders every screen with Default, Loading, Empty, and Error states, plus focus rings, four responsive breakpoints, and a reduced-motion fallback
- Asks 5 setup questions once (design system, industry, output, style, dark mode), then commits
- 11 distinct styles: Minimal, Material 3, Bento Grid, Glassmorphism, Liquid Glass, Spatial, Aurora, Neo-Brutalism, Neumorphism, Claymorphism, Skeuomorphic. It warns when a style is wrong for the context
- Enterprise dual navigation that reflows to mobile top and bottom bars
- Adopts your own design system from tokens, a link, or an image
- Outputs HTML, Figma, Claude Design, or a written spec
- Validates before delivering: charts paint, controls work, contrast passes
Tested
30 cases across aviation, transport, and HRM. HTML output scores 93/100.
Works in Claude Chat, Claude Code, and Claude Cowork. Free and open source (MIT).
GitHub: https://github.com/zeeshani42/your-ui-ux-designer Full write-up: https://dev.to/zeeshani42/i-built-a-claude-skill-that-makes-ai-design-like-a-senior-ux-designer-2gdm
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
1 use
Times used to date
Free forever
No account required to browse
Trust & safety
Security scan
Security scan passed 5 days ago
- Free with an Agensi account