# Design Skills

Give agents the decisions, not just the pixels.

Design Skills connect agent-assisted design to your system’s foundations and documented decisions. They provide guided workflows for designing screens, auditing existing interfaces and importing intent from a prototype.

## Install the entry points

First connect [MCP](/docs/mcp/) and authenticate. Then inspect and run the installer:

```bash
npx frontfriend agents install --help
npx frontfriend agents install
```

The installer creates thin client entry points. Playbook content is served through authenticated tools rather than copied wholesale into your application.

## The workflows

| Entry point  | Purpose                                                                    |
| ------------ | -------------------------------------------------------------------------- |
| `/ff-setup`  | Establish project context and infer the existing system                    |
| `/ff-design` | Design a page against the relevant foundations, design rules and contracts |
| `/ff-audit`  | Review a page or guided application scope for design issues                |
| `/ff-import` | Extract intended flows from a prototype into page contracts                |

A useful design request includes the page’s purpose, audience, data, key actions and constraints. The agent should inspect the existing application and read the relevant [design rules](/docs/design-rules/) and system context before choosing patterns. Rules supply the design decisions; the skill guides how to apply them.

## Review design decisions

Contracts capture intent, rationale and shared decisions. Their lifecycle includes draft, inferred and decided states. A repository mirror makes accepted context visible in code review; it is generated and should not be hand-edited.

An audit can surface inconsistencies and implementation findings. Use the evidence to decide the next change; a report is not a substitute for product review or usability testing.

## Keep context current

Read [Agent context](/docs/agent-context/) for generated files and sync your design mirror as decisions change. Review proposed changes before applying them to your product.