Agent skill
design-describe
[Design] Describe a design based on screenshot/video
Install this agent skill to your Project
npx add-skill https://github.com/duc01226/EasyPlatform/tree/main/.claude/skills/design-describe
SKILL.md
[IMPORTANT] Use
TaskCreateto break ALL work into small tasks BEFORE starting — including tasks for each file read. This prevents context loss from long files. For simple tasks, AI MUST ask user whether to skip.
Skill Variant: Variant of design skills — describe UI from screenshot or video.
Quick Summary
Goal: Analyze a screenshot or video and produce a detailed written description of the UI design.
Workflow:
- Analyze — Process the visual input (screenshot/video) using vision capabilities
- Describe — Write detailed description of layout, colors, typography, interactions
Key Rules:
- Use
ai-multimodalskill for image/video analysis - Focus on design elements: layout, spacing, colors, typography, interactions
Be skeptical. Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence percentages (Idea should be more than 80%).
Think hard to describe the design based on this screenshot/video: $ARGUMENTS
Required Skills (Priority Order)
ui-ux-pro-max- Design intelligence database (ALWAYS ACTIVATE FIRST)frontend-design- Visual analysis
Ensure token efficiency while maintaining high quality.
Workflow:
- Use
ai-multimodalskills 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.
- Use
ui-ux-designersubagent 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
## Namingsection. - 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.mdfiles 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).
- Create a directory using naming pattern from
- Report back to user with a summary of the plan.
Closing Reminders
- MUST break work into small todo tasks using
TaskCreateBEFORE starting - MUST search codebase for 3+ similar patterns before creating new code
- MUST cite
file:lineevidence for every claim (confidence >80% to act) - MUST add a final review todo task to verify work quality
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
fix-parallel
[Implementation] Analyze & fix issues with parallel fullstack-developer agents
ask
[Utilities] Answer technical and architectural questions.
claude-code
[Utilities] Claude Code CLI setup, configuration, troubleshooting, and feature guidance. Triggers on claude code setup, hook not firing, MCP connection, context limit, skill creation, slash command setup.
workflow-deployment
[Workflow] Trigger Deployment & Infrastructure workflow — CI/CD pipelines, Docker, Kubernetes setup and deployment.
workflow-idea-to-pbi
[Workflow] Trigger Idea to PBI workflow — po/ba workflow: capture idea, refine to pbi, create stories, prioritize.
easy-claude-help
[Utilities] Configuration guide for the easy-claude framework — explain settings, guide users through configuring .ck.json.
Didn't find tool you were looking for?