design-context

Capture brand voice, audience, and constraints into a project-level .design-context.md file.

2|Updated Mar 16, 2026
One-click install
npx skills add https://github.com/hamzaPixl/pixl-ai --skill design-context-hamzapixl
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-context
Source: https://github.com/hamzaPixl/pixl-ai/tree/main/packages/crew/skills/design-context
Command: npx skills add https://github.com/hamzaPixl/pixl-ai --skill design-context-hamzapixl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Captures and consolidates brand voice, target audience, personality, anti-references, and accessibility constraints into a single project-level design brief so downstream design work is aligned and not generic. Prevents designers and automated design skills from working "blind" by creating a canonical .design-context.md that other skills read.

Core Features & Use Cases

  • Interactive Q&A: Guides the user through 5–7 concise questions (audience, primary use case, personality, voice & tone, anti-references, sector references, constraints) and prompts for clarification when answers are thin.
  • Repository exploration: Scans common locations (public assets, Tailwind config, landing/marketing pages, package.json) and summarizes "what I already know" before asking questions.
  • Reference-driven: Reads required design protocol and anti-patterns from references/frontend/design to enforce schema and avoid known pitfalls.
  • File output & update semantics: Writes a complete .design-context.md at the project root, respects existing files unless --force is provided, and offers review/update flows instead of blind appends.
  • Use cases: Initialize brand context for a new project, capture a pivoted brand voice, or audit/update an existing design brief for consistency across design-variants, website-theme, frontend-design, and content-marketing.

Quick Start

Run the design-context skill to interactively capture brand voice, audience, and constraints and write .design-context.md at the project root.

Frequently Asked Questions about design-context

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a design brief for my project to keep brand voice consistent?

A project-level design brief captures your brand voice, target audience, personality, and accessibility constraints into a single .design-context.md file. This canonical file acts as a source of truth so downstream design work remains aligned and avoids generic outputs.

How do I capture brand voice and accessibility constraints for my website?

You capture brand voice and accessibility constraints by running an interactive 5-7 question Q&A session. The skill asks about your audience, primary use case, personality, tone, anti-references, and constraints, then persists the answers into a .design-context.md file at your project root.

What is the best way to document brand personality and anti-references for automated design tools?

The best way to document brand personality and anti-references is by generating a .design-context.md file at the project root. This provides a canonical design brief that automated design skills can read, ensuring all generated work respects your established brand guidelines and avoids unwanted styles.

Can I update an existing design brief without losing my current project context?

Yes, you can update an existing design brief safely. The skill respects your current .design-context.md file and offers review and update flows rather than blind appends, only overwriting the existing file if you explicitly provide a force command.

Does the design context skill scan my repository before generating a design brief?

Yes, the skill scans your repository before generating a design brief. It explores common locations like public assets, Tailwind config, landing pages, and package.json to summarize existing project context before asking you targeted questions about your brand.

When should I not use an interactive design brief generator for my project?

You should not use an interactive design brief generator when you already have a rigid, non-negotiable design schema or if you need to bypass the 5-7 question Q&A process. The skill requires interactive input and repository exploration to function properly.