Physix Frontier
Building an AI prototype using open-source design systems
A friend recommended Coinbase's open-source design system, so I'm trying to see if it's actually good. My judgment: worth using, but not suitable for directly launching production products. AI prototyping uses natural language or design specs to let AI quickly create clickable, viewable, demonstrable pages. From a financial perspective, if you can compress the time from idea to clickable page from weeks to days, you save waiting costs and repetitive communication costs. Whether the page looks pretty isn't the most critical factor; the key is fewer reworks and not needing to maintain a whole temporary frontend team.
A design system is a set of ready-made buttons, input boxes, colors, spacing, and code components. Previously, designers drew once, and frontends coded accordingly. Now, use ready-made components, and let AI assemble the pages.
My test task was simple: create a payment homepage prototype with "User Balance, Top-up Entry, Transaction History." The goal was to show investors, finance, and operations to confirm if the flow works.
Four preparation tools. A code editor: I used Cursor, about a month, mainly because it can view project files. An AI coding assistant: I used Claude Code, used for 1 month, allowing it to write code in the dialog box. A Node.js environment: you don't need to understand this, just install from the official site and ensure npm commands run. And an empty folder: beginners shouldn't start by stuffing it into a big project.
Here's how to go from 0 to 1. Search for Coinbase Design System in the browser, open the official documentation page, find the React component installation method. React is a common tool for building web interfaces. Then in the terminal (command line window), enter the project creation command, e.g., npm create vite@latest cds-demo -- --template react. Vite is a small tool for quickly creating frontend projects. It asks for project name and template; choose React. Seeing download progress without red error messages means the project is built. Enter the project, type cd cds-demo, then npm install. This step installs project dependencies, think of it as buying all Lego bricks. Next, find the React component package name in the docs, copy to terminal to install. Don't install the latest package by feel; check the version range required in official docs. Create a new page file, e.g., src/PayPage.jsx, which is a React page file. Then in the Claude Code dialog, enter requirements: Use Coinbase design system components to make a mobile payment homepage, including top balance card, main top-up button, bottom transaction history list. When letting AI generate code, explicitly require using only installed components, no custom styles, use fake data (fill in some demo numbers). Finally, run npm run dev; the browser pops up a local address (usually starting with localhost). Open it, expecting to see a page at mobile width with balance card, top-up button, and a few transaction records.
My first version came out with ugly buttons. Later I found AI mixed regular web buttons with components. After changing the prompt, the page became much neater immediately.
Prototype stage: get the flow working first, then decide if engineering investment is worth it.
Regarding pitfalls and financial judgment, my three most common errors were: Wrong dependencies: Terminal shows Cannot find module; go back to official installation steps, confirm package name and version. Components not imported: Page is blank; press F12 to check console (browser debug window); red errors usually mean missing import. AI being over-smart: It generates lots of regular HTML tags and styles, looks runnable, but doesn't reuse the design system. Solution: Let it change only one module per round and say "do not add custom styles."
From a CFO perspective, I calculate three accounts for such tools. R&D account: Frontend writes fewer duplicate components, saving man-hours. Decision account: Business, finance, and product can confirm on the same clickable prototype, reducing ineffective meetings. Financing account: Early demos no longer rely solely on PPT; product completeness in valuation models finally has something verifiable.
But also pour cold water. Open-source design systems solve looking like a legitimate product; they don't solve account security, trade matching, compliance audits, or payment channels. If doing real business, is cash flow healthy? Don't just look at pages; look at unit cost, retention, bad debt, compliance costs, and revenue recognition (when money can be counted as revenue).
After learning this, next step: try connecting the same process to a real small requirement, e.g., make a mobile prototype for internal expense reimbursement system, then have finance colleagues walk through the approval flow with fake data. If prototypes take only a few days, will teams still be willing to spend a long time writing PRDs (Product Requirement Documents)?
📌 This article is compiled from related discussions on Hacker News. Original link: https://www.coinbase.com/blog/how-coinbase-design-systems-are-powering-the-ai-prototyping-era
Copyright belongs to the original authors. This is a compilation and independent analysis based on public reports.