design

Delegates frontend design tasks to a specialized subagent for UI mockups and assets.

2|2|Updated Apr 3, 2026
One-click install
npx skills add https://github.com/tamnguyentommy-rgb/Routex_AI_Web_Project --skill design-tamnguyentommy-rgb
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/tamnguyentommy-rgb/Routex_AI_Web_Project/tree/main/.local/skills/design
Command: npx skills add https://github.com/tamnguyentommy-rgb/Routex_AI_Web_Project --skill design-tamnguyentommy-rgb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend design tasks often bottleneck product delivery; this skill delegates design work to a specialized subagent to accelerate UI exploration and ensure consistent design quality.

Core Features & Use Cases

  • Subagent-centric design: The DESIGN subagent generates UI briefs, mockups, and design assets based on the product context.
  • Variant exploration: Supports multiple design explorations via startAsyncSubagent or subagent interactions to compare options.
  • Safe handoff: Keeps core product logic intact while producing presentation-ready visuals and guidelines.
  • Collaboration: Passes relevantFiles and relevantSkills to align with existing project standards and tooling.

Quick Start

Provide a rich design brief to a DESIGN subagent with relevantFiles and relevantSkills, then review and iterate on the produced UI design artifacts.

Frequently Asked Questions about design

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

FAQPage Schema
How do I delegate frontend design tasks to a subagent without altering core business logic?

You can delegate frontend design tasks to a DESIGN subagent by providing a rich design brief with relevantFiles and relevantSkills. This generates UI mockups and design assets while keeping core product logic intact and ensuring visual consistency.

What is a DESIGN subagent and how does it handle UI mockup generation?

A DESIGN subagent is a specialized delegate for frontend visual development. It processes your design brief to generate UI mockups, visual guidelines, and presentation-ready assets, streamlining interface exploration without modifying underlying fullstack application logic.

Can I explore multiple design variants for the same mockup using subagents?

Yes, you can explore multiple design variants by initiating startAsyncSubagent or subagent interactions. This allows you to compare different UI design options and iterate on mockups based on the same product context and design brief.

Do I need to pass project files and skills to the DESIGN subagent?

Yes, passing relevantFiles and relevantSkills is required. This ensures the DESIGN subagent aligns with existing project standards, tooling, and context, enabling it to produce UI assets that integrate seamlessly with your current frontend environment.

What are the limitations of using a subagent for frontend design exploration?

The subagent focuses strictly on visual development and design assets, meaning it does not alter core business logic. It requires a rich frontmatter and a detailed design brief to function, limiting its use in scenarios lacking proper context.

Does the design subagent work for fullstack app mockups and design exploration?

Yes, the design subagent is applicable to fullstack apps, mockup sandboxes, and design exploration scenarios. It accelerates UI exploration by generating and refining multiple briefs into consistent, presentation-ready frontend visuals.