design-language

Generate a website design language from reference sites and brand guidelines.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/dxxx/Bot-OS --skill design-language-dxxx
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-language
Source: https://github.com/dxxx/Bot-OS/tree/main/skills/design-language
Command: npx skills add https://github.com/dxxx/Bot-OS --skill design-language-dxxx

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the process of creating original design languages for web projects, helping you avoid plagiarism and establish a coherent brand identity.

Core Features & Use Cases

  • Analyze and Synthesize: Break down existing websites to inspire a new design direction.
  • Custom Design Language: Build a design system that aligns with brand identity and audience needs.
  • Build-Ready Tokens: Provide tokens that are ready for implementation, including typography, colors, and spacing guidelines.
  • Workflow Automation: Offers structured phases for teardown, synthesis, and proposal of the design language.
  • Optional Proof: Optionally create a mockup to visualize the design language in action.
  • Orchestrator Compatibility: Designed to be used in coordination with other tools and processes within the project pipeline.

Quick Start

Utilize the 'design-language' skill by triggering it with "create a design language for my website".

Frequently Asked Questions about design-language

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

FAQPage Schema
How do I create a design language for a website using reference URLs?

To create a website design language, input competitor and inspiration URLs along with brand guidelines. The skill analyzes these references to synthesize an original system with typography, colors, and layout rules.

What is included in a generated website design language system?

A generated design language system includes typography, color schemes, layout guidelines, component standards, motion design principles, and build-ready tokens for immediate implementation.

Can I use this skill for a website redesign and brand development?

Yes, you can use this skill for website redesigns and brand development. It establishes a coherent brand identity and generates custom design systems aligned with audience needs.

How to avoid plagiarism when building a UI design language from inspiration?

Avoid plagiarism by using the skill's teardown and synthesis phases to break down existing websites. It extracts design directions to propose an original, coherent brand identity.

Does this design language skill provide visual mockups for UI design?

Yes, the skill optionally creates visual mockups. This provides optional proof to visualize the proposed design language, including its typography and component standards, in action.

Do I need brand guidelines to generate custom component standards and tokens?

Yes, providing brand guidelines is required. The skill uses these guidelines alongside reference URLs to generate custom component standards and build-ready design tokens.