skills.rest
RebelliousSmile
RebelliousSmileCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

define

Generate design systems from visual references or written briefs.

1|Updated Mar 3, 2026
Search Tags:#design system#ui/ux design#visual reference#token extraction#brief processing
One-click install
npx skills add https://github.com/RebelliousSmile/my-claude-marketplace --skill define-rebellioussmile
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: define
Source: https://github.com/RebelliousSmile/my-claude-marketplace/tree/main/plugins/design/skills/define
Command: npx skills add https://github.com/RebelliousSmile/my-claude-marketplace --skill define-rebellioussmile

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Pillow, requests, BeautifulSoup, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of creating design systems, reducing the complexity of starting from scratch or extracting design elements from visual references.

Core Features & Use Cases

  • Design System Creation: Generate design systems from written briefs or visual references.
  • Token Extraction: Automatically extract tokens from visual references or derive them from briefs.
  • Use Case: With this Skill, you can quickly create a design system for a new project by either providing a visual reference or a detailed brief.

Quick Start

To start, provide the 'define' skill with a visual reference or a brief for your design project.

Frequently Asked Questions about define

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

FAQPage Schema
How do I create a design system from a visual reference?▼

To create a design system from a visual reference, provide the image to the tool. It uses Python libraries like Pillow and BeautifulSoup to parse visual data and automatically extract design tokens for your UI/UX workflow.

Can I generate UI/UX design tokens directly from a written brief?▼

Yes, you can generate UI/UX design tokens from a written brief. The tool applies natural language processing to derive the necessary tokens and generate system documentation from your text input.

What libraries are needed to extract design tokens from images?▼

Extracting design tokens from images requires the Pillow, requests, and BeautifulSoup Python libraries to handle visual data parsing and processing tasks effectively.

What is the best way to automate design system documentation for a new project?▼

The best way to automate design system documentation is to input a detailed brief or visual reference, allowing the tool to derive tokens and output the required system documentation automatically.

Does token extraction work with URLs or do I need local assets?▼

Token extraction works with URLs by using the requests library to fetch data, though you can also process local assets stored within your project directory using Pillow.

Related Skills

Explore More Design & Creative Skills→
SheshiyerSheshiyer
4

python-executor

Execute Python code in isolated CPU-only sandboxes with preinstalled libraries.

Community
Intermediate
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
NVIDIA-NeMoNVIDIA-NeMo
58

ux-guidelines

Standardize user interface design and component implementation within NeMo Studio.

Official
Basic
Starchild-ai-agentStarchild-ai-agent
1

@349/starchild-design-pack

Design interfaces and generate Starchild design tokens for frontend code changes.

Official
Advanced