superherono

Analyze Design — Design skill for Claude Code

Design community

Analyze a Figma design or HTML markup without generating code.

How to install Analyze Design

Installs to ~/.claude/skills/superherono-silince-gutenberg-builder-analyze-design/SKILL.md

Terminal
mkdir -p ~/.claude/skills/superherono-silince-gutenberg-builder-analyze-design && curl -fsSL https://raw.githubusercontent.com/superherono/silince-gutenberg-builder/HEAD/commands/analyze-design.md -o ~/.claude/skills/superherono-silince-gutenberg-builder-analyze-design/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Analyze Design does

Analyze a Figma design or HTML markup without generating code.

Alternatives in Design

  • Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
  • Polish UI — Polish UI elements by auditing SCSS and TSX markup against the Anytype design system, then fixing discrepancie 8.7k ★
  • Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★

Full documentation available on GitHub

View Source Repository

Related Skills

Create Block — Design skill for Claude Code

Create Block

Create a new Gutenberg block from a Figma design or HTML markup

Design community
Stark Reference — Design skill for Claude Code

Stark Reference

Analyze real shipped UI/UX references without copying visuals, then produce a structural reference extraction

Design community
Figma To CMS — Design skill for Claude Code

Figma To CMS

Analyze a Figma design frame and extract a CMS content schema — what's editable content vs decorative structur

Design community
Design Present — Design skill for Claude Code

Design Present

Generate an interactive HTML presentation from Figma screens — annotated walkthrough with transitions, speaker

Design community
Claude To Figma — Design skill for Claude Code

Claude To Figma

Turn Claude Design HTML exports into fully editable Figma files — semantic frames, auto-layout, components, an

Design community
Ascii Wireframes — Design skill for Claude Code

Ascii Wireframes

ASCII wireframes: sketch 3 layout hypotheses before Figma or HTML. A Claude Code skill for design teams.

Design community

Related Agents

Section Builder — Design agent for Claude Code

Section Builder

Builds one page section from a Figma node into this starter's conventions — tokens, spring motion, semantic ma

Design community
Figma Converter — Data & AI agent for Claude Code

Figma Converter

Convert Figma API design data (from figma_fetch.py) into clean prototype HTML using project design system toke

Data & AI community
Canvas To Code Extractor — Design agent for Claude Code

Canvas To Code Extractor

Decodes any design-source HTML (Claude Design bundle, Figma Export-to-Code, V0, Lovable, Webflow, generic HTML

Design community