What is the designing-beautiful-websites skill?
The designing-beautiful-websites skill is a SKILL.md in the tristanmanchester/agent-skills repository for designing, implementing or critiquing website and web-app interfaces. It keeps edits scoped to the request, builds from real content, requires complete interface states and asks the agent to report only what it actually tested.
The designing-beautiful-websites skill sits in a repository of agent skills and covers website and web-app UX and UI: information structure, user flows, responsive layouts, visual systems, content and interaction states. It is written to keep the agent proportionate to the request.
The entry file stays brief and points to reference files for visual design, information architecture, interaction, content, responsive design, accessibility and audits. The agent loads only the one a task needs.
How it behaves on different requests
- A local polish request stays local. The skill says not to expand a small component edit into an unrequested product redesign.
- A new site gets a coherent direction and a built deliverable, not only a planning packet.
- An audit lists material issues with their locations, impact and specific fixes.
- A screenshot is not treated as an interaction test, so the agent should not claim it used a page it only saw as an image.
What it asks the agent to get right
- The user's key task, traced from entry through completion and recovery, before any ornament.
- Real content only. No invented client logos, reviews, awards, statistics or product capabilities, and synthetic content marked as a placeholder.
- States for long text, translations, missing images, tables, errors, loading, empty results and success.
- Correct semantics, with buttons for actions, links for navigation and proper keyboard behaviour in menus, dialogs and tabs.
- Restrained motion with a reduced-motion and static fallback, and no heavy library for an effect plain CSS can do.
Who the designing-beautiful-websites skill is for
Best for
- Briefing an agent on a new page, a restyle or a design audit, with clear finding, impact and fix output.
- Copy-heavy interfaces where labels and microcopy matter. For that angle, see ux-copy.
- Teams that want proportionate edits instead of an agent redesigning everything it touches, alongside a review pass from ui-design-review.
Not for
- A fixed house style. The skill says beauty is not one universal palette or a grid of rounded cards, so it will not hand you a template.
- Measured user testing or conversion claims. It treats a heuristic walkthrough as expert inspection, not a user test.
- Performance tuning. It avoids unsupported performance claims, so use a dedicated skill such as web-performance-skill.
Use it with UiChemy
This skill shapes the design and the front end your agent builds. UiChemy then moves the result into WordPress: AI to WordPress imports an existing AI build, and Figma to WordPress converts a Figma design. Click Get Started on uichemy.com.
How to install Designing Beautiful Websites Skill: UX and UI Guide
git clone https://github.com/tristanmanchester/agent-skills.gitClone the repository
Run
git clone https://github.com/tristanmanchester/agent-skills.git. The skill is the designing-beautiful-websites folder at the top level.Copy the whole folder
Copy designing-beautiful-websites, including its references and scripts folders, to wherever your agent loads skills from. Reference and script paths resolve from the installed skill directory.
Check Python for the helper
Only the optional contrast helper needs Python 3.9 or newer. The rest of the skill is plain instructions.
Ask for design work
Ask for a website design, an implementation or a UX audit, and name the page or files so the agent can read the existing implementation first.
Check that it loaded
Ask the agent to critique one page. It should state the user and purpose, list findings with location, impact and fix, and say plainly what it did and did not test.
Key features
- Scope controlLocal polish requests stay local, new sites get a built direction and audits return findings. The skill warns against turning a small edit into a redesign.
- Task journey firstThe agent traces the key task from entry to completion and recovery, and separates required steps from accidental friction such as needless confirmations.
- Content-led layoutLayout starts from content and priorities instead of a generic app shell. Real long text, translations, missing images, tables, errors and empty results must fit.
- Visual point of viewHierarchy comes from type size, weight, line length, spacing, contrast and position before decoration. Editorial, compact technical and warm hospitality directions appear as examples, not templates.
- Honest assetsNo invented client logos, reviews, awards or statistics, and no fake scarcity or misleading price presentation. Synthetic content is labelled as a placeholder.
- Interaction semanticsRestyling must preserve refs, focus, form submission, validation and loading or error behaviour. Forms keep entered data and show specific, recoverable errors.
- Narrow-screen and keyboard designInformation order and controls are designed for narrow screens, zoom and keyboard use, not as a scaled-down desktop screenshot.
- Restrained motionMotion supports orientation or feedback and comes with reduced-motion and usable static states. Simple CSS is preferred over adding an animation library.
- Rendered checksThe agent inspects output at meaningful widths, zoom and text sizes, interaction states and input methods, then records what it actually tested.
- Contrast helper scriptAn optional contrast_check.py script checks opaque sRGB colours and needs Python 3.9 or newer. A ratio is treated as one piece of evidence, not a certificate.
Frequently asked questions
What is the designing-beautiful-websites skill?
It is a skill folder in the tristanmanchester/agent-skills repository that guides an AI agent through website and web-app UX and UI. It covers structure, flows, responsive layouts, visual systems, content and interaction states, and it asks the agent to inspect rendered output before claiming a result.
How do I install the designing-beautiful-websites skill?
Clone the agent-skills repository and copy the designing-beautiful-websites folder, with its references and scripts, into the place your agent loads skills from. The README advises keeping the entry point with its supporting files and not keeping duplicate active copies of the same skill.
Which AI coding agents can use it?
The README describes the repository for skills-compatible agents and links the Agent Skills format. The skill's compatibility note says design reasoning works from supplied content and screenshots, while implementation and browser checks depend on the tools your project gives the agent.
Does it redesign my whole site?
Not unless you ask. The skill says to stay local for a polish request and not to expand a small component edit into a product redesign. For a new site it chooses a direction and builds the requested deliverable, and for an audit it reports findings.
Can it prove my page is accessible?
No. The skill states that a contrast ratio or automated scan is one piece of evidence, not an accessibility certificate, and that a static screenshot cannot establish keyboard or screen-reader behaviour. It points the agent to an accessibility reference for targeted checks.
What does the contrast helper do?
The optional contrast_check.py script in the scripts folder checks colour contrast for opaque sRGB values and needs Python 3.9 or newer. Skill instructions do not install dependencies for you, so confirm Python is available before asking the agent to run it.
What license does the repository use?
GitHub reports no license for the repository, and the README says licences apply per skill with no blanket repository licence. Check the skill folder and the repository before you redistribute it inside a product or share it across a company.
How does it compare with other design skills?
This one focuses on proportionate scope, real content, complete interface states and honest reporting of what was tested. For a brief-first workflow see design-brief, for component-level guidance see web-component-design, and for foundations see visual-design-foundations.