Agent skill · design visual · julianoczkowski
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".
Why this skill is useful
Provides a structured approach to creating design briefs that incorporates codebase exploration and user interviews, which the AI wouldn't generate reliably on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-07-06. 492 stars on the source repository.
What this skill does
This skill creates a design brief through structured conversation. You may skip steps if they are not necessary. Example prompts "Write a brief for the onboarding flow" "I need to plan a settings page before I start building" "Help me define the direction for a marketing landing page" "Brief this: a dashboard that shows project health metrics" Process 1. Ask the user for a detailed description of what they want to build, who it is for, and any constraints or ideas they already have. 2. Explore the existing codebase to understand the current state. Scan for each of the following specifically: CSS variables / tokens: files named tokens.css, variables.css, theme.css, or :root declarations with custom properties Tailwind config: tailwind.config.js or tailwind.config.ts, check theme.extend for custom values UI framework themes: Material UI createTheme, Chakra extendTheme, shadcn globals.css and components.json Component directories: components/, ui/, shared/, or any folder containing reusable UI pieces Storybook: .storybook/ directory or .stories. files indicating a documented component library Design token files: JSON token files (Style Dictionary format, Figma token exports) Package.json UI dependencies: tailwindcss, @mui/material, @chakra-ui/react, @radix-ui, lucide-react, framer-motion, etc. Font loading: Google Fonts links in HTML, @font-face declarations, font imports in CSS/config Existing pages/layouts: route files, layout components, page templates that show established patterns If components exist, treat them as the starting vocabulary. The brief should extend, not replace. 3. Interview the user relentlessly about every aspect of the design until you reach a shared understanding. Walk down each branch of the design tree, resolving dependencies between decisions one by one. For each question, provide your recommended answer. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills julianoczkowski/design-brief