> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superdesign.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Superdesign Agent Skill

> Learn how to integrate Superdesign Agent skills into your coding environment

<iframe width="100%" height="400" src="https://www.youtube.com/embed/AZYJWyWZ6pQ" title="Superdesign Agent Skills Tutorial" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Overview

This tutorial covers how to integrate and use Superdesign Agent skills within coding environments such as Cursor, Claude Code, or other coding agents. The Superdesign Agent allows you to create, modify, and manage UI designs by leveraging the full context of your existing codebase—enhancing the design workflow directly from your coding interface.

## Installation and Setup

<Steps>
  <Step title="Install the CLI">
    Install the Superdesign Command Line Interface (CLI):

    ```bash theme={null}
    npm install -g @superdesign/cli@latest
    ```
  </Step>

  <Step title="Login">
    Authorize via browser:

    ```bash theme={null}
    superdesign login
    ```
  </Step>

  <Step title="Add the Skill">
    Add the Superdesign skill to your coding agent:

    ```bash theme={null}
    npx skills add superdesigndev/superdesign-skill
    ```

    Skills can be added at:

    * **Project level** — Specific to a project, creating an `agents` folder with Super Design skills
    * **Global level** — Available across all projects, under a global agents folder
  </Step>
</Steps>

## Using Superdesign in Claude Code

Simply use the slash command to start designing:

```bash theme={null}
/superdesign help me design <your prompt>
```

## Using Superdesign in Cursor

Additional configuration is required for Cursor:

<Steps>
  <Step title="Add a new command">
    Go to **Cursor Settings → Rules and Commands** and add a new command named `superdesign`.
  </Step>

  <Step title="Copy skill content">
    Copy the `skill.md` content into this command.
  </Step>

  <Step title="Use the command">
    Now you can use `/superdesign` to invoke the design agent.
  </Step>
</Steps>

## Features and Functionalities

### Design Context Awareness

<CardGroup cols={2}>
  <Card title="New Projects">
    The agent generates clear requirements and a style guide for fresh projects.
  </Card>

  <Card title="Existing Projects">
    The agent analyzes your current UI and creates a `superdesign` folder containing:

    * A design system file with the entire context of your current design and product
    * Replica HTML of existing pages
  </Card>
</CardGroup>

This allows the agent to build designs on top of your existing design system.

### Interactive Design Process

* The agent prompts for clarifications and additional requirements to align with your needs
* It proposes multiple design options (banners, UI cards, etc.) for your feedback
* You can ask the agent to iterate and explore further design variations

### Flow and Multi-Page Design

Beyond single-page design, you can request the agent to design entire flows (e.g., a "schedule demo" flow). The agent generates multiple pages that are functional with interactive elements like clickable buttons.

## Implementation and Coding Integration

After finalizing a design:

<Steps>
  <Step title="Copy the design prompt">
    Copy the design prompt from Superdesign.
  </Step>

  <Step title="Send to coding agent">
    Send the prompt to any coding agent to inform implementation.
  </Step>

  <Step title="Fetch design context">
    Request the coding agent to fetch the design context and plan the implementation (typically by enabling "plan mode").
  </Step>

  <Step title="Multi-page support">
    Multi-select pages to generate comprehensive implementation prompts.
  </Step>
</Steps>

<Info>
  This workflow is consistent across different coding agents (Cursor, Claude Code, etc.), facilitating seamless design-to-code workflows.
</Info>