skills.rest
tunneleven
tunnelevenCOMMUNITY
Explore all skills by this author →
GitHub

c4flow:design

Generate design systems and UI mockups for specified features.

Updated Mar 14, 2026
Search Tags:#design#ui#design system#ux#mockups
One-click install
npx skills add https://github.com/tunneleven/C4Flow --skill c4flow-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: c4flow:design
Source: https://github.com/tunneleven/C4Flow/tree/main/skills/design
Command: npx skills add https://github.com/tunneleven/C4Flow --skill c4flow-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the need to create a visual design system and mockups for a new feature, ensuring a cohesive and user-friendly interface.

Core Features & Use Cases

  • Design System Generation: Creates foundational elements for a consistent user interface.
  • Mockup Creation: Produces visual representations of the feature's user interface.
  • Use Case: When developing a new e-commerce feature, this skill can generate the UI components and screen mockups needed for user testing and developer handoff.

Quick Start

Generate the design system and mockups for the new user profile page.

Frequently Asked Questions about c4flow:design

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

FAQPage Schema
How do I generate a design system for a new software feature?▼

To generate a design system, specify the feature you are developing. The tool produces foundational visual elements and UI component libraries, ensuring a cohesive interface for your application.

Can I create UI mockups for user testing and developer handoff?▼

Yes, you can create UI mockups for user testing and developer handoff. The tool generates visual representations of your feature's user interface, suitable for testing and engineering workflows.

What do I need to provide to generate UI components and screen mockups?▼

You need to provide a specified feature description. Based on this input, the tool generates the required UI components and screen mockups while adhering to UI/UX best practices.

Does this tool work with existing design systems for component creation?▼

The tool requires integration with design tools to create visual assets and component libraries. It supports foundational design system generation for cohesive user interfaces.

What is the best way to produce visual assets for an e-commerce feature?▼

The best way to produce visual assets is to request design system generation and mockup creation for your e-commerce feature. This yields the UI components and screen mockups needed.

Related Skills

Explore More Design & Creative Skills→
rafael-hcrafael-hc

frontend-blueprint

Guide UI discovery and generate atomic HTML/CSS components.

Community
Advanced
MayaDispelerMayaDispeler
3

design-system-implementation

Select and integrate UI component libraries with design token and accessibility standards.

Community
Advanced
campbellmcgregorcampbellmcgregor

design-assistant

Create UI/UX mockups, wireframes, and visual designs in React, HTML, or SVG.

Community
Basic
BENYEKHLEF-AnouarBENYEKHLEF-Anouar

designer-ui

Generate atomic-design UI assets and HTML mockups from wireframes.

Community
Advanced