skills.rest
pcatattacks
pcatattacksCOMMUNITY
Explore all skills by this author →
Website𝕏@pcatattacksGitHub

design

Generate design briefs, user flows, and HTML mockups from a feature spec.

14|1|Updated Feb 20, 2026
Search Tags:#design#ui#mockups#user-flow#visual-direction#design-brief
One-click install
npx skills add https://github.com/pcatattacks/solopreneur-plugin --skill design-pcatattacks
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/pcatattacks/solopreneur-plugin/tree/main/skills/design
Command: npx skills add https://github.com/pcatattacks/solopreneur-plugin --skill design-pcatattacks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps product teams define clear visual direction by generating design briefs, user flows, and UI mockups from a feature spec or directory.

Core Features & Use Cases

  • Generate a design brief detailing user flows, screen inventory, and visual direction via an integrated designer agent.
  • Produce HTML screen mockups for each screen using a shared design system, ready for review.
  • Save outputs to the .solopreneur/designs/{date}-{slug} path for organized handoffs and versioning.

Quick Start

Provide a design target or directory path to generate a design brief and screen mockups.

Frequently Asked Questions about design

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

FAQPage Schema
How do I generate UI mockups and a design brief from a feature spec?▼

To generate UI mockups and a design brief, provide a feature spec or directory path. The Skill extracts visual direction and user flows, coordinating a designer agent to output an HTML mockup and screen inventory saved under .solopreneur/designs/.

What is the best way to create HTML screen mockups for user flows?▼

Creating HTML screen mockups for user flows requires defining a shared design system first. This Skill automates that process, translating feature specifications into ready-to-review HTML mockups and a comprehensive design brief.

Can I generate a screen inventory and visual direction from an existing project directory?▼

Yes, you can generate a screen inventory and visual direction from an existing project directory. The Skill analyzes the provided directory path to coordinate a designer agent for extracting component specs and producing structured UI/UX recommendations.

How does an automated designer agent handle design brief generation?▼

Automated design brief generation works by parsing your feature spec to establish visual direction. The integrated designer agent then maps out user flows and screen inventories, directly producing HTML mockups for immediate design review.

Where are generated design mockups and component specs saved?▼

Generated design mockups and component specs are saved locally under the .solopreneur/designs/{date}-{slug} path. This structure ensures organized handoffs and versioning for your UI/UX recommendations and HTML mockups.

Related Skills

Explore More Design & Creative Skills→
MartinoPoloMartinoPolo

gk-design-brief

Creates Grovekeeper UI component briefs and triggers /gk-mockup for visuals.

Community
Intermediate
103492-MaxPaardekam103492-MaxPaardekam
2

frontend-design

Generate HTML/CSS/JS frontend components with a bold aesthetic direction.

Community
Advanced
souki202souki202

frontend-design

Convert frontend requirements into reusable UI components across HTML/CSS, React, or Vue.

Community
Advanced
rohunvorarohunvora
5

html-tools

Build self-contained single-file browser tools with inline CSS and JavaScript.

Community
Basic