Designing Beautiful Websites

This is a full UX/UI design workflow that takes you from strategy through to implementation specs. It enforces a 7-step process: gather inputs, define strategy, scope features, build information architecture, wireframe the skeleton, apply visual polish, then validate and hand off. The non-negotiables are good: reduce thinking, use conventions, clear hierarchy, unambiguous grouping. It includes a default design system with spacing scales, typography, and color rules that you can use immediately. Best for when someone asks you to design or redesign a website and you want structured deliverables that engineers can actually build from, not just pretty mockups.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 7
skills.sh installs: 2.8K
GitHub stars: 4
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add tristanmanchester/agent-skills --skill designing-beautiful-websites --agent claude-code

Installs into .claude/skills of the current project.

Files

Clear, distinctive web interfaces

Make the purpose and next action legible, with a visual language that fits the product and audience. Build from real content and behaviour, then use typography, spacing, colour, imagery, and motion deliberately. Beauty is not one universal palette, a grid of rounded cards, or an obligation to remove all decoration.

Establish the actual design task

Read the request, existing implementation, design system, assets, and relevant content. Identify the user, page purpose, important journey, brand signals, target platforms, and constraints. Use supplied answers; infer ordinary defaults and state consequential assumptions without repeating a questionnaire.

For a local polish request, stay local unless a structural problem prevents the requested result. For a new site, choose a coherent direction and implement the requested deliverable rather than only returning a planning packet. For an audit, show the material issues, their locations and impact, and specific fixes. Do not claim to have interacted with a page when only a screenshot was available.