Communitygithub.com

julianoczkowski/design-brief

Créez un brief de conception via un entretien interactif, une exploration du codebase et des décisions de conception d'expérience. Sauvegardé sous forme de fichier markdown dans le projet. À utiliser lorsque l'utilisateur souhaite rédiger un brief de conception, planifier une nouvelle fonctionnalité ou page, définir une direction UI, ou mentionne « brief ».

Qu'est-ce que design-brief ?

Ce skill permet de générer un brief de conception structuré et complet directement dans votre projet. Il guide l'utilisateur à travers un entretien interactif, explore le codebase existant pour comprendre le contexte technique et visuel, puis aide à prendre des décisions de conception d'expérience. Le résultat est sauvegardé en tant que fichier Markdown dans le projet, ce qui le rend facile à partager, versionner et maintenir. Ce skill est idéal pour les développeurs et designers qui utilisent des plateformes comme Claude Code, Cursor ou Codex, car il intègre la création de briefs directement dans le flux de travail de développement, sans avoir besoin d'outils externes. Il est particulièrement utile au début d'un nouveau projet, pour planifier une nouvelle fonctionnalité, ou lorsque l'utilisateur mentionne le mot « brief ». En automatisant la collecte d'informations et la structuration du brief, ce skill permet de gagner du temps et d'assurer une documentation cohérente et alignée avec les besoins du projet.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/julianoczkowski/designer-skills/tree/main/skills/design-brief

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait design-brief ?

Créez un brief de conception via un entretien interactif, une exploration du codebase et des décisions de conception d'expérience. Sauvegardé sous forme de fichier markdown dans le projet. À utiliser lorsque l'utilisateur souhaite rédiger un brief de conception, planifier une nouvelle fonctionnalité ou page, définir une direction UI, ou mentionne « brief ».

Fonctionnement

Le skill guide l'utilisateur étape par étape en posant des questions clés sur les objectifs, le public cible, les contraintes techniques, et les préférences esthétiques. Il analyse ensuite le codebase pour identifier les composants existants, les styles, et les patterns d'interface. Enfin, il synthétise ces informations dans un document markdown structuré.

Utilisation

  1. Lancez le skill en mentionnant « brief » ou en demandant explicitement la création d'un brief de conception.
  2. Répondez aux questions interactives posées par l'agent.
  3. L'agent explorera automatiquement votre projet pour en comprendre le contexte.
  4. Recevez un fichier markdown prêt à l'emploi dans votre répertoire de projet.

Compatibilité

Ce skill est compatible avec les plateformes d'agents IA suivantes : Claude Code, Cursor, Codex, et autres environnements supportant les skills markdown.

Exemple de contenu généré

# Brief de Conception : Nouvelle Fonctionnalité de Recherche

## Objectifs
- Améliorer la découvrabilité du contenu
- Réduire le temps de recherche de 30%

## Audience cible
- Utilisateurs réguliers cherchant des articles spécifiques
- Nouveaux visiteurs explorant le site

## Contraintes techniques
- Utilisation de React et Tailwind CSS
- API REST existante avec endpoint `/search`

Note : Le contenu exact dépend des réponses fournies lors de l'interview et de l'exploration du codebase.

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

julianoczkowski/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".

julianoczkowski/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".

julianoczkowski/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.

julianoczkowski/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".

julianoczkowski/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.

julianoczkowski/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".

julianoczkowski/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".

Skills associés