Anydesign

Extract the design of a screenshot, website URL or Figma file into a design.md with tokens, components, layout and brand rules, or copy one element (navbar, card, illustration) into an element.md with a rebuild or image-generation prompt. Use when the user wants to document, replicate, audit or reverse-engineer a visual design: its design system, palette, typography or style.

236 stars 14 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add uxKero/anydesign --skill anydesign

Manual install

git clone --depth 1 https://github.com/uxKero/anydesign.git /tmp/anydesign
mkdir -p ~/.claude/skills
cp -r /tmp/anydesign/. ~/.claude/skills/anydesign

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# AnyDesign: design analysis and documentation

## Role

You are a **Design Systems Analyst**: part visual detective, part systems designer, part
frontend engineer. Don't describe what you see; **diagnose the design**: which decisions
were deliberate, which patterns repeat, which tokens operate under the surface, and what it
would take to rebuild it. The reader is a designer or another AI that will reconstruct the
design from your file. Work in the user's language.

## Two modes

- **Full mode** (default): the design of a page, file or system → the workflow below,
  output `design.md`.
- **Element mode**: ONE 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`.

Signals for element mode: a definite article plus a single component ("the navbar"), an
element-scoped verb ("copy", "extract just", "recreate"), or any request for an
image-generation prompt. Ambiguous ("analyze this card-heavy dashboard") → full mode, and
offer element mode as the follow-up.

## Token budget (applies to every step)

Every tool call re-sends the whole conversation, so whatever enters the context early is
paid again on each later turn. A careless URL run measured 51 model calls and a 209k-token
context. Keep it lean:

- **Run scripts, never open their source.** `--help` is enough if a flag is unclear.

Read the full skill on GitHub

Details

Skill name: anydesign
Repository: uxKero/anydesign
License: MIT
Repo updated: 15 September 2026
Listed in: ComposioHQ/awesome-claude-skills

FAQ

What does the Anydesign skill do?

How do I install the Anydesign skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add uxKero/anydesign --skill anydesign. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Anydesign popular?

It lives in uxKero/anydesign, which has 236 GitHub stars and 14 forks, and is included in 1 curated skill list.

Related skills

Naming

128

glacierphonk/naming

Name products, SaaS, brands, open source projects, bots, and apps. Use when the user needs to name something, find a brand name, or pick a product name. Metaphor-driven process that produces memorable, meaningful names and avoids AI slop.

Frontend & DesignIn 3 lists14

Dashmotion

184

csthink/dashmotion

Create dark-themed, animated technical diagrams as self-contained HTML+SVG files — flowcharts whose connectors visibly flow, and architecture diagrams where requests travel as light dots through the system (Diagrid/Temporal landing-page style). Use this skill whenever the user asks for a flowchart, workflow, pipeline, process diagram, state machine, system architecture, infrastructure, cloud, microservices, or network topology diagram — and especially when they mention "animated", "flowing", "dynamic", "alive", "GIF-like", or want a diagram for a landing page, README, docs, or product demo. Al

Frontend & DesignIn 2 lists16

AI Game Art Pipeline

306

ybuild-ai/ai-game-art-pipeline-skill

Provider-neutral open-source skill for planning and producing game-runtime art assets and animation: static props/icons, canonical character sheets, combat sprites, 3D/video motion references, Veo/Seedance-style video-to-frames, cinematic ultimates, backgrounds, FX, SFX, runtime packaging, and QA. Use when building actual game assets for PixiJS/Canvas/Unity/Godot/SpriteKit/etc., not one-off marketing images.

Frontend & Design

Oil Icon

322

oil-oil/oil-icon

生成风格统一的图标集合，通过宫格生图、切分和去背景交付透明 PNG。用户需要成套自定义图标、栏目图标或匹配品牌风格的图标时使用；不用于单个简单矢量图标或小尺寸密集功能符号。

Frontend & Design30

UX Writing

249

content-designer/ux-writing-skill

Create user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms, onboarding, empty states, success messages, and help text. Use when writing or editing any text that appears in apps, websites, or software interfaces, designing conversational flows, establishing voice and tone guidelines, auditing product content for consistency and usability, reviewing UI strings, or improving existing interface copy. Applies UX writing best practices based on four quality standards — purposeful, concise, conversational, and clear

Frontend & Design28

Sanity Best Practices

194

sanity-io/agent-toolkit

Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, webhooks, Blueprints, and framework integrations such as Next.js, Nuxt, Astro, Remix, SvelteKit, Angular, Hydrogen, the App SDK, and Studios or apps running in the Sanity Dashboard (defineApplication). Use this skill whenever working with Sanity schemas, defineType or defineField, GROQ or defineQuery, content modeling, Presentation or preview setups, Sanity-powered frontend integrations, event-driven content automation,

Frontend & DesignIn 1 list31

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.