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:
npx frontfriend agents install --help
npx frontfriend agents installThe 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 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.