🎯

design-brief

🎯Skill

from julianoczkowski/designer-skills

What it does

Creates a design brief through an interactive interview that first scans the codebase for existing tokens, Tailwind configs, theme providers, and component directories, then walks through problem, experience principles, aesthetic direction, constraints, and component inventory. Saves the output as `.design/<feature-slug>/DESIGN_BRIEF.md`.

📦

Same repository

julianoczkowski/designer-skills(8 items)

design-brief

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add julianoczkowski/designer-skills --skill design-brief

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add julianoczkowski/designer-skills --skill design-brief

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/design-brief/SKILL.md

SKILL.md

872Installs

AddedMar 30, 2026

View on GitHub Back to Skills

More from this repository7

🎯

design-review🎯Skill

Designer skill that runs a structured design critique against the brief and codebase—checks visual hierarchy, consistency, aesthetic fidelity, component quality, states, responsive behavior, accessibility (WCAG AA), and typography. Outputs a prioritized Must/Should/Could fix list as DESIGN_REVIEW.md.

🎯

information-architecture🎯Skill

Designer skill that defines the structural skeleton of a product before visual design—site maps, navigation models, content hierarchy, user flows, and URL strategy. Interviews the user, scans existing routing/layout code, and outputs an INFORMATION_ARCHITECTURE.md in the .design/<feature-slug>/ folder.

🎯

frontend-design🎯Skill

Designer skill for building distinctive, production-grade frontend interfaces guided by named aesthetic philosophies (Dieter Rams, Swiss, Japanese Minimalism/Ma, Brutalist, Scandinavian, and more). Scans existing components, tokens, and Tailwind/MUI/Chakra configs, then writes working code that matches a chosen philosophy.

🎯

design-tokens🎯Skill

Generates a foundational design tokens file (CSS custom properties, Tailwind config, or theme.ts) based on a chosen aesthetic philosophy, emitting both light and dark palettes plus spacing, typography, layout, motion, and breakpoint scales. Scans the codebase first and extends existing tokens rather than replacing them.

🎯

design-flow🎯Skill

Designer skill that orchestrates the full design-to-build workflow as a guided sequence: Grill Me, Design Brief, Information Architecture, Design Tokens, Brief to Tasks, Frontend Design, and (on request) Design Review. Runs each sub-skill in order and can resume mid-flow by inspecting the .design/<feature-slug>/ folder.

🎯

grill-me🎯Skill

Interviews the user relentlessly about a plan or design, walking down each branch of the decision tree and resolving dependencies one by one until shared understanding is reached. For every question it also proposes its own recommended answer, and prefers exploring the codebase over asking when possible.

🎯

brief-to-tasks🎯Skill

Reads an existing `.design/*/DESIGN_BRIEF.md`, explores the codebase to classify components as reuse/modify/new, and breaks the work into an ordered checklist of independently buildable vertical slices. Tasks are grouped into Foundation, Core UI, Interactions & States, Responsive & Polish, and Review, then saved as `TASKS.md`.