30 Claude Prompts for Customer Portals

You are an invoice designer <context> I need one self-contained HTML invoice portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Invoices I have: [INVOICES OR NONE] </inputs> <task> Build a responsive invoice portal with these sections: 1. List or empty 2. Dummy PDF 3. [VERIFY] on amounts I did not give Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a pay-invoice designer <context> I need one self-contained HTML pay-invoice portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [INVOICE] - Amount: [AMOUNT OR VERIFY] </inputs> <task> Build a responsive pay-invoice portal with these sections: 1. Amount or [VERIFY] 2. Dummy pay 3. Banner dummy Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a cards designer <context> I need one self-contained HTML payment-method portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Methods I can show: [METHODS OR NONE] </inputs> <task> Build a responsive payment-method portal with these sections: 1. Methods or none 2. Dummy add 3. No last four unless given Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a plan designer <context> I need one self-contained HTML plan portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Plan: [PLAN OR VERIFY] </inputs> <task> Build a responsive plan portal with these sections: 1. Plan or [VERIFY] 2. Dummy change 3. No live Stripe Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a credits designer <context> I need one self-contained HTML credits portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Credits I have: [CREDITS OR NONE] </inputs> <task> Build a responsive credits portal with these sections: 1. Credits or none 2. How they expire [VERIFY] Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a tickets designer <context> I need one self-contained HTML ticket portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Tickets: [TICKETS OR NONE] </inputs> <task> Build a responsive ticket portal with these sections: 1. Tickets or empty 2. Dummy new 3. Status only if given Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a form designer <context> I need one self-contained HTML new-ticket portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Fields: [FIELDS] </inputs> <task> Build a responsive new-ticket portal with these sections: 1. Fields from [FIELDS] 2. Dummy submit 3. No fake SLA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a thread designer <context> I need one self-contained HTML ticket-thread portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [TICKET] - Messages I have: [MESSAGES] </inputs> <task> Build a responsive ticket-thread portal with these sections: 1. Thread from [MESSAGES] 2. Dummy reply 3. No invented agent Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a help-center designer <context> I need one self-contained HTML help portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Articles: [ARTICLES OR NONE] </inputs> <task> Build a responsive help portal with these sections: 1. Articles or empty 2. Search stub Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a callback designer <context> I need one self-contained HTML callback portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Hours: [HOURS OR VERIFY] </inputs> <task> Build a responsive callback portal with these sections: 1. Hours or [VERIFY] 2. Dummy request Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a profile designer <context> I need one self-contained HTML profile portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Fields: [FIELDS] </inputs> <task> Build a responsive profile portal with these sections: 1. Fields from [FIELDS] 2. Dummy save Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a seats designer <context> I need one self-contained HTML seats portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Seats: [SEATS OR VERIFY] </inputs> <task> Build a responsive seats portal with these sections: 1. Seats or [VERIFY] 2. Dummy invite Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a prefs designer <context> I need one self-contained HTML notif portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Channels I have: [CHANNELS] </inputs> <task> Build a responsive notif portal with these sections: 1. Channels from [CHANNELS] 2. Dummy save Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a keys designer <context> I need one self-contained HTML api-keys portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Keys I can show: [KEYS OR NONE] </inputs> <task> Build a responsive api-keys portal with these sections: 1. Keys or none 2. Dummy create 3. Mask secrets Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a close-flow designer <context> I need one self-contained HTML close-account portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Copy I want: [COPY] </inputs> <task> Build a responsive close-account portal with these sections: 1. Copy from [COPY] 2. Dummy close 3. No guilt Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a B2B portal designer <context> I need one self-contained HTML b2b portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Orgs: [ORGS] </inputs> <task> Build a responsive b2b portal with these sections: 1. Org home 2. Invoices stub 3. Dummy switch Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are an agency designer <context> I need one self-contained HTML agency portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [AGENCY] - Clients: [CLIENTS] - Files: [FILES OR NONE] </inputs> <task> Build a responsive agency portal with these sections: 1. Clients from [CLIENTS] 2. Files or empty 3. Dummy comment Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a school-portal designer <context> I need one self-contained HTML parent portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [SCHOOL] - Kids I can show: [KIDS] </inputs> <task> Build a responsive parent portal with these sections: 1. Kids from [KIDS] 2. Dummy message 3. No invented grades Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a ruthless editor <context> I need one self-contained HTML rebuilt portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [CURRENT PASTE] - Keep: [KEEP] - Cut: [CUT] </inputs> <task> Build a responsive rebuilt portal with these sections: 1. Diagnose 2. Rebuild 3. Keep [KEEP] Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a mobile designer <context> I need one self-contained HTML mobile portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Widgets: [WIDGETS] </inputs> <task> Build a responsive mobile portal with these sections: 1. Stack 2. Sticky help 3. Dummy sign out Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a honesty editor <context> I need one self-contained HTML labeled-dummy portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Widgets: [WIDGETS] </inputs> <task> Build a responsive labeled-dummy portal with these sections: 1. Rebuild 2. Dummy auth banner 3. Home Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are an a11y designer <context> I need one self-contained HTML accessible portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Widgets: [WIDGETS] </inputs> <task> Build a responsive accessible portal with these sections: 1. Labels 2. Focus 3. Home Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are an sla skeptic <context> I need one self-contained HTML no-fake-sla portal I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Tickets: [TICKETS OR NONE] </inputs> <task> Build a responsive no-fake-sla portal with these sections: 1. Tickets 2. No 2h reply unless I wrote it Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a combo designer <context> I need one self-contained HTML portal-plus-invoices I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Invoices: [INVOICES OR NONE] </inputs> <task> Build a responsive portal-plus-invoices with these sections: 1. Home 2. Invoices or empty Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

You are a combo designer <context> I need one self-contained HTML portal-plus-tickets I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Tickets: [TICKETS OR NONE] </inputs> <task> Build a responsive portal-plus-tickets with these sections: 1. Home 2. Tickets or empty Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>