skills.rest
dev-eloper1
dev-eloper1COMMUNITY
Explore all skills by this author →
GitHub

cl-designer

Generate design systems, screen mockups, and implementation task lists.

Updated Feb 10, 2026
Search Tags:#design#design system#components#ui/ux#prototyping#mockups
One-click install
npx skills add https://github.com/dev-eloper1/clarity-loop --skill cl-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cl-designer
Source: https://github.com/dev-eloper1/clarity-loop/tree/main/skills/cl-designer
Command: npx skills add https://github.com/dev-eloper1/clarity-loop --skill cl-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

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

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.

Frequently Asked Questions about cl-designer

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

FAQPage Schema
How do I generate a design system from product requirements?▼

To generate a design system from product requirements, use the skill to automate the creation of design tokens, reusable components, and visual quality rules through conversational discovery.

What's the best way to turn UI mockups into developer implementation tasks?▼

The best way to turn UI mockups into developer implementation tasks is to use the skill's automated pipeline, which produces phased task lists and build plans based on your generated screen mockups.

Can I create screen mockups without a dedicated visual design tool?▼

Yes, you can create screen mockups without a dedicated visual design tool by using the markdown fallback for documentation-only workflows, or by integrating Pencil MCP for visual artifact generation.

Does cl-designer support creating component libraries and design tokens?▼

Yes, cl-designer supports creating component libraries and design tokens by automating the UI/UX design pipeline to output structured design system documentation and visual quality rules.

Do I need Pencil MCP to generate UI mockups?▼

You do not need Pencil MCP to generate UI mockups; the skill supports Pencil MCP for visual artifact generation but also provides a markdown fallback for documentation-only workflows.

Related Skills

Explore More Design & Creative Skills→
anderson-0anderson-0
4

create-ux-design

Create DESIGN.md and EXPERIENCE.md UX specification artifacts.

Community
Advanced
semicolon-devteamsemicolon-devteam

generate-mockup

Generate UI mockups from design requirements using the 21st_magic_component_builder.

Official
Advanced
giadaf-booshagiadaf-boosha
10

flowy-visual

Generate JSON-based flowcharts and iOS component mockups for UI/UX design.

Community
Intermediate
dirnbauerdirnbauer
33

frontend-design

Design frontend interfaces with typography, color palettes, motion, and CSS/HTML examples.

Community
Basic