skills.rest
npc-live
npc-liveOFFICIAL
Explore all skills by this author →
GitHub

next-variant

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
One-click install
npx skills add https://github.com/npc-live/clawfirm --skill next-variant
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
FirzusFirzus
1

extract-theme

Extract a website's visual theme into shadcn/ui and Tailwind CSS v4 tokens.

Community
Advanced
hainamchunghainamchung
54

ui-ux-pro-max

Generate UI/UX design system recommendations from multi-domain data in ASCII or Markdown.

Community
Advanced
Chai-UnChai-Un

brand-guidelines

Codify Anthropic color, typography, and layout rules for design assets.

Community
Basic
CleanExpoCleanExpo
1

xaem-theme-ui

Generate visual themes and translate them into CSS variables, TypeScript tokens, Tailwind configs, and Framer Motion presets.

Community
Advanced