From the author
Extract a reference website's design system into DESIGN.md with tokens, layout, components, and imagery. Use for recreating its visual style or documenting UI patterns.
Install
npx skills add firecrawl/firecrawl-claude-plugin --skill design -a claude-code
Installs to .claude/skills/design/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Download .zip
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 85
Security100
Provenance69
Maintenance100
Licence100
Adoption40
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- design-systemanthropics/knowledge-work-pluginsAudit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.OfficialDesign★ 33.4K
- design-mdnexu-io/open-designCreate and manage DESIGN.md files. Useful for capturing design direction, tokens, and visual rules in a single source of truth.Design★ 104.3K
- anydesignInfrasity-Labs/dev-gtm-claude-skillsAnalyze 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.Design★ 146
- firecrawl-website-design-clonefirecrawl/skillsExtract an existing website's visual system into DESIGN.md, or collect its existing logo, colors, fonts and homepage messaging for a document. Use for reference-based UI implementation, documenting design patterns, or matching a presentation to a company's website. Excludes inventing a new brand or brand positioning.Design★ 138
- oma-designfirst-fluke/oh-my-agentDefine or review a visual system, DESIGN.md, or redesign direction. Use for typography, layout, color, motion, and interaction design decisions.Design★ 1.4K
- extractskillmds/skillmdIdentifies reusable UI patterns, components, and design tokens, then extracts and consolidates them into a design system for systematic reuse.Design★ 190
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in