Updated 3mo ago
by julianoczkowski
designer-skills
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.
588 GitHub stars (588)
+17 in 16 days
| Period | New stars |
|---|---|
| Oct 1 | +1 |
| Oct 2 | 0 |
| Oct 3 | 0 |
| Oct 4 | +1 |
| Oct 5 | +1 |
| Oct 6 | +2 |
| Oct 7 | 0 |
| Oct 8 | 0 |
| Oct 9 | +1 |
| Oct 10 | +1 |
| Oct 11 | +1 |
| Oct 12 | +1 |
| Oct 13 | +3 |
| Oct 14 | +3 |
| Oct 15 | 0 |
| Oct 16 | +2 |
- 8 skills (8 skills found in its SKILL.md files)
- 52 forks (52 forks)
- 3mo ago last update (Last updated 3mo ago)
Install
Skills CLI
npx skills add julianoczkowski/designer-skills
Asks which skills and agents to install. Just one: npx skills add julianoczkowski/designer-skills --skill brief-to-tasks — add -g for every project.
Claude Code
git clone https://github.com/julianoczkowski/designer-skillscp -r "designer-skills/brief-to-tasks" ~/.claude/skills/
Copies the brief-to-tasks skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add julianoczkowski/designer-skills
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md.
-
brief-to-tasks
Break a design brief into an ordered checklist of independently buildable tasks using vertical slices. Saves as a markdown checklist. Use when user wants to break down work, create tasks from a brief, plan implementation order, or mentions "tasks" or "breakdown".
brief-to-tasks/SKILL.md on GitHub (opens in a new tab) -
design-brief
Create a design brief through an interactive interview, codebase exploration, and experience design decisions. Saved as a markdown file in the project. Use when user wants to write a design brief, plan a new feature or page, define a UI direction, or mentions "brief".
design-brief/SKILL.md on GitHub (opens in a new tab) -
design-flow
Run the full design-to-build workflow as a guided sequence. Orchestrates all designer skills in order, from grilling through review. Use when user wants to go through the complete design process, start a project from scratch, run the full flow, or mentions "design flow" or "full workflow".
design-flow/SKILL.md on GitHub (opens in a new tab) -
design-review
Run a structured design critique against the brief and codebase. Checks visual hierarchy, consistency, responsiveness, accessibility, and aesthetic fidelity. Use when user wants a design review, critique, QA pass, polish pass, or mentions "review" after building.
design-review/SKILL.md on GitHub (opens in a new tab) -
design-tokens
Generate a design tokens file (CSS variables or Tailwind config) based on a chosen aesthetic philosophy, with light and dark mode palettes, spacing scale, type ramp, and component-level tokens. Use when starting a new project, establishing a visual system, setting up tokens, or mentions "tokens" or "design system".
design-tokens/SKILL.md on GitHub (opens in a new tab) -
frontend-design
Build distinctive, production-grade frontend interfaces with high design quality, guided by named aesthetic philosophies. Use when building components, pages, or applications. Generates working code with exceptional attention to aesthetic details and creative choices that avoid generic AI output.
frontend-design/SKILL.md on GitHub (opens in a new tab) -
grill-me
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, challenge an approach, or mentions "grill me".
grill-me/SKILL.md on GitHub (opens in a new tab) -
information-architecture
Define the structural layer of a product or site before visual design begins. Covers navigation, content hierarchy, page structure, URL patterns, and user flows. Use when user wants to plan site structure, define navigation, map user flows, organize content, or mentions "IA" or "information architecture".
information-architecture/SKILL.md on GitHub (opens in a new tab)
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.