skills.rest
Jerrylalala
JerrylalalaCOMMUNITY
Explore all skills by this author →
GitHub

user-first-design

Generates structured UI design proposals with interaction flows, layouts, and copy guidelines.

6|2|Updated Jan 30, 2026
Search Tags:#accessibility#usability#ui design#ux#cursor#interaction flow#design proposal
One-click install
npx skills add https://github.com/Jerrylalala/compound-engineering --skill user-first-design-jerrylalala
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: user-first-design
Source: https://github.com/Jerrylalala/compound-engineering/tree/main/plugins/compound-engineering/skills-custom/user-first-design
Command: npx skills add https://github.com/Jerrylalala/compound-engineering --skill user-first-design-jerrylalala

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing interfaces that are forgiving and clear for the least experienced users is hard; this Skill produces structured UI design proposals built around a "worst user first" philosophy so forms, pages, and flows minimize errors, confusion, and anxiety. ## Core Features & Use Cases - Structured Design Output: Generates proposals covering interaction flows, layout hierarchy, error tolerance, feedback states, visual principles, and copy tone in a fixed six-section template. - Emotion Management Strategy: Includes guidance for reducing user anxiety, providing reassuring feedback, and avoiding blame-oriented error wording. - Scenario Modules: Optional enhancements for mobile, desktop, accessibility/elderly users, and first-time users, plus a Cursor Visual Editor refinement workflow. - Use Case: Ask for a registration page design and receive a single-page flow with one-tap verification, prominent next-step buttons, gentle error recovery hints, and success feedback copy. ## Quick Start Ask the assistant to design a registration page using the worst-user-first philosophy and review the structured proposal it returns.

Frequently Asked Questions about user-first-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a user-friendly form with AI assistance?▼

Describe the form or page you need and request a worst-user-first design proposal. The output includes a minimal interaction path of at most three steps, layout hierarchy, real-time validation guidance, and gentle error copy.

What is worst-user-first UI design?▼

It is a design philosophy that optimizes interfaces for the most anxious, least experienced user. It prioritizes short operation paths, automatic defaults, immediate feedback, and copy that never blames the user for mistakes.

Can this design approach work for mobile and accessibility scenarios?▼

Yes, optional modules cover mobile touch-first layouts with thumb-zone safety, desktop grid layouts, and accessibility needs like high contrast, voice prompts, and scalable text for elderly users.

How do I refine AI-generated UI designs in Cursor?▼

Start a local dev server, open the page in Cursor Browser, and enable the Visual Editor panel. Click elements to describe changes, drag to adjust layout, then verify the result against the worst-user checklist.

What are the limitations of prompt-based UI design generation?▼

The output is a structured design proposal with copy and layout guidance, not production code or pixel-perfect mockups. Visual refinement still requires a design tool or the Cursor Visual Editor workflow.

Related Skills

Explore More Design & Creative Skills→
cill-i-amcill-i-am

brainstorming

Facilitate structured ideation and design exploration before implementation.

Community
Advanced
jason23452jason23452

repo-aware-ui-design-flow

Generates repository-grounded UX, wireframe, visual, and layout design artifacts from PRD context.

Community
Advanced
paulalarosapaulalarosa

ux-heuristics

Evaluate web and mobile interfaces against Nielsen's 10 heuristics and Krug's principles.

Community
Intermediate
reason-machinesreason-machines
4

prototype-to-figma-skill

Convert code prototypes into annotated Figma frames with design system component mapping.

Official
Advanced