20+ copy-pasteable AI prompts for designing dashboards, landing pages, mobile screens, components, and style guides — built for OpenPencil's AI-native canvas.
OpenPencil ships with an AI chat panel that lets you generate design nodes directly on the canvas using natural language. To use these prompts, open the AI chat panel, paste the prompt as-is (or lightly customize it for your project), and hit send. OpenPencil will generate the relevant frames, components, and layout nodes on your active canvas. You can then select any generated node and ask follow-up instructions like "make the header taller" or "use the dark mode style guide" to iterate quickly.
OpenPencil includes a built-in MCP server that exposes your canvas to Claude Code. Once connected, you can run these prompts directly from your terminal or from within a Claude Code session — no UI required. Start Claude Code, ensure the OpenPencil MCP server is running, and pass any prompt from this guide as your task. Claude will call OpenPencil's MCP tools to create frames and place components programmatically. This is especially powerful for batch-generating multiple screens or automating repetitive design scaffolding as part of a larger workflow.
Design a data analytics dashboard with a dark sidebar navigation on the left containing icons and labels for Overview, Reports, Audience, Revenue, and Settings. At the top, place a header bar with a search field, notification bell, and user avatar. Below the header, create a row of 4 KPI metric cards showing Total Revenue, Active Users, Conversion Rate, and Avg. Session Duration — each card should have a large number, a percentage change badge (green for positive, red for negative), and a small sparkline chart. Below the KPIs, add a large area chart spanning the full width for Monthly Revenue Trends, followed by two side-by-side charts: a donut chart for Traffic Sources on the left and a bar chart for Top Pages on the right. Use a clean, professional color palette with #1E293B as the background, white card surfaces, and a blue (#3B82F6) primary accent. Apply the "Professional Dark" style guide.
Create an admin panel UI for managing user records. Include a top navigation bar with the product logo on the left, a global search bar in the center, and a user avatar + settings icon on the right. Below the nav, add a full-width content area with a page title "User Management" and a row of filter controls: a dropdown for Status (Active / Suspended / Pending), a dropdown for Role (Admin / Editor / Viewer), a date range picker, and a blue "Export CSV" button aligned to the right. Below the filters, render a data table with columns for Checkbox, User (avatar + name + email), Role, Status (colored badge), Last Login, and an Actions column with Edit and Delete icon buttons. Add pagination controls at the bottom of the table. Use a light theme with a white background, gray (#F1F5F9) table row hover states, and a subtle box shadow on the table card.
Design a Kanban-style project management board. At the top, include a breadcrumb showing "Projects > Sprint 12" and a toolbar with buttons for Add Task, Filter, and View toggle (board/list). Below, render four equal-width columns labeled Backlog, In Progress, Review, and Done — each with a column header showing the label and a task count badge. Populate each column with 3–4 task cards. Each task card should display a task title, a colored priority badge (Critical / High / Medium / Low), an assignee avatar stack, a due date, and a progress bar showing subtask completion. Add a subtle colored top border to each column to visually differentiate them: gray for Backlog, blue for In Progress, yellow for Review, and green for Done. Use a light gray (#F8FAFC) board background with white task cards and rounded corners.
Design a CRM dashboard focused on the sales pipeline. Include a left sidebar with sections for Dashboard, Leads, Contacts, Pipeline, Activities, and Reports. In the main content area, start with a summary row showing 4 pipeline metrics: Total Leads, Qualified, Proposals Sent, and Closed Won — displayed as stat cards with icons. Below the stats, create a horizontal pipeline visualization with 5 stages: New Lead, Contacted, Proposal, Negotiation, and Closed — each stage as a column with deal cards stacked vertically. Each deal card should show the company name, deal value in large text, contact person name, and days in stage. At the bottom of the page, add a Recent Activities feed showing a chronological list of logged calls, emails, and meetings with timestamp and CRM user attribution. Use a professional light theme with indigo (#4F46E5) as the brand accent color.
Create an e-commerce analytics dashboard with a white top navbar containing the store logo, navigation links (Overview, Orders, Products, Customers, Marketing), and a date range selector showing "Last 30 Days." In the hero section, display 5 KPI cards in a row: Gross Revenue, Net Revenue, Total Orders, Average Order Value, and Return Rate — each with a trend arrow and percentage vs. prior period. Below the KPIs, place a large revenue trend line chart with a secondary line overlaid for the comparison period. Under the chart, create a two-column layout: on the left, a "Top Products" table with product thumbnail, name, units sold, and revenue; on the right, a geographic heatmap or a bar chart for Revenue by Channel (Direct, Organic, Paid, Email, Referral). Use a clean white background with teal (#0D9488) as the primary accent and light gray card borders.
Design a full SaaS product landing page. Start with a sticky navigation bar containing a logo on the left, links for Features, Pricing, Docs, and Blog in the center, and "Log In" + "Start Free Trial" buttons on the right. Below the nav, create a hero section with a bold H1 headline (2–3 lines), a subheadline paragraph, a primary CTA button, and a secondary ghost button — with a product UI screenshot or mockup displayed on the right half in a browser window frame. Follow with a "Trusted By" logo strip showing 6 company logos in grayscale. Next, add a 3-column features section with icon, feature name, and 2-sentence description per card. Then a pricing section with 3 tiers (Free, Pro, Enterprise) as cards — the middle Pro tier should be visually emphasized as the recommended plan. End with a testimonials row (3 cards with avatar, name, company, and quote) and a full-width CTA banner with a bold headline and email signup field.
Design a bold, modern agency portfolio landing page. The navigation should have the agency name/logo on the left and minimal links (Work, Services, About, Contact) on the right with no background — just dark text over the hero. The hero section should be full-viewport-height with a large typographic headline in 2–3 lines, a short tagline below, and a "View Our Work" CTA. Transition into a horizontal scroll or grid gallery of 6 case study thumbnails — each with a client name, project category tag, and a hover overlay effect. Below the work grid, add a services section listing 4 services (Brand Strategy, Web Design, Motion, Development) in a 2x2 grid with a short description each. Follow with an "About Us" strip featuring a team photo on the left and a founder bio on the right. Close with a full-width contact CTA section with a headline, brief copy, and a large email or contact button. Use a dark, editorial aesthetic with a near-black background, off-white text, and a single bold accent color.
Create a pre-launch landing page for a mobile app. The hero should be full-screen with the app name in large centered type, a one-sentence value proposition, and an email waitlist signup form (email input + "Join the Waitlist" button) below it — no nav visible in the hero. Include social proof copy like "2,400 people already waiting." Below the hero fold, add a features section with 3 feature highlights shown as phone mockup screenshots side by side, each with a feature name and 2-sentence description. Follow with a "How It Works" section showing 3 steps in a numbered horizontal layout. Add a testimonials or "Early Access" quotes section from beta users. Near the bottom, repeat the waitlist form inside a high-contrast CTA section with a strong headline. Use vibrant gradient colors (purple-to-pink or blue-to-teal), a dark background, and white text to create an energetic pre-launch feel.
Design a minimal, distraction-free newsletter landing page. The entire layout should be single-column and centered, with generous whitespace. At the top, show just the newsletter name in a bold serif or distinctive sans-serif typeface. Below, display an avatar or small illustrated logo, a 2–3 sentence description of what the newsletter covers, and the publishing cadence (e.g., "Every Tuesday"). Add 3 short bullet points describing what subscribers receive. Then render a large, prominent email signup form with a single email input field and a bold, full-width "Subscribe" button. Below the form, add social proof: subscriber count and a short testimonial from a reader. At the very bottom, include a minimal footer with links to a sample issue, privacy policy, and Twitter/X profile. Use a warm off-white or cream background, dark serif headings, and a single accent color for the button.
Design a conference or event landing page. The hero should feature the event name in very large type, the date and city/venue underneath, and two CTA buttons: "Buy Tickets" (primary) and "View Schedule" (secondary). Include a countdown timer component showing days, hours, minutes, and seconds until the event. Below the hero, add a "Featured Speakers" section with a grid of 6 speaker cards — each showing a circular headshot, speaker name, title, and company. Follow with a schedule or agenda section showing a 2-column layout for Day 1 and Day 2, each listing time slots with session title and speaker name. Add a sponsors section with tiered logo placements (Gold, Silver, Bronze). Near the bottom, include a venue section with a map embed or illustrated venue image alongside the address and hotel recommendations. End with a ticket pricing section showing 3 tiers (Early Bird, General, VIP) and a final CTA. Use a bold, high-energy color scheme with strong typographic hierarchy.
Design a mobile social media feed screen at 390x844px (iPhone 14 dimensions). At the top, include a status bar, then an app header with the logo/wordmark centered and icons for search and direct messages on the right. Below the header, add a horizontal Stories row showing circular avatar thumbnails with a colored ring indicator and username below each. The main feed should show 2–3 post cards: each card contains a user avatar, name, timestamp, and a 3-dot menu in the header; a full-width post image in the middle; and a row of action icons (like, comment, share, bookmark) with counts below. Each post card should also have a like count, a truncated caption with "more" toggle, and a comment preview line. Use a clean white background for light mode, with the brand accent color applied to interactive elements and the Stories ring. Include a bottom tab bar with icons for Home, Search, Create, Notifications, and Profile.
Design a mobile product detail screen for an e-commerce app at 390x844px. At the top, show a back arrow on the left and a cart icon with a badge on the right over a large full-bleed product image that takes up roughly 45% of the screen height. Include image pagination dots below the photo. Below the image, display the product name in bold, a star rating with review count, and the price (showing both sale price and original price crossed out if applicable). Add a short product description paragraph with a "Read more" toggle. Below the description, show an "Options" row for size and color selection using pill-style selectors. Then render a quantity selector and a large full-width "Add to Cart" button in the brand accent color, with a secondary "Add to Wishlist" button below it. At the bottom, include a row of trust badges (Free Shipping, Easy Returns, Secure Payment). Use a white background with clean typography and one primary accent color.
Design a mobile settings and profile screen at 390x844px. At the top, display a profile header section with a large circular avatar, the user's full name in bold, their username or email in smaller gray text, and an "Edit Profile" button. Below the profile header, organize settings into grouped list sections with section labels. Section 1 — Account: Profile Information, Email & Password, Connected Accounts. Section 2 — Preferences: Notifications, Privacy, Language & Region, Theme (Light/Dark toggle). Section 3 — Support: Help Center, Send Feedback, Rate the App. Section 4 — Danger Zone: Log Out (in red text), Delete Account. Each list row should have a leading icon, a label, and a trailing chevron arrow or toggle switch as appropriate. Include a standard iOS or Material-style grouped list aesthetic with subtle section separators. Use a light gray (#F2F2F7) background with white list groups and rounded card-style section containers.
Design a 4-screen mobile onboarding flow at 390x844px, laid out as a horizontal sequence of screens. Screen 1 — Welcome: Full-screen illustration or lottie-style graphic, app name, tagline, and a "Get Started" primary button with a "Log In" secondary link. Screen 2 — Feature Highlight 1: A single bold illustration at the top, a short feature headline, a 2-sentence description, and pagination dots showing step 1 of 3 with "Next" and "Skip" buttons. Screen 3 — Feature Highlight 2 and 3 (same layout, different illustration/copy): repeat the pattern, showing step 2 and step 3 of 3 in the dots. Screen 4 — Account Setup: A form asking for name, email, and password with a "Create Account" button and a social login row (Continue with Google / Apple). Each screen should share a consistent color scheme — use a gradient background that shifts slightly across screens to create a sense of progression. Include a bottom progress indicator bar.
Design a responsive navigation bar component in both desktop and mobile states, displayed side by side. The desktop version should show a logo on the far left, 5 navigation links in the center (Home, Features, Pricing, Docs, Blog), and two buttons on the right: a ghost "Log In" button and a solid "Sign Up" button. Include a subtle bottom border or box shadow to separate it from page content. The mobile version (375px wide) should show only the logo on the left and a hamburger menu icon on the right — below it, show the expanded mobile menu state as a full-width dropdown panel with the same 5 links stacked vertically plus the two buttons at the bottom. Design both states cleanly using a white background, dark text, and one primary brand color for the Sign Up button and active link indicator.
Design a 3-tier pricing table component. The component should have a centered heading "Simple, Transparent Pricing" and a toggle switch for Monthly/Annual billing (with an "Annual — Save 20%" label). Below the toggle, render 3 pricing cards side by side: Free (left), Pro (center, visually elevated and marked as "Most Popular" with a badge), and Enterprise (right). Each card should contain the plan name, price per month in large bold type, the billing period in small text, a divider, a list of 5–7 feature bullet points with checkmarks (or X marks for unavailable features on the Free tier), and a CTA button at the bottom. The Pro card should use a filled background in the brand accent color (with white text) to make it stand out, while the Free and Enterprise cards use white backgrounds with a border. Include hover states on the Free and Enterprise cards showing a subtle border color change.
Design a testimonial carousel component in its default (center-active) state. The carousel should show 3 testimonial cards visible at once — the center card is fully visible and larger, while the left and right cards are partially visible and slightly scaled down to indicate scrollability. Each card should contain a large opening quotation mark, the testimonial text (3–4 sentences), a horizontal divider, and at the bottom: a circular avatar, the reviewer's name in bold, their job title, and company name. Below the cards, render navigation dots and left/right arrow controls. The center active card should have a white background with a strong box shadow, while the flanking cards are slightly desaturated. Add a section heading above the carousel: "What Our Customers Are Saying" with a subtitle line.
Design a comprehensive website footer component. Divide it into a top section and a bottom bar. The top section should use a 4-column grid: Column 1 — Brand column with the logo, a 2-sentence company description, and social media icon links (Twitter/X, LinkedIn, GitHub, YouTube). Column 2 — Product links: Features, Pricing, Changelog, Roadmap, Status. Column 3 — Company links: About, Blog, Careers, Press, Contact. Column 4 — Newsletter signup with a short headline ("Stay in the loop"), a one-line description, an email input field, and a "Subscribe" button stacked vertically. Below the columns, add a thin divider and a bottom bar with copyright text on the left and links for Privacy Policy, Terms of Service, and Cookie Settings on the right. Use a dark (#0F172A) background with off-white text and a slightly lighter shade for the bottom bar.
Generate a comprehensive dark mode design system style guide. The guide should include: a Color Palette section showing background layers (Background, Surface, Card, Border) progressing from darkest to lightest, plus semantic colors for Primary, Success, Warning, Error, and Info — each shown as a swatch with hex value and usage label. Include a Typography section showing a type scale from Display (56px) down to Caption (12px) with font family, weight, line height, and a sample text string. Add a Spacing section showing a 4px-base spacing scale from 4px to 64px as visual blocks. Include a Components preview section showing key UI components rendered in dark mode: a filled button, a ghost button, an input field, a badge, a card, and a toggle switch. Add an Elevation section showing shadow layers (1–5) as floating card examples. Use a near-black (#0F172A) base with a slate accent palette and a vivid blue (#3B82F6) as the primary action color.
Design a minimalist editorial style guide inspired by high-end print magazines and editorial websites. The guide should showcase: a restrained Color Palette using a pure white background (#FFFFFF), near-black ink (#111111), one or two accent colors (warm sand or terracotta), and light gray for dividers. Include a Typography section featuring a large serif display typeface for headlines (e.g., a Garamond or Playfair-style font), a humanist sans-serif for body copy, and a monospace font for captions or pull quotes — show each at multiple sizes. Add a Layout Principles section illustrating a generous whitespace philosophy with a sample article layout using wide margins and a narrow centered content column. Show component examples for: a minimal button (outlined, no fill), a text input with a bottom border only, a blockquote styled with a large italic serif quote mark, and a simple card with no border — only whitespace and typography creating separation. Emphasize visual breathing room throughout.
Create a bold, energetic design system for a startup brand. Start with a Color Palette centered around a vivid electric purple (#7C3AED) primary, a hot pink (#EC4899) secondary, a bright yellow (#FBBF24) accent, and a near-black (#1A1A2E) dark background. Show gradient combinations (purple-to-pink, purple-to-blue) as swatches. For Typography, choose a bold geometric sans-serif for headings at large sizes and a clean neutral sans-serif for body text — show both in action with a sample hero headline. Include a Gradient & Texture section showing 3–4 signature gradient combinations as full-color swatches. Show component examples including: a gradient-filled primary button, a neon-glow card hover state, a tag/badge in each accent color, and a call-to-action section with a gradient background. Add a "Do / Don't" panel showing one correct usage (bold headline on dark bg) and one incorrect usage (all caps small text on a busy background). This system should feel alive, loud, and distinctive.
Design a formal corporate and enterprise design system style guide. The Color Palette should use a navy blue (#1E3A5F) as the primary brand color, a medium blue (#2563EB) for interactive elements, light gray (#F8FAFC) for page backgrounds, white for card surfaces, and a strict set of semantic colors for status indicators. Typography should feature a neutral humanist sans-serif (like Inter or Source Sans Pro) with a clear hierarchy: 4 heading sizes, a body size, a small size, and a label/caption size — all with defined weights and line heights. Include a Grid & Layout section showing a 12-column grid at 1440px and 768px breakpoints. Show a Forms section with labeled input fields, dropdowns, radio buttons, checkboxes, and a multi-step form progress indicator. Include a Data Visualization color palette of 6 accessible chart colors. Add an Accessibility section showing minimum contrast ratios met for all text/background combinations. The overall aesthetic should project trustworthiness, stability, and professionalism.
After OpenPencil generates a design from a prompt, treat the output as a starting draft. Select individual nodes and use follow-up prompts in the AI chat to refine specific sections — for example: "Make the hero section taller and add more padding," "Change the primary button color to indigo," or "Replace the bar chart with a line chart." You can also select a generated component and ask the AI to create variants: "Generate a mobile version of this nav bar" or "Create a dark mode version of this card." Iteration via short follow-up prompts is faster than trying to describe everything in a single mega-prompt.
OpenPencil ships with built-in professional style guides. Before generating any screen or component, load your chosen style guide first — then the AI will apply its color palette, typography, and spacing rules automatically to everything it generates. You can reference the active style guide explicitly in your prompts by adding a phrase like "Apply the Professional Dark style guide" or "Use the Minimalist Editorial style guide" at the end of any prompt in this pack. Mixing prompts from different sections (e.g., a Landing Page prompt combined with the Corporate style guide) creates professional, on-brand results without extra manual styling.
Once your design is complete in OpenPencil, you can export individual frames or full pages to Figma-compatible formats. Use the Export panel to select your target frames and choose SVG or the Figma import format. For handoff-ready assets, group related components into named frames before exporting so they appear cleanly organized in Figma's layers panel. If you're using the MCP integration, you can automate the export step as part of a larger Claude Code workflow — generate the design, apply the style guide, and trigger the export in a single script.
OpenPencil's MCP server unlocks a powerful headless workflow: instead of opening the UI, you describe entire design systems and screen flows as natural language tasks inside Claude Code, and the MCP tools create the canvas nodes programmatically. This is ideal for generating large numbers of screens quickly, populating design files with real data from an API, or building design scaffolding as part of a CI/CD or content pipeline. Use the prompts in this guide as the --task argument in a claude -p call, pair them with OpenPencil's MCP server in your MCP config, and you can generate a full landing page, export it, and commit it to your repository without touching the UI once.
OpenPencil AI Design Prompt Pack — copy, customize, and create.