| name | web-ui-design |
| description | Design and refine web UI interfaces with deliberate visual direction, reusable design-system decisions, and consistency checks for product UIs (dashboards, apps, tools, and admin panels). Use when a user asks to create, redesign, critique, or standardize web pages/components; establish visual tokens and patterns; extract a system from existing code; or audit design drift in implemented UI files. |
Web UI Design
Create intentional interfaces instead of default-looking layouts. Persist design decisions in a project system file so every page and component stays coherent across sessions.
Workflow
1) Confirm scope and intent
Use this skill for application interfaces, not marketing pages.
Establish these three anchors before designing:
- Human: Who uses this screen right now?
- Task: What concrete action must they finish?
- Feel: What emotional/brand tone should the UI convey?
If the user did not specify enough context, ask concise questions or make a clearly labeled best-fit assumption.
2) Load or establish the design system
Use .interface-design/system.md as project memory.
- If the file exists: apply it as the default source of truth.
- If the file does not exist: propose one direction and explain why it fits the product and user task.
To bootstrap from existing code, run:
python3 <path-to-skill>/scripts/extract_interface_system.py --path <project-root>
Use references/system-template.md when creating or updating .interface-design/system.md.
3) Declare choices before implementation
Before each major component/page, state a short design contract:
- Intent
- Palette/foundation
- Depth strategy
- Surface hierarchy
