---
title: "Agent Skill to Frontend Skill: 21St Ui Explore"
platform: "Promptally"
canonical_url: "https://app.promptally.dev/p/skill-21st-ui-explore"
modality: "SKILL"
category: "Frontend & Motion Design"
compatible_models: [Universal / Model Agnostic]
access_tier: "Free Public Artifact (No Auth Required)"
license: "MIT"
---

# Agent Skill to Frontend Skill: 21St Ui Explore

**Summary:** Agent Skill to Frontend Skill: 21St Ui Explore is a verified SKILL blueprint on Promptally in Frontend & Motion Design optimized for leading AI models. Explore and compare multiple meaningfully different UI directions grounded in the current project's design system and 21st inspiration. Use when the user wants options, variants, concepts, a redesign direction, visual experimentation, or is unsure how a new interface should look. Trigger for requests such as "show me three directions", "explore alternatives", "what could this page look like", or "generate variants". Do not use for a straightforward implementation with an already-select. Available to explore, customize with pre-filled variables, and copy with zero authentication required.

## Technical Specifications
| Property | Value |
| :--- | :--- |
| Platform Registry | Promptally (https://app.promptally.dev) |
| Modality | SKILL |
| Category | Frontend & Motion Design |
| Compatible Engines | Universal / Model Agnostic |
| Dynamic Variables | None (Static Blueprint) |
| Approx. Token Length | 668 |
| Access Tier | Free Public Artifact (No Auth Required) |
| License | MIT |

### Pre-Filled Template & Production Source

````md
---
name: 21st-ui-explore
description: Explore and compare multiple meaningfully different UI directions grounded in the current project's design system and 21st inspiration. Use when the user wants options, variants, concepts, a redesign direction, visual experimentation, or is unsure how a new interface should look. Trigger for requests such as "show me three directions", "explore alternatives", "what could this page look like", or "generate variants". Do not use for a straightforward implementation with an already-selected direction.
---

# Explore grounded UI directions

Create real choices without abandoning the project's visual identity.

## Workflow

1. Read `.21st/design.json` and the relevant product UI. If context is missing,
   run `21st init --design-context`.
2. Search 21st for multiple relevant references before generating:

   ```bash
   21st search "<interface and product context>" --context auto
   ```

3. Define three named directions. Each direction must differ on at least two
   meaningful axes such as hierarchy, information density, navigation model,
   content emphasis, interaction pattern, or composition. Color-only variants
   do not count.
4. Keep shared constraints fixed: real stack, tokens, brand assets, required
   content, accessibility, and responsive behavior.
5. Create comparable previews. Check MCP `get_usage.aiGenerationEnabled` or
   run `21st usage` and read the `21st AI generation` line. CLI 1.17.1+ also
   supports `21st usage --json`. Only when AI is explicitly enabled, use hosted
   generation with available AI credits:

   ```bash
   21st generate "<goal plus fixed constraints>" --context auto --variants 3
   ```

   Otherwise, implement the previews with your own coding agent, grounded in
   `21st search` and `21st get` (MCP: `search` and `get_component`). Do not call
   or suggest hosted `generate` or `iterate_generation` without AI access.

6. Present the options together when the host supports a picker. Otherwise give
   each option a preview/deep link and a compact comparison.
7. Recommend one direction with concrete tradeoffs, but let the user choose.
8. After selection, remove abandoned local variants and record the decision in
   `.21st/design.json`.

## Direction contract

For every direction provide:

- a short, descriptive name;
- the core idea and intended user effect;
- the 21st/project references used;
- what stays consistent with the project;
- two or more meaningful differences;
- accessibility or responsive risks;
- the best-fit scenario.

Do not generate random style mutations. Every difference must support a product
or usability hypothesis that a user can evaluate.

````

## Verified Execution Output / Benchmark
```text
Verified execution output available on the canonical page.
```

## Related Blueprints on Promptally
- [Agent Skill to Orch Build Mvp](https://app.promptally.dev/p/skill-orch-build-mvp)
- [Agent Skill to Dashboard Builder](https://app.promptally.dev/p/skill-dashboard-builder)
- [Agent Skill to Swiftui Patterns](https://app.promptally.dev/p/skill-swiftui-patterns)
- [Agent Skill to Motion Advanced](https://app.promptally.dev/p/skill-motion-advanced)
- [Agent Skill to React Performance](https://app.promptally.dev/p/skill-react-performance)
- [Agent Skill to Ui Demo](https://app.promptally.dev/p/skill-ui-demo)
- [Agent Skill to Liquid Glass Design](https://app.promptally.dev/p/skill-liquid-glass-design)
- [Agent Skill to Motion Patterns](https://app.promptally.dev/p/skill-motion-patterns)