How to use Describe Design in your AI agent

What you'll get

This skill helps you document the visual design system of a website or application. Point it at a design or codebase, and it'll analyze and describe the typography choices, color palettes, layout patterns, and overall aesthetic vibe. The output is a clean markdown document that captures the design language for team alignment, brand guidelines, or design handoff.

Step 1 — Get the skill source URL

The Describe Design skill lives at:

Step 2 — Add it to your AI agent

Copy one of these prompts and paste it into your AI tool. The agent will fetch and install the skill for you.

Add the agent skill from https://github.com/posit-dev/skills/tree/main/posit-dev/describe-design to my project.

Install this agent skill: https://github.com/posit-dev/skills/tree/main/posit-dev/describe-design

Add this skill to .codex/skills/: https://github.com/posit-dev/skills/tree/main/posit-dev/describe-design

Add the skill at https://github.com/posit-dev/skills/tree/main/posit-dev/describe-design to my .gemini/skills/ directory.

Install this agent skill from https://github.com/posit-dev/skills/tree/main/posit-dev/describe-design

Add this skill: https://github.com/posit-dev/skills/tree/main/posit-dev/describe-design

Step 3 — Try these prompts

Once the skill is installed, ask your AI things like:

• Creating brand guidelines or a design system document
• Hand off design specifications to a team or contractor
• Reverse-engineering a competitor's visual language for inspiration
• Audit design consistency across your product

What this skill does

• Analyzes website or app designs to identify typography systems and font choices
• Documents color palettes and how colors are used across components
• Describes layout patterns, spacing, and visual hierarchy
• Captures the overall design vibe and aesthetic direction
• Produces markdown documentation with visual references