designing-beautiful-websites
End-to-end UX/UI design workflow for websites and web apps, from strategy through implementation specs.
- Covers seven-step process: inputs, strategy, scope, information architecture, wireframes, visual systems, and validation—with explicit non-negotiables around clarity, hierarchy, and accessibility.
- Produces deliverables builders can use: design briefs, user flows, component inventories, design tokens (spacing, typography, colour, shadows), wireframes, and implementation notes.
- Includes reference guides for page patterns, audits, usability testing, forms, responsive design, and accessibility compliance.
- Provides exact prompts for common tasks: full UX/UI plans, visual polish passes, glance tests, component specs, accessibility reviews, and responsive breakpoint definitions.
Designing Beautiful Websites
Core philosophy: Make the next action obvious. Build from user goals upward. Systemise visuals. Validate early.
Why this exists
Websites fail when they look “nice” but:
- don’t match user goals,
- hide key actions,
- require too much thinking,
- or are visually inconsistent.
This skill turns vague requests like “make it look better” into a repeatable workflow that produces:
- clear structure,
- usable interactions,
- and a cohesive visual system.
More from tristanmanchester/agent-skills
reddit-readonly
>-
359styling-nativewind-v4-expo
>-
225animating-react-native-expo
>-
208track17
Track parcels via the 17TRACK API (local SQLite DB, polling + optional webhook ingestion)
73nextjs-framer-motion-animations
Adds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.
70tracking-pettracer-location
>-
67