Designing an OSS pricing table with Prototyper
Learn how to design a dynamic pricing table within 5 minutes using AI.
Written by
Thijs Verreck
Published on
When you are selling something online, presenting your pricing in a clear and engaging way can significantly impact your sales and customer engagement. A dynamic pricing table not only provides essential information but also enhances user experience, adapting to different user needs and preferences. It is both a good design and development practice.
In this blog post, I'll explore how to design a dynamic pricing table using Prototyper, a design tool that simplifies component design tasks.
What we are gonna create (or skip to the end to grab the code!)
Basic
Start with essential tools to boost your online presence.
SEO Strategy & Topic Recommendations
Competitor Analysis to stand out
Built-in Keyword Research
Target latest Google trends
SEO optimized blogs and socials
Technical SEO analysis and Reports
Target 100+ regions and languages
Professional
Unlock enhanced features and premium content to supercharge your business.
Everything in Basic plan
Get 25 premium blogs
Index upto 1000 pages
Premium support
Local SEO
SEO Agent
Premium
Ultimate customization and dedicated support for enterprise needs.
Everything in Professional plan
Dedicated SEO consultant
Custom SEO strategies
Priority support
Quarterly business reviews
Custom integrations
Why Use Prototyper?
Prototyper is designed for building high-fidelity prototypes quickly and efficiently. It allows developers and designers to collaborate by starting the design process in code, ensuring that the final product is both functional and visually appealing. For my project, Prototyper was the quickest way, because I could iterate quickly through design changes and see the results in real-time.
Step-by-Step Guide to Creating a Pricing Table
In this guide I'll explain how to create a structure pricing table using Prototyper. Copy my prompts to try it for yourself or grab the end result at the end.
Step 1: Setting Up A New Project Project
Go the landing page in your workspace and prepare your first prompt. In my case it was:
1 We're kicking off the design process for a pricing table.
2
3 The process will involve a couple of steps:
4 1. Plot the layout.
5 2. Create the content framework
6 3. Merge the layout with the content framework.
Make sure to define the desired outcome, when are you satisfied? Also try to make room for future prompts. Our LLM works better as the context becomes larger, so try to divide your goal into smaller subgoals.
Step 2: Designing the Layout
The layout is crucial as it affects how information is perceived. For our pricing table, we used a grid system to organize the plans into columns, making it scalable from one to multiple pricing options. The styling is done using Tailwind. View my prompt below:
1 Step 1: The layout.
2
3 Create three columns, of which the colors can be dynamically updated.
4 Make sure the columns are plotted on a grid and have the same height and width.
5 Also create a distinct visual difference from the background and make sure that it can be dynamically controlled.
Step 2: Adding in dynamic content.
Here you want to be very explicited about the pricing model behind your product. Ideally give it in pseudo code, so that the LLM correctly understand what data format to create.
Use this prompt as an example:
1
2Create a dynamic structure for my pricing table.
3Below is my pricing scheme:
4
5plans:
6 {
7 name: 'Basic',
8 price: '$49/month',
9 features: ['Feature 1', 'Feature 2']
10 },
11 {
12 name: 'Professional',
13 price: '$199/month',
14 features: ['Feature 1', 'Feature 2', 'Feature 3']
15 }
16
Step 3: Iterate by explaining the LLM to merge the layout and data structure
The third step is to merge our initial layout with our newly created data structure. You can also experiment some additional dynamic and styling options here. I instructed Prototyper to also add some dynamic styling options to the pricing table.
My prompt:
1Merge the pricing scheme with the layout.
2- Also add dynamic styling options so that I can control the background and button colors
3- Integrate a lucide-react icon to highlight features.
4- style everything using Tailwind
Again - my aim is to be very explicit here! The more context -> the higher the quality of the design. Just as handing something off to your designer in the real-world, the AI works better as its understanding of the end goal becomes better.
The final result
The final code can be found here, feel free to copy it and use it in your own projects. Or import it into Prototyper to start iterating.
1import { Check } from 'lucide-react';
2
3export default function PricingTable() {
4 return (
5 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
6 <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
7 {[
8 {
9 name: 'Basic',
10 description: 'Start with essential tools to boost your online presence.',
11 monthlyPrice: 69,
12 annualPrice: 49,
13 features: [
14 'SEO Strategy & Topic Recommendations',
15 'Competitor Analysis to stand out',
16 'Built-in Keyword Research',
17 'Target latest Google trends',
18 'SEO optimized blogs and socials',
19 'Technical SEO analysis and Reports',
20 'Target 100+ regions and languages',
21 ],
22 bgColor: 'bg-gray-100',
23 buttonColor: 'bg-blue-500 hover:bg-blue-600',
24 },
25 {
26 name: 'Professional',
27 description: 'Unlock enhanced features and premium content to supercharge your business.',
28 monthlyPrice: 299,
29 annualPrice: 199,
30 features: [
31 'Everything in Basic plan',
32 'Get 25 premium blogs',
33 'Index upto 1000 pages',
34 'Premium support',
35 'Local SEO',
36 'SEO Agent',
37 ],
38 bgColor: 'bg-slate-200',
39 buttonColor: 'bg-blue-600 hover:bg-blue-400',
40 },
41 {
42 name: 'Premium',
43 description: 'Ultimate customization and dedicated support for enterprise needs.',
44 monthlyPrice: 499,
45 annualPrice: 399,
46 features: [
47 'Everything in Professional plan',
48 'Dedicated SEO consultant',
49 'Custom SEO strategies',
50 'Priority support',
51 'Quarterly business reviews',
52 'Custom integrations',
53 ],
54 bgColor: 'bg-gray-100',
55 buttonColor: 'bg-blue-500 hover:bg-blue-600',
56 },
57 ].map((plan) => (
58 <div key={plan.name} className={`${plan.bgColor} shadow rounded-lg p-6`}>
59 <h3 className="text-lg font-medium text-gray-900">{plan.name}</h3>
60 <p className="mt-4 text-sm text-gray-500">{plan.description}</p>
61 <div className="mt-6">
62 <div className="flex items-baseline text-gray-900">
63 <span className="text-3xl font-semibold">${plan.monthlyPrice}</span>
64 <span className="ml-1 text-sm font-medium">/month</span>
65 </div>
66 <div className="mt-4 flex items-baseline text-gray-900">
67 <span className="text-2xl font-semibold">${plan.annualPrice}</span>
68 <span className="ml-1 text-sm font-medium">/year</span>
69 </div>
70 </div>
71 <ul className="mt-6 space-y-4">
72 {plan.features.map((feature) => (
73 <li key={feature} className="flex items-start">
74 <span className="flex-shrink-0">
75 <Check className="h-6 w-6 text-blue-500" />
76 </span>
77 <p className="ml-3 text-sm text-gray-700">{feature}</p>
78 </li>
79 ))}
80 </ul>
81 <button className={`mt-8 w-full ${plan.buttonColor} border border-transparent rounded-md py-2 px-4 text-sm font-medium text-white`}>
82 Choose {plan.name}
83 </button>
84 </div>
85 ))}
86 </div>
87 </div>
88 );
89}
