next-variant

Name: next-variant
Availability: InStock
Author: npc-live

Extract visual style tokens from URLs or content into UI skill combinations.

168|13|Updated Mar 20, 2026

Search Tags:#typography #design #ui #color #website-analysis #style-extraction #skill-composition

Ready to run

npx skills add https://github.com/npc-live/clawfirm --skill next-variant

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: next-variant
Source: https://github.com/npc-live/clawfirm/tree/main/app/assets/skills/next-variant
Command: npx skills add https://github.com/npc-live/clawfirm --skill next-variant

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Next Variant Style Engine analyzes a website's visual language to identify design tokens and produce UI skill combinations for color, layout, typography, and style.

Core Features & Use Cases

URL-driven style extraction: fetches HTML/CSS, derives tokens like background, text color, font, spacing, and radius.
Skill composition: maps tokens to existing skill presets and outputs a ready-to-use four-skill combo.
Content-driven prompts: accepts descriptive content to suggest styles for landing pages, dashboards, or portfolios.

Quick Start

Provide a website URL or a content description to receive a ready-to-use four-skill UI combo.

Frequently Asked Questions about next-variant

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

FAQPage Schema

How do I extract design tokens from a website URL for UI generation?▼

To extract design tokens from a website URL, provide the link to the Next Variant Style Engine. It fetches HTML and CSS to derive background, text color, font, spacing, and radius tokens, mapping them to a ready-to-use UI skill combination for UI generation.

Can I generate a UI skill combination from a descriptive content prompt instead of a URL?▼

Yes, you can generate a UI skill combination from a descriptive content prompt. The engine accepts descriptive content to suggest styles for landing pages, dashboards, or portfolios, returning a ready-to-use four-skill combo for UI generation.

What is style extraction and how does it map to UI skill components?▼

Style extraction analyzes a website to identify visual design tokens and maps them to UI skill components. It detects color, layout, typography, and style selections, ensuring the output adheres to the skill taxonomy for UI generation.

Does this style engine work with live websites and text descriptions?▼

Yes, the style engine works with both live websites and text descriptions. It applies visual style detection to live website URLs and descriptive prompts, returning a ready-to-use four-skill combination for UI generation.

What visual style tokens are detected when analyzing a website's design?▼

When analyzing a website's design, the engine detects visual style tokens including background color, text color, font family, spacing, and border radius. These tokens are mapped to existing skill presets to create a UI skill combination.