Inputs & configuration
Models: anthropic/claude-sonnet-4.5
Runs per config: 1
product
Stripe
notes
Keep it simple.
anthropic/claude-sonnet-4.5
33497ms · run #1
Output HTML
<body class="bg-gray-50 font-sans text-gray-900 antialiased">
<div class="max-w-3xl mx-auto p-6 space-y-6">
<!-- Header -->
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900">Settings</h1>
<p class="text-gray-600 mt-1">Manage your account settings and preferences</p>
</div>
<!-- Profile Section -->
<section class="bg-white rounded-lg border border-gray-200 p-6">
<h2 class="text-xl font-semibold mb-4">Profile</h2>
<ui-form class="space-y-4">
<div class="flex items-start gap-4">
<div class="flex-shrink-0">
<div class="w-20 h-20 rounded-full bg-indigo-100 flex items-center justify-center text-2xl font-semibold text-indigo-600">
JD
</div>
</div>
<div class="flex-1 space-y-4">
<ui-field>
<label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<input type="text" value="John Doe" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
</ui-field>
<ui-field>
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" value="john.doe@example.com" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
</ui-field>
</div>
</div>
<div class="flex justify-end pt-2">
<button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
Save Changes
</button>
</div>
</ui-form>
</section>
<!-- Password Section -->
<section class="bg-white rounded-lg border border-gray-200 p-6">
<h2 class="text-xl font-semibold mb-4">Change Password</h2>
<ui-form class="space-y-4">
<ui-field>
<label class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
<input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
</ui-field>
<ui-field>
<label class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
<input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
</ui-field>
<ui-field>
<label class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label>
<input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
</ui-field>
<div class="flex justify-end pt-2">
<button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
Update Password
</button>
</div>
</ui-form>
</section>
<!-- Notification Preferences -->
<section class="bg-white rounded-lg border border-gray-200 p-6">
<h2 class="text-xl font-semibold mb-4">Notification Preferences</h2>
<ui-state key="notifications" initial="{"email":true,"push":false,"marketing":true,"updates":false}">
<div class="space-y-4">
<div class="flex items-center justify-between py-3 border-b border-gray-100">
<div class="flex-1">
<h3 class="text-sm font-medium text-gray-900">Email Notifications</h3>
<p class="text-sm text-gray-500 mt-0.5">Receive email updates about your account activity</p>
</div>
<ui-switch
name="email"
checked
ui-change="notifications.email = $event.target.checked"
class="ml-4">
</ui-switch>
</div>
<div class="flex items-center justify-between py-3 border-b border-gray-100">
<div class="flex-1">
<h3 class="text-sm font-medium text-gray-900">Push Notifications</h3>
<p class="text-sm text-gray-500 mt-0.5">Receive push notifications on your devices</p>
</div>
<ui-switch
name="push"
ui-change="notifications.push = $event.target.checked"
class="ml-4">
</ui-switch>
</div>
<div class="flex items-center justify-between py-3 border-b border-gray-100">
<div class="flex-1">
<h3 class="text-sm font-medium text-gray-900">Marketing Emails</h3>
<p class="text-sm text-gray-500 mt-0.5">Receive emails about new features and promotions</p>
</div>
<ui-switch
name="marketing"
checked
ui-change="notifications.marketing = $event.target.checked"
class="ml-4">
</ui-switch>
</div>
<div class="flex items-center justify-between py-3">
<div class="flex-1">
<h3 class="text-sm font-medium text-gray-900">Product Updates</h3>
<p class="text-sm text-gray-500 mt-0.5">Get notified about product updates and releases</p>
</div>
<ui-switch
name="updates"
ui-change="notifications.updates = $event.target.checked"
class="ml-4">
</ui-switch>
</div>
</div>
</ui-state>
</section>
<!-- Danger Zone -->
<section class="bg-white rounded-lg border border-red-200 p-6">
<h2 class="text-xl font-semibold text-red-600 mb-4">Danger Zone</h2>
<ui-state key="deleteConfirm" initial="false">
<div class="space-y-4">
<div class="bg-red-50 border border-red-200 rounded-md p-4">
<h3 class="text-sm font-medium text-red-800 mb-1">Delete Account</h3>
<p class="text-sm text-red-700">Once you delete your account, there is no going back. Please be certain.</p>
</div>
<div ui-if="!deleteConfirm">
<button
type="button"
ui-click="deleteConfirm = true"
class="px-4 py-2 bg-red-600 text-white rounded-md font-medium hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
Delete Account
</button>
</div>
<div ui-if="deleteConfirm" class="space-y-3">
<div class="bg-yellow-50 border border-yellow-200 rounded-md p-4">
<p class="text-sm font-medium text-yellow-800">Are you absolutely sure?</p>
<p class="text-sm text-yellow-700 mt-1">This action cannot be undone. All your data will be permanently deleted.</p>
</div>
<div class="flex gap-3">
<button
type="button"
ui-click="deleteConfirm = false"
class="px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded-md font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
Cancel
</button>
<button
type="button"
class="px-4 py-2 bg-red-600 text-white rounded-md font-medium hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
Yes, Delete My Account
</button>
</div>
</div>
</div>
</ui-state>
</section>
</div>
</body>
Improvements (15)
- Replace custom tag `<ui-form>` with standard `<form class="ui-form">` (2 occurrences).
- Replace custom tag `<ui-field>` with standard `<div>` (6 occurrences).
- Replace custom tag `<ui-switch>` with the canonical structure `<label class="ui-switch"><input type="checkbox" /><span class="--slider"></span></label>` (4 occurrences).
- Replace `h1` styling (`text-3xl font-bold...`) with `<h1 class="ui-title --lg">`.
- Replace `h2` styling (`text-xl font-semibold...`) with `<h3 class="ui-title --sm">` or `<div class="ui-eyebrow">` (4 occurrences).
- Replace section containers (`bg-white rounded-lg border border-gray-200 p-6`) with `<div class="ui-box">` (4 occurrences).
- Replace 'Save Changes' button styling with `<button class="ui-button --solid">`.
- Replace 'Update Password' button styling with `<button class="ui-button --solid">`.
- Replace 'Delete Account' button styling with `<button class="ui-button --destructive">`.
- Replace 'Yes, Delete My Account' button styling with `<button class="ui-button --destructive">`.
- Replace 'Cancel' button styling with `<button class="ui-button --minimal">`.
- Remove manual input styling (`px-3 py-2 border border-gray-300...`) from inputs inside `ui-form` to rely on component defaults (5 occurrences).
- Replace `ui-if` attributes with `ui-hidden` (e.g., `ui-hidden="deleteConfirm"`) (2 occurrences).
- Remove manual color classes (`bg-red-50`, `text-red-800`, `border-red-200`) from the Danger Zone section.
- Update `<ui-state>` syntax to use direct attributes (e.g., `email="true"`) instead of `initial="{...}"` and verify `ui-change` syntax uses `this.checked` instead of `$event.target.checked`.
The generated code fails to follow ZipStack standards by inventing non-existent custom HTML tags and relying heavily on raw Tailwind utility classes instead of the provided Base Styles components. It needs a complete rewrite to use standard HTML elements with `.ui-*` classes, `ui-box` for containers, and proper `ui-title`/`ui-button` implementations.