design

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

Updated Apr 20, 2026
One-click install
npx skills add https://github.com/AmirEmad11/instabot --skill design-amiremad11
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/AmirEmad11/instabot/tree/main/.local/skills/design
Command: npx skills add https://github.com/AmirEmad11/instabot --skill design-amiremad11

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building frontend UIs requires both product planning and visual design judgment, and mixing the two in one agent produces generic, constrained results. This Skill lets the main agent hand off all visual decisions to a specialized DESIGN subagent by writing a well-scoped creative brief. ## Core Features & Use Cases - Subagent Delegation: Launch a DESIGN-specialized subagent via startAsyncSubagent or subagent with the required specialization parameter. - Three Task Modes: Supports fullstack apps (react-vite with backend hooks), mockup sandboxes (prototypes and variant exploration), and presentation-heavy pages (landing pages, portfolios, brand sites). - Brief Writing Guidance: Provides rules for product identity, vibe direction, emotional tone by app type, color mandates, and micro-interaction expectations. - Use Case: After planning a CRM app's pages, data types, and API hooks, delegate the entire UI build to the DESIGN subagent with a brief describing the product identity and routes, letting it own all layout, color, and typography decisions. ## Quick Start Delegate the frontend build of my app to a DESIGN subagent with a creative brief covering the product identity, pages, data types, and API hooks.

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

Call startAsyncSubagent or subagent with specialization set to DESIGN and a task containing a creative brief. The brief should describe the product identity, pages, data types, and API hooks while leaving all visual decisions to the subagent.

What should a design brief include for a fullstack app?

Include a product identity sentence, a list of routes with one-line purposes, data types and fields, the exact API hook signatures from codegen, and any user-stated visual preferences. Do not prescribe layouts, colors, components, or page sections.

Can the design subagent run workflows or preview the app?

No. The subagent cannot run or restart workflows, preview or test the app, spawn nested subagents, or check console logs. Those responsibilities stay with the main agent that launched it.

What files should I pass to the design subagent?

Pass generated API client files, the main CSS theme file, the App.tsx entry point, the artifact package.json, and shared frontend conventions via relevantFiles. Pass implementation skills like auth or storage via relevantSkills, but not orchestration skills.

Why does my delegated UI come out generic or bland?

Generic output usually comes from a lazy or over-specified brief. Include a specific product identity sentence, a natural-language vibe, emotional charge appropriate to the app type, and an explicit instruction to make a deliberate color choice.