skills.rest
LGugui
LGuguiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-intelligence

Extract and document design systems from CSS, Figma, and images.

Updated Jun 5, 2026
Search Tags:#CSS#visual design#design analysis#pattern extraction#Figma
One-click install
npx skills add https://github.com/LGugui/cerebro-template --skill visual-intelligence-lgugui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-intelligence
Source: https://github.com/LGugui/cerebro-template/tree/main/.claude/skills/visual-intelligence
Command: npx skills add https://github.com/LGugui/cerebro-template --skill visual-intelligence-lgugui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Visual-Intelligence helps developers quickly analyze and extract design patterns from code and visual references, saving time on front-end design research and implementation.

Core Features & Use Cases

  • Visual Pattern Extraction: Automatically extract and document CSS, Tailwind, and Figma design patterns from code and visual assets.
  • Design Reference Analysis: Analyze screenshots, URLs, and code snippets to replicate and improve visual designs.
  • Use Case: When working on a new project and need to understand how existing design components work or to find design inspiration, Visual-Intelligence can be used to quickly gather the necessary information.

Quick Start

Activate the visual-intelligence skill when analyzing the visual design of a new component by using the command /absorver and providing a URL, screenshot, or code snippet.

Frequently Asked Questions about visual-intelligence

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design patterns from existing CSS and Figma files?▼

You can extract design patterns from CSS and Figma files by providing screenshots, URLs, or code snippets. The skill parses these sources to automatically document UI components, style guidelines, and visual design systems for front-end implementation.

Can I analyze a screenshot to replicate its visual design?▼

Yes, you can analyze a screenshot to replicate its visual design by activating the skill with an image input. It processes the visual asset to extract underlying CSS patterns and document the UI components for quick front-end implementation.

Does this tool work with Tailwind CSS for design system documentation?▼

Yes, this tool works with Tailwind CSS for design system documentation by automatically extracting and documenting visual patterns from Tailwind code. It recognizes the framework's utility classes to help developers quickly understand and implement the extracted design components.

What's the best way to document a UI component design system from a URL?▼

The best way to document a UI component design system from a URL is to input the link directly for web scraping and CSS parsing. This automatically extracts the visual patterns and generates comprehensive style guidelines for the design system.

Do I need to manually inspect web pages to extract style guidelines?▼

No, you do not need to manually inspect web pages to extract style guidelines. The skill automates visual design analysis by scraping URLs and parsing CSS to quickly gather and document the necessary design pattern information.

Related Skills

Explore More Design & Creative Skills→
MatheusrlrMatheusrlr
1

figma-implement-design

Translate Figma designs into production-ready code with visual fidelity.

Community
Advanced
cookeyholdercookeyholder

frontend-ui-engineering

Design and implement accessible UI components with design-system rules.

Community
Intermediate
OneWave-AIOneWave-AI
245

screenshot-to-code

Convert UI screenshots into responsive HTML, CSS, React, or Vue code.

Official
Advanced
AradotsoAradotso
3

figma-mcp-bridge

Stream live Figma document data to AI tools via MCP.

Official
Intermediate