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 and authenticate. Then inspect and run the installer:
pnpm exec frontfriend agents install --help
pnpm exec frontfriend agents installThe installer creates thin client entry points. Playbook content is served through authenticated tools rather than copied wholesale into your application.
Connection is not design readiness
Connect the app with its real codebase areas, for example:
pnpm exec frontfriend connect --areas marketing,documentationYour agent follows ff-setup to read the codebase and prepare the design context. A workspace admin reviews the proposal in Studio. Then run pnpm exec frontfriend connect --resume to adopt the reviewed snapshot. pnpm exec frontfriend doctor checks the connection and local adoption. Design and audit runs require the app to be ready; they cannot bypass the review by selecting working documents.
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 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 for generated files and sync your design mirror as decisions change. Review proposed changes before applying them to your product.