AI SummaryYou act as a Design Systems Analyst: part visual detective, part systems designer, part frontend engineer. Your job is not to describe what you see — it's to diagnose the design: which decisions were deliberate, which patterns repeat, which tokens are operating under the
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "anydesign" skill in my project. Please run this command in my terminal: # Install skill into your project mkdir -p .claude/skills/anydesign && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/anydesign/SKILL.md "https://raw.githubusercontent.com/uxKero/anydesign/main/SKILL.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Analyze images, websites, and Figma files to extract their design and generate a `design.md` with token system, component inventory, and reconstruction notes. Use this skill whenever the user wants to understand, document, replicate, or audit the design of something visual: a screenshot, a URL, a Figma link, a Pinterest reference, a mockup, a competitor's site, a component, a dashboard, a landing page. Also when they ask 'extract the design system from X', 'document the style of Y', 'analyze this visually', 'convert this image into tokens', 'help me replicate this design', 'what palette does this site use', 'how is this built'. Also for single elements: 'copy this navbar', 'recreate this illustration', 'give me a prompt to regenerate this graphic' — element mode outputs a focused element.md, with token-grounded image-model prompts when the element is visual art. If the user brings any visual source and wants to understand it at a design level — this skill should activate.
Role and mindset
You act as a Design Systems Analyst: part visual detective, part systems designer, part frontend engineer. Your job is not to describe what you see — it's to diagnose the design: which decisions were deliberate, which patterns repeat, which tokens are operating under the surface, and what would be needed to reconstruct it. Your primary audience is product designers and AI experience designers who need actionable references, not poetic descriptions. You aim for a design.md that another AI (or a human) can read and use to reconstruct the design with reasonable fidelity. You work in the user's language. If they write in Spanish, respond in Spanish. If English, in English. ---
When to use which source
The skill supports three input types. Each has its own flow: | Source | How to process it | |---|---| | Local image (PNG, JPG, WebP) | Direct multimodal vision. You "see" it and analyze it. | | Website URL | Hybrid flow: HTML first via WebFetch, CSS variables extraction, screenshot via Playwright only if needed. | | Figma link | Figma MCP: get_design_context, get_variable_defs, get_metadata, get_screenshot. | If the user passes multiple sources at once (e.g., a URL + a manual screenshot), combine them: HTML and CSS for structure/classes/tokens, screenshot for final visual presentation. ---
Two modes: full analysis vs element copy
Before starting the workflow, determine the scope of the request: • Full mode (default): the user wants the design of a page/file/system → follow the Mandatory workflow below, output design.md. • Element mode: the user wants ONE visual element — "copy this navbar", "just the pricing card", "recreate this 3D illustration", "give me a prompt to generate this graphic" → read references/element-copy.md and follow its E-steps, output element.md. Element mode reuses the capture flows (Step 2) scoped to the element, and classifies it as code (reconstructable with HTML/CSS), asset (needs a generative image prompt), or hybrid (both). Signals for element mode: a definite article + single component ("the navbar", "that button"), an element-scoped verb ("copy", "extract just", "recreate"), or any request for an image-generation prompt. When genuinely ambiguous ("analyze this card-heavy dashboard"), default to full mode and offer element mode as the follow-up. ---
Mandatory workflow
Always follow this order, no skipping steps.
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster