home / skills / duc01226 / easyplatform / design-describe
This skill helps you describe a design from a screenshot or video with detailed UI/UX guidance and implementation-ready specifics.
npx playbooks add skill duc01226/easyplatform --skill design-describeReview the files below or copy the command above to add this skill to your agents.
---
name: design-describe
description: "[Design & Content] Describe a design based on screenshot/video"
argument-hint: [screenshot]
infer: true
---
Think hard to describe the design based on this screenshot/video:
<screenshot>$ARGUMENTS</screenshot>
## Required Skills (Priority Order)
1. **`ui-ux-pro-max`** - Design intelligence database (ALWAYS ACTIVATE FIRST)
2. **`frontend-design`** - Visual analysis
**Ensure token efficiency while maintaining high quality.**
## Workflow:
1. Use `ai-multimodal` skills to describe super details of the screenshot/video so the developer can implement it easily.
- Be specific about design style, every element, elements' positions, every interaction, every animation, every transition, every color, every border, every icon, every font style, font size, font weight, every spacing, every padding, every margin, every size, every shape, every texture, every material, every light, every shadow, every reflection, every refraction, every blur, every glow, every image, background transparency, etc.
- **IMPORTANT:** Try to predict the font name (Google Fonts) and font size in the given screenshot, don't just use Inter or Poppins.
2. Use `ui-ux-designer` subagent to create a design implementation plan following the progressive disclosure structure so the result matches the screenshot/video:
- Create a directory using naming pattern from `## Naming` section.
- Save the overview access point at `plan.md`, keep it generic, under 80 lines, and list each phase with status/progress and links.
- For each phase, add `phase-XX-phase-name.md` files containing sections (Context links, Overview with date/priority/statuses, Key Insights, Requirements, Architecture, Related code files, Implementation Steps, Todo list, Success Criteria, Risk Assessment, Security Considerations, Next steps).
3. Report back to user with a summary of the plan.
## IMPORTANT Task Planning Notes
- Always plan and break many small todo tasks
- Always add a final review todo task to review the works done at the end to find any fix or enhancement needed
This skill analyzes a screenshot or video and produces a precise, developer-ready description of the visual design. It focuses on exhaustive, implementation-oriented details—layout, typography, spacing, colors, interactions, and micro-animations—so engineers can reproduce the UI accurately. The output is compact, actionable, and organized to support phased implementation planning.
Provide a screenshot or short video and the skill inspects every visible element: containers, grids, icons, images, and text blocks. It predicts likely Google Fonts and sizes, extracts color values, measures spacing and sizes in pixels, and enumerates interaction states, transitions, and animation easing. It then builds a progressive implementation plan split into small tasks and produces a concise plan summary for execution.
How accurate are font and size predictions?
Predictions use visual cues and common web fonts (Google Fonts) and are usually close; confirm with brand files for absolute accuracy.
What format does the implementation plan use?
The plan is organized into progressive phases with small actionable tasks, acceptance criteria, and a final review task to ensure polish.