Experiment

SSO Configuration Wizard

Step-by-step SAML identity provider setup with XML uploads and attribute mapping.

Prompt

Create an SSO/SAML Configuration Wizard for an enterprise SaaS platform. This should be a step-by-step wizard interface with the following steps: 1. Choose Identity Provider - Select from Okta, Azure AD, Google Workspace, OneLogin, or Custom SAML 2. Upload Metadata - XML file upload or manual entry of SSO URL, Entity ID, and Certificate 3. Attribute Mapping - Map IdP attributes (email, firstName, lastName, department, role) to application fields 4. Test Connection - Simulate authentication with success/error states Include: - Progress indicator showing current step - Back/Next navigation - Form validation - A sidebar or panel showing configuration summary Use light mode. Build with React, TypeScript, and Tailwind CSS.

Default ClaudeOpen
Observations
  • Basic step indicator
  • Standard form inputs
  • Generic card styling
  • Minimal visual hierarchy
  • No design direction
With SkillOpen
Improvements
  • Sophistication & Trust direction
  • Cool slate color foundation
  • Monospace for technical data
  • Crafted upload dropzone
  • Multi-layered shadows on cards