design

Delegate frontend design work to a specialized DESIGN subagent with structured creative briefs.

Updated May 17, 2026
One-click install
npx skills add https://github.com/Amna-exe/EventFlow_App --skill design-amna-exe
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/Amna-exe/EventFlow_App/tree/main/Final-MAD-project-main-4zipzipzipzipzip-1-ite1zipzip/.local/skills/design
Command: npx skills add https://github.com/Amna-exe/EventFlow_App --skill design-amna-exe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building visually distinctive frontend interfaces requires design judgment that a general-purpose agent often lacks. This Skill lets the main agent delegate all frontend design work to a specialized DESIGN subagent, ensuring fullstack apps, landing pages, and mockup variants get deliberate visual direction instead of generic layouts. ## Core Features & Use Cases - Subagent Delegation: Launch a DESIGN-specialized subagent via startAsyncSubagent with a rich creative brief covering product identity, vibe, pages, data types, and API hooks. - Three Task Modes: Supports fullstack react-vite apps with backend hooks, mockup sandbox prototypes, and variant exploration with distinct vibes per variant. - Brand Grounding: Extracts real brand context (colors, fonts, logos, messaging) from existing company sites using extractBranding, imageSearch, and webFetch before delegating. - Use Case: When building a CRM dashboard, you write a brief with the product identity, route list, data types, and generated API hooks, then the DESIGN subagent makes all layout, color, typography, and motion decisions autonomously. ## Quick Start Ask the agent to delegate the frontend design of your app to the DESIGN subagent with a creative brief describing the product identity and vibe.

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 to a subagent?

Call startAsyncSubagent with specialization set to DESIGN and a task containing a creative brief. The brief must include a product identity sentence, vibe direction, page routes, data types, and available API hooks for fullstack apps.

What should a design brief include for a fullstack app?

Include product identity, vibe, a route list with one-line purposes, data types and fields, exact API hook signatures from the generated client, and the instruction to avoid emojis. Do not prescribe layouts, colors, or UI components.

Can the design subagent use real brand assets from an existing website?

Yes, the main agent gathers brand context first using extractBranding for colors and fonts, downloads logos and images into the workspace, and passes local file paths via relevantFiles. The subagent cannot call these tools itself.

What is the difference between fullstack and mockup sandbox design tasks?

Fullstack tasks include API hooks, data types, and backend integration details, while mockup sandbox tasks have no backend and rely entirely on brand identity and vibe direction. Mockups require a target file path, shape ID, and dev server URL.

What can the DESIGN subagent not do?

The subagent cannot run or restart workflows, preview or test the app, spawn nested subagents, or check workflow and console logs. These remain the main agent's responsibility after the subagent finishes.