skills.rest
joi-fairshare
joi-fairshareCOMMUNITY
Explore all skills by this author →
GitHub

design-language

Extract brand personality signals and token data from reference URLs via Playwright.

1|2|Updated Mar 19, 2026
Search Tags:#playwright#design-tokens#design-language#aesthetic-direction#brand-personality#gap-filling
One-click install
npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-language-joi-fairshare
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-language
Source: https://github.com/joi-fairshare/agentic-workflow/tree/main/skills/design-language
Command: npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-language-joi-fairshare

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill turns scattered visual references into a unified brand personality and token system so teams can align on aesthetic direction without manually inspecting every mockup or guessing design rules.

Core Features & Use Cases

  • Playwright reference mining extracts colors, typography, spacing, radii, motion cues, and component signals from the provided URLs while warning the user before any browser automation.
  • Gap-filling Q&A rounds out the missing context around users, emotions, anti-references, WCAG goals, and platform constraints through guided questions that build on the extracted patterns.
  • Deliverables include a W3C DTCG design-tokens.json and a narrative .impeccable.md, optionally overwriting existing files only after explicit confirmation, so the team gains both machine-readable tokens and a descriptive brand brief.

Quick Start

Run the design-language skill with reference URLs to generate tokens and a shared aesthetic brief.

Frequently Asked Questions about design-language

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

FAQPage Schema
How do I extract design tokens from reference websites automatically?▼

You can extract design tokens from reference URLs by running Playwright browser automation to mine colors, typography, spacing, radii, and motion cues, then generate a W3C DTCG design-tokens.json file.

Can I generate a brand personality brief from scattered visual references?▼

Yes, gap-filling Q&A rounds out missing context around users, emotions, and anti-references extracted from visual references, producing a narrative .impeccable.md brand brief alongside the token system.

How do I create a cohesive design language for my team without manually inspecting mockups?▼

Provide reference URLs to the skill for automated Playwright analysis, then answer guided questions about voice, colors, typography, WCAG posture, and platform constraints to align aesthetic direction.

Does the design-language skill require any dependencies or browser setup?▼

No dependencies are required, but the skill warns the user before initiating any browser automation via Playwright to extract component signals and visual patterns from the provided reference URLs.

Will generating new design tokens overwrite my existing configuration files?▼

The skill safely overwrites existing design-tokens.json and .impeccable.md artifacts only after receiving explicit confirmation during the interactive Q&A session, ensuring no accidental file loss.

What is the best way to align a team on aesthetic direction from multiple reference URLs?▼

Automated Playwright reference mining extracts visual patterns from URLs, and guided gap-filling questions capture WCAG goals and platform constraints, delivering both machine-readable tokens and a shared descriptive brief.

Related Skills

Explore More Design & Creative Skills→
AndreaRR18AndreaRR18

Web Designer

Audit React website visual design, UX, and WCAG 2.1 AA accessibility.

Community
Advanced
soo-kate-yeonsoo-kate-yeon

moai-domain-uiux

Guide UI/UX design systems with W3C DTCG 2025.10 tokens and WCAG 2.2 accessibility.

Community
Advanced
projectedanxprojectedanx
1

design-md

Manage design tokens and component specifications in machine-readable DESIGN.md files.

Community
Intermediate
irahardiantoirahardianto

brand-identity-creator

Generate brand identity guidelines documents from brand core data.

Community
Basic