One Page Tokens — VSCode extension
Import design tokens from real product brands (Stripe, Linear, Notion, Supabase, Vercel, Anthropic, and 44 more) into the active editor.
Usage
- Open the command palette (
Cmd+Shift+P / Ctrl+Shift+P)
- Run One Page: Import design tokens…
- Pick a brand → pick a format → tokens are inserted at the cursor.
| Format |
Output |
| CSS Variables |
:root { --color-brand-primary: #635BFF; ... } |
| Tailwind v4 |
@theme { --color-primary: #635BFF; ... } |
| Design Tokens |
W3C $value / $type JSON for Style Dictionary / Theo |
| Full brand JSON |
Everything — colors, typography, components, code patterns |
| DESIGN.md |
Long-form design reference (markdown) |
If no editor is open, the result is shown in a new untitled buffer.
Configuration
onePage.baseUrl — override the API base (default https://one-page-orpin.vercel.app).
Build
npm install
npm run build # tsc → dist/extension.js
npm run package # produces a .vsix you can side-load
Source
Tokens are served by the public One Page API — same endpoints used by the CLI (@one-page/cli), npm package (@one-page/tokens), and Figma plugin.
License
MIT. Tokens are derived from publicly available product screenshots — brand names and visual identities remain trademarks of their respective owners.
| |
