Role and permissions matrix
A dark violet permissions grid: toggles flip for two roles, a Save button is pressed and a confirmation toast appears.
Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.
Live preview of the result built from this prompt. Click to pause.
Overview
A roles table with five roles and four permissions as toggle switches. The Support agent publish toggle switches on, the Editor publish toggle switches off, the two rows glow, Save is pressed and a green toast confirms. Topic inspired by OpenDesign’s public dashboard prompt list; this prompt and design are written from scratch.
Build it step by step
Sign in to tick steps off-
1
Paste the prompt
The AI builds the matrix and toggles.
Create a single-file HTML roles and permissions matrix, 1280x720, deep violet background #150f2b, panel #1d1640, header row #241b52, accent violet #8b5cf6, text #ece8ff. System fonts, no libraries. Header: H1 "Roles and permissions" and a muted subtitle "Decide who can view, edit, publish and bill". Table with columns Role, View, Edit, Publish, Billing and five rows (Admin, Editor, Support agent, Finance, Viewer). Each permission cell is a 46x26px toggle switch (off: #3a2f78, on: violet with a white knob that moves 20px). Sensible defaults: Admin all on, Editor all but Billing, Support agent View and Edit, Finance View and Billing, Viewer View only. Bottom right: a violet "Save changes" button. Bottom left: a green toast "Permissions updated for 2 roles". Motion (8 second loop): rows rise in with a stagger. The Support agent row and the Editor row get a faint violet highlight. The Support agent Publish toggle animates from off to on (colour and knob), the Editor Publish toggle animates from on to off. The Save button presses (scale .92), then the toast slides up and fades. Everything resets at the end. Respect prefers-reduced-motion. Return only the complete HTML.
-
2
Check the toggles
Two toggles should flip with a smooth knob.
-
3
Check the save
The button press should be followed by the toast.
Done when You can see it working in the browser.
-
4
Make it real
Wire the toggles to your role data and a save endpoint.
Files and links
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.