Yuleport

A mock-up of the screen, drawn from its layout, palette and typefaces. A build follows the full prompt below.

Start from this screenRead the build prompt

Typefaces

The catalog's own faces. A screen composed into a template is drawn in that template's typefaces.

• InterHeadings: Inter 500, 24px H1
• InterBody: Inter 400 16px / 1.5; step titles 16px 500

Patterns

• numbered accordion steps
• empty state inside expanded step
• skip-this-step link
• balance and top-up in top bar
• highlighted product switcher pill
• disabled future step

States it is designed for

• Step pending, open, done, skipped, locked
• Invitations empty / list with pending badges / error
• Key generating / generated (reveal once) / failed
• All steps done: success banner with link to dashboard
• Loading: skeleton step headers

Who it is for

• developers integrating phone verification
• engineering leads onboarding their team

Layout

1. Top bar: logo mark, workspace switcher, highlighted product pill (lime), balance readout and dark Top up button, avatar
2. Main column (620px): H1 welcome line and subline
3. Step 1 expanded card: number circle, title, subline, 'Invite members' button, nested empty-state box, 'Skip this step' link with arrow
4. Step 2 collapsed card: number, title, plus icon
5. Step 3 collapsed and dimmed until step 2 completes
6. Mobile: full-width cards; top bar collapses balance into menu

Palette

Structured and encouraging; a checklist that makes integration feel finite.

• canvas#f7f7f9
• surface#ffffff
• text#18181b
• muted#62626a
• border#e4e4e9
• input-border#8a8a93
• primary#18181b
• on-primary#ffffff
• product-pill#c7f25a
• product-pill-text#1e2a05
• success#1f7a4d
• focus#3b63d9

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type scale

Display

Inter 500, 24px H1

Body

Inter 400 16px / 1.5; step titles 16px 500

Balance in JetBrains Mono 14px. Step numbers 13px in 24px circles.

Spacing and imagery

Comfortable; 4px base; step cards padding 16-24px, 16px gap; radius 10px cards, 8px buttons; flat with 1px borders.

No imagery; inbox icon for empty states; small plus/minus toggles.

Components

• TopBar with ProductPill and BalanceReadout
• StepAccordion
• StepHeader (number/check, title, toggle)
• InviteMembersButton + InviteDialog
• InvitationsEmptyState
• InvitationsList
• SkipLink
• ApiKeyStep (generate, reveal once, copy)
• SdkStep (language tabs, code blocks)

Interactions

• Only one step open at a time; completing a step collapses it with a check and opens the next
• Skip marks step as skipped (distinct icon) and opens the next
• Invite dialog accepts multiple emails with role select; sent invites appear as a list
• Generating a key shows it once with copy; SDK step's code auto-fills the key placeholder name

Data

• Workspace{id, name, balance_cents}
• OnboardingStep{workspace_id, step (invite|api_key|sdk), status (pending|done|skipped)}
• Invitation{id, workspace_id, email, role (admin|developer|viewer), status (pending|accepted|expired)}
• ApiKey{id, workspace_id, prefix, secret_hash, created_at}

Guardrails

Experience

• Make every step skippable except key generation for SDK step prerequisites
• Show locked future steps dimmed with the reason in text
• Empty states inside steps explain what will appear there
• Completion collapses the step with a check and moves on automatically
• Balance and top-up stay visible, since verifications cost money

Accessibility

• Accordion headers are buttons with aria-expanded and aria-controls
• Locked steps have aria-disabled and a text reason
• Step status conveyed with text ('Done', 'Skipped'), not only icons
• Invite dialog validates emails with linked error messages
• Focus ring 2px #3b63d9

Security

• RLS: invitations, api_keys and onboarding_steps scoped to workspace members; only admins invite
• Invitation tokens hashed, single-use, expiring in 7 days
• API keys hashed, shown once
• Rate-limit invitations per workspace

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste an entry's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack entries)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build **Yuleport**, the welcome/get-started page of a phone-verification API console: a three-step accordion (invite your team, generate an API key, add the SDK) with skip, empty states and completion.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Accordion, Dialog, Tabs), lucide-react, react-hook-form + zod, TanStack Query. Supabase Auth + Postgres; Edge Functions for invitations (via a transactional email service) and key creation.

### Pages & layout
1. **Top bar**: logo mark, workspace switcher, lime product pill, balance readout + 'Top up', avatar.
2. **Header**: H1 'Welcome! Let's get verification running' and subline.
3. **Step 1 Invite your team** (open): subline, 'Invite members' button, nested empty-state box (inbox icon, 'No invitations yet', helper), 'Skip this step' link.
4. **Step 2 Generate an API key** (collapsed): on open, 'Generate key' button, reveal-once key with copy.
5. **Step 3 Add the SDK to your app** (locked until key exists): language tabs with install and example code.
6. **All done** banner.

### Design system
- Colors: `--canvas: #f7f7f9`, `--surface: #ffffff`, `--text: #18181b`, `--muted: #62626a`, `--border: #e4e4e9`, `--input-border: #8a8a93`, `--primary: #18181b`, `--on-primary: #ffffff`, `--product-pill: #c7f25a`, `--product-pill-text: #1e2a05`, `--success: #1f7a4d`, `--focus: #3b63d9`.
- Fonts: Inter 400/500; 16px/1.5 body; 24px H1; JetBrains Mono 14px code and balance.
- Spacing: 4px scale; card padding 24px; 16px gaps.
- Radius: 10px cards, 8px buttons, 999px product pill and number circles.
- Shadows: none; 1px borders.
- Motion: accordion height 200ms ease; check icon draw 200ms; reduced motion instant.

### Components & interactions
StepAccordion (single open), StepHeader (states), InviteDialog (multi-email input, role select, validation), InvitationsList/EmptyState, SkipLink, ApiKeyStep, SdkStep (tabs, code blocks with copy), DoneBanner, TopBar components.
The invite dialog accepts comma or newline separated emails, shows each as a removable chip, validates each one (invalid chips turn red with a reason), and has a role select applying to all. Pending invitations list shows email, role, sent time (relative) and a Resend / Revoke menu. The API key step reveals the secret once with copy and a checkbox 'I've stored this key' that completes the step. The SDK step has tabs for three invented languages/runtimes, each with install and send-code / check-code examples referencing an env variable.

### Data & state
Tables `workspaces`, `memberships`, `onboarding_steps(workspace_id, step, status)`, `invitations(id, workspace_id, email, role, token_hash, status, expires_at)`, `api_keys`. Step statuses drive which is open. Seed: new workspace with all steps pending and zero balance.
Step order and lock rules live in a small config array so product can reorder steps without UI changes. When all three steps are done or skipped, set `onboarding_completed_at` on the workspace and replace the page with the dashboard on next visit.

### Accessibility
Accordion semantics, text status labels, locked-step reason text, labelled dialog with linked errors, visible focus, code blocks labelled.
Verified contrast: body text: #18181b on #ffffff = 17.72:1; muted subline: #62626a on #ffffff = 6.04:1; muted on canvas: #62626a on #f7f7f9 = 5.65:1; primary label: #ffffff on #18181b = 17.72:1; product pill text: #1e2a05 on #c7f25a = 11.72:1; success check: #1f7a4d on #ffffff = 5.32:1; input border: #8a8a93 on #ffffff = 3.42:1; focus ring: #3b63d9 on #f7f7f9 = 4.94:1.

### Security
RLS per workspace membership; invites only by admins (checked in policy and function); hashed expiring invite tokens; hashed keys shown once; rate limits on invites and key creation; audit log for both.

### Performance & SEO
Code-split SDK step code samples. App routes noindex.

### Guardrails
- Invented team emails (example.com) and SDK names.
- Acceptance criteria: (1) one step open at a time; (2) skip and done states distinct; (3) invites list replaces empty state; (4) SDK step unlocks after key; (5) keyboard operable accordion.

Open the builderAll templatesThis palette on its own