Guides
Make AI-Built Apps Look Designed
How to hand a coding agent a real design: what to give it, where it goes in Claude Code and Cursor, and how to borrow a site's style without copying it.
- Report · 4 minState of Web Design: The Fonts, Colours and Themes Real Sites UseLive data from every website Livery has measured: the most used fonts, the most common accent colours, dark versus light themes and icon sets, updated daily.Read the report
- AI design · 6 minWhy AI-Generated UI All Looks the Same (and How to Fix It)Why AI-generated UI all looks the same: agents fall back on Tailwind and shadcn/ui defaults, Inter and purple accents. Fix it with a design system and rules.Read the guide
- Agent Skills · 7 minWhat Is an Agent Skill? SKILL.md ExplainedWhat is an agent skill? A SKILL.md file explained: the name and description front matter, progressive disclosure, where skills live and which agents read them.Read the guide
- File formats · 7 minDESIGN.md vs SKILL.md vs tokens.json: What Should AI Agents Read?DESIGN.md vs SKILL.md vs tokens.json, CLAUDE.md, AGENTS.md and Cursor rules: what each file holds, when agents load it, and which to use for a design system.Read the guide
- Roundup · 7 minBest Design Skills for Claude Code, Cursor and CodexThe best design skills for Claude Code, Cursor and Codex compared: Anthropic's frontend-design, measured design kits, your own skill, shadcn/ui and Tailwind.Read the guide
- Design tokens · 7 minHow to Extract Design Tokens from Any Website: 5 Methods ComparedHow to extract design tokens from any website: Chrome DevTools, CSS custom properties, browser extensions, Figma import and automated measurement, compared.Read the guide
- Design tokens · 7 minDesign Tokens JSON: The DTCG Format ExplainedThe design tokens JSON format from the W3C Design Tokens Community Group (DTCG) explained: $value, $type, groups, aliases, token types and a full tokens.json.Read the guide
- Colour · 7 minHow to Find Any Website's Color Palette (Hex Codes by Role)Find any website's color palette with DevTools, CSS Overview, CSS variables or an eyedropper, then sort the hex codes into roles and check their contrast.Read the guide
- Fonts · 6 minWhat Font Is This Website Using? 4 Ways to Find OutWhat font is this website using? Find out with Chrome's Rendered Fonts, Firefox's Fonts panel, the WhatFont extension or WhatTheFont for text in images.Read the guide
- Website to Figma · 7 minHow to Convert a Website to Figma (Editable Layers)How to convert a website to Figma as editable layers, not a screenshot: Figma's capture, html.to.design and Livery, compared on text, layout, images and cost.Read the guide
- Copyright · 6 minCan You Copy a Website's Design? What's Legal and What Isn'tCan you copy a website's design? What US copyright leaves free (layout, colours, ideas, typefaces) and what it protects: text, images, code, fonts and logos.Read the guide
- Android apps · 6 minHow to Extract an Android App's Design SystemHow to extract an Android app's design system: Layout Inspector, UI Automator, Material 3 roles, and Applivery, which reads colours, fonts and motion on-device.Read the guide
- Claude Code · 7 minHow to Give Claude Code a Design SystemStop Claude Code shipping generic UI: give it a design system as a skill, with tokens, rules and the reasons behind them, and let it apply one area at a time.Read the guide
- Cursor · 6 minCursor Rules for Design: Make AI-Built UIs Look On-BrandUse Cursor project rules to keep AI-generated UI on-brand: where to put design tokens, what rules to write, and how to keep Cursor's agent from drifting.Read the guide
- Design tokens · 6 minDesign Tokens for AI Coding Agents: What to Hand OverWhich design tokens an AI coding agent actually needs (colour roles, type scale, spacing, radii, shadows, motion) and how to structure them so it applies them well.Read the guide
- Style vs assets · 5 minRecreate a Website's Look Without Copying ItHow to borrow a website's design style for your own app without copying its assets: what's style (colours, spacing, type scale) and what belongs to the owner.Read the guide