skills.rest
The13thNode
The13thNodeCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Create a design direction and React component mockups for a product feature.

3|Updated Mar 26, 2026
Search Tags:#design#research#react#design-system#consultation#mockup
One-click install
npx skills add https://github.com/The13thNode/VibeCorp_PromptCEO --skill design-consultation-the13thnode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/The13thNode/VibeCorp_PromptCEO/tree/main/skills/public/design-consultation
Command: npx skills add https://github.com/The13thNode/VibeCorp_PromptCEO --skill design-consultation-the13thnode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The lack of a coherent design direction and realistic mockups when starting a new product area leads to indecision, wasted effort, and inconsistent UI.

Core Features & Use Cases

  • Competitive Landscape Research: Reviews 5‑8 related products and extracts stealable ideas.
  • Design Principles & Creative Risks: Proposes guiding principles and bold concepts tailored to the brand.
  • Mockup Generation: Produces React component mockups based on approved principles and the design system.
  • Documentation: Compiles everything into DESIGN_DIRECTION.md for the team.

Quick Start

Run the design consultation skill to create a DESIGN_DIRECTION.md for the new feature “dashboard”.

Frequently Asked Questions about design-consultation

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

FAQPage Schema
How do I generate a design direction and mockups for a new product feature?▼

To generate a design direction and mockups, you need a process that defines product principles, analyzes competitors, and outputs React components. This approach compiles everything into a DESIGN_DIRECTION.md file to guide UI consistency.

What is included in a competitive landscape analysis for product design?▼

A competitive landscape analysis for product design reviews 5-8 related products to extract stealable ideas. It helps establish design principles and identify bold concepts tailored to your brand before generating mockups.

Do I need design system tokens to generate React component mockups?▼

Yes, you need access to design system tokens to generate React component mockups. The mockups are built based on approved design principles and these tokens to ensure visual consistency across the product UI.

How do I document design principles and creative risks for my team?▼

You document design principles and creative risks by compiling them into a DESIGN_DIRECTION.md file. This documentation captures the guiding principles, bold concepts, and mockup generation details for your product area.

Can I use this design consultation approach for early-stage product areas?▼

Yes, you can apply this design consultation approach to early-stage product areas. It is specifically built to create a comprehensive design direction and mockup set when starting new features to prevent wasted effort.

Related Skills

Explore More Design & Creative Skills→
aditisharma0204aditisharma0204

strategist

Frame product design problems into structured briefs for discovery and execution.

Community
Advanced
carson-sweetcarson-sweet
6

SweetClaude Mockup Graduate

Integrate approved UI mockups into a production React application.

Community
Advanced
wfukatsuwfukatsu
12

generate-frontend

Convert UI mockups into a React frontend with Atomic Design and react-router.

Community
Advanced
gvinokurgvinokur

ui-ux-designer

Generate standalone HTML mockups with React and MUI v7 components.

Community
Intermediate