cl-designer

Community

From ideas to visual designs, effortlessly.

Authordev-eloper1
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill bridges the gap between vague ideas and concrete visual designs, automating the creation of design systems, screen mockups, and implementation task breakdowns.

Core Features & Use Cases

  • Automated Design System Generation: Creates design tokens, reusable components, and visual quality rules.
  • Screen Mockup Creation: Generates visual screen designs based on the design system.
  • Implementation Task Breakdown: Produces phased task lists for developers.
  • Use Case: Kickstart a new project's UI by describing your product vision, and have the Skill generate a complete design system and initial mockups, ready for developer implementation.

Quick Start

Use the cl-designer skill to start the UI design process for the project.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: cl-designer
Download link: https://github.com/dev-eloper1/clarity-loop/archive/main.zip#cl-designer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.