A collection of agent skills for designers using AI coding tools, this project aims to encode design processes into structured AI workflows. It targets designers and developers who prototype and build with AI, providing a systematic path for AI-generated output, preventing random results and ensuring adherence to design principles.

How It Works

The skills are designed to be used individually or orchestrated via a guided /design-flow sequence. This approach systematically guides AI through design phases: defining requirements (/grill-me, /design-brief), structuring information (/information-architecture), generating design tokens (/design-tokens), building interfaces with specific aesthetic philosophies (/frontend-design), and conducting reviews (/design-review). A key principle is respecting existing codebases by detecting and integrating with current project structures, themes, and token systems.

Quick Start & Requirements

• Installation: npx skills add julianoczkowski/designer-skills
• Supported Agents: Claude Code, Cursor, Codex, Windsurf, and 40+ other agents.
• Prerequisites: Requires a compatible AI coding agent environment.
• Demo: Watch the workflow: https://youtu.be/1pV7bvbaCFg?si=JtVWoBHsb-hrguho

Highlighted Details

• Respects Existing Code: Skills include detailed detection checklists for CSS variables, Tailwind config, UI themes, component directories, Storybook, token files, fonts, and dependencies to prevent generating redundant or conflicting code.
• Mobile-First & Dark Mode: The /frontend-design skill mandates mobile-first layout (375px) scaling up, while /design-tokens generates both light and dark palettes, supporting prefers-color-scheme.
• Aesthetic Philosophies: /frontend-design supports 8 named philosophies (e.g., Dieter Rams, Swiss Typographic, Japanese Minimalism, Brutalist, Scandinavian, Art Deco, Neo-Memphis, Editorial/Magazine) with concrete parameters, or can map described vibes to them.
• Persistent Design Documents: All design artifacts are saved to a .design/ folder, organized by feature, allowing for continuity and detection of existing work.

Maintenance & Community

No specific details on contributors, sponsorships, or community channels (Discord/Slack) were found in the provided README.

Licensing & Compatibility

Licensed under Apache 2.0. This license generally permits commercial use and integration with closed-source projects.

Limitations & Caveats

These files are instructions for local AI tools; users should review skills for safety before use in sensitive or production contexts. Effectiveness is dependent on the capabilities of the underlying AI agents and the user's interaction.