designer-skills

Designer Skills for Claude Code & Cursor

A collection of agent skills for designers who prototype and build with AI coding tools. These skills encode design process so AI follows a structured path instead of producing random output.

WATCH: https://youtu.be/1pV7bvbaCFg?si=JtVWoBHsb-hrguho

Installation

npx skills add julianoczkowski/designer-skills

The interactive CLI will walk you through which skills to install, which agents to target, and whether to install at project or global scope. Works with Claude Code, Cursor, Codex, Windsurf, and 40+ other agents.

Claude Code plugin

If you use Claude Code, you can install all 8 skills as a plugin directly from this repo:

/plugin marketplace add julianoczkowski/designer-skills
/plugin install designer-skills@designer-skills

The skills then load automatically. Claude invokes them based on each skill's description, or you can call one explicitly, e.g. /designer-skills:design-brief.

Installs track the latest commit on main, so you always get the newest skills and fixes. To pull updates later:

/plugin update designer-skills@designer-skills

To try it locally before installing, run claude --plugin-dir /path/to/designer-skills.

Security

These files are instructions for local AI tools. Treat them like any other project dependency: review skills before using them in sensitive or production contexts, and keep your editor, CLI, and API keys on trusted machines. We welcome responsible disclosure of anything in this repo that could cause agents to act unsafely; please use the process in SECURITY.md instead of public issues. Licensing and disclaimer: LICENSE (Apache 2.0).

The Flow

The skills follow a deliberate sequence. You can use any skill individually, or run /design-flow to be guided through the entire sequence automatically.

0. /design-flow -- Run the full workflow as a guided sequence. Orchestrates all skills in order, lets you skip phases, confirms between each step. Start here if you want the complete process.
1. /grill-me -- Get interrogated about your plan until every design decision is resolved.
2. /design-brief -- Turn the grilling session into a structured design brief. Includes codebase exploration so the AI respects what already exists.
3. /information-architecture -- Define the structural skeleton: navigation, content hierarchy, page structure, URL patterns, user flows.
4. /design-tokens -- Generate a complete token system (colors, spacing, typography, motion) with light and dark mode palettes, based on the chosen aesthetic philosophy.
5. /brief-to-tasks -- Break the brief into an ordered checklist of independently buildable vertical slices.
6. /frontend-design -- Build with a named aesthetic philosophy. Mobile-first. Dark mode included. 8 design philosophies with concrete implementation parameters.
7. /design-review -- Run a structured critique against the brief. Supports code review and screenshot-based review. Runs on request, not automatically. Use after you have something built.

Key Principles

Respect Existing Code