Extypo is a powerful SaaS application built with Nuxt 4 that allows you to extract, visualize, and export design systems from any website. Powered by dembrandt and shadcn-vue, it provides a professional interface to analyze branding, colors, typography, and components.
- 🎨 Design System Extraction: Automatically extract colors, typography, spacing, borders, shadows, and more from any URL.
- 👁️ Visual Preview: Interactive preview of extracted design tokens using a tabbed interface.
- 📱 Component Analysis: Detects and visualizes button styles, inputs, and other UI components.
- 📤 JSON Export: Export the full design system configuration for use in your own projects.
- ⚡ Modern Tech Stack: Built with Nuxt 4, Tailwind CSS, and shadcn-vue for a polished, responsive UI.
Enter a URL to start extracting
Visualized design tokens including colors and typography
- Framework: Nuxt 4
- UI Library: shadcn-vue (Radix Vue + Tailwind CSS)
- Styling: Tailwind CSS v3.4
- Extraction Engine: dembrandt (Playwright-based)
- Icons: Lucide Vue
- Node.js (v18 or higher)
- pnpm (recommended) or npm/yarn
-
Clone the repository:
git clone <repository-url> cd extypo
-
Install dependencies:
pnpm install
-
Install Playwright browsers (required for extraction):
npx playwright install chromium
Start the development server:
pnpm devThe application will be available at http://localhost:3000.
- Enter a valid URL (e.g.,
https://example.com) in the input field. - Click "Extract Design System".
- Wait for the analysis to complete (this may take a few seconds as it spins up a headless browser).
- Explore the extracted design tokens in the tabs below (Colors, Typography, Spacing, etc.).
- Click "Export JSON" to download the raw data.
app/pages/index.vue: Main application page with extraction logic and UI.server/api/extract.post.ts: Backend API endpoint that handles thedembrandtextraction process.app/components/DesignSystemPreview.vue: Component for visualizing the extracted data.app/components/ui/: Reusable UI components (Button, Input, Card, etc.) built with shadcn-vue.
MIT