skills.rest
activepieces
activepiecesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

activepieces-design-system

Generates Activepieces-branded UI designs using Tailwind tokens, Lucide icons, and Shadcn conventions.

24.2k|4.1k|Updated Dec 3, 2022
Search Tags:#Tailwind#shadcn#Design system#activepieces#lucide icons#ui kit#Dark mode
One-click install
npx skills add https://github.com/activepieces/activepieces --skill activepieces-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: activepieces-design-system
Source: https://github.com/activepieces/activepieces/tree/main/.agents/skills/design
Command: npx skills add https://github.com/activepieces/activepieces --skill activepieces-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

Designing UI for the Activepieces platform requires matching its exact brand system — the purple #8142E3 primary, Inter type ramp with 14px body text, 1px borders, Lucide icons, and Shadcn/Radix component conventions — which is easy to get wrong without a codified reference.

Core Features & Use Cases

  • Codified brand tokens: CSS variables for colors, typography, spacing, radii, and shadows mirroring the shipping packages/web stylesheet, including light and dark mode rules.
  • Recreated web UI kit: A no-build React (Babel standalone) kit reproducing the Flows dashboard, Builder with dotted canvas, Runs table, Connections list, and Ask AI overlay, plus a full primitive and overlay component inventory.
  • Copy and iconography rules: Sentence-case, verb-first microcopy guidance and Lucide-only icon conventions with real piece-tile SVGs.
  • Use Case: When asked to mock a new settings page for Activepieces, load this Skill to produce a screen that matches the floating-card layout, purple primary buttons, 14px body text, and dotted-canvas builder aesthetic without re-deriving the design language.

Quick Start

Use the Activepieces design system skill to mock a new Runs detail page for the web app in light and dark mode.

Frequently Asked Questions about activepieces-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a new screen for the Activepieces web app?▼

Start from the ui_kits/web/ entry point, copy the relevant component files like Sidebar, TopBar, and Primitives, then compose your screen using the ap-* class vocabulary. Follow the hard rules: purple #8142E3 primary, 14px body text, 1px borders, and sentence-case copy.

What colors and fonts does the Activepieces design system use?▼

The primary is purple hsl(257 74% 57%) / #8142E3, with Tailwind neutral scale for surfaces and emerald, rose, and amber for semantics. Typography is Inter at 400-800 weights, with 14px (text-sm) as the body default.

Does the Activepieces UI kit support dark mode?▼

Yes, dark mode is toggled via a .dark class on the html element and persisted with localStorage. Surfaces shift to neutral-950/900, dividers use 14% white, and the primary stays purple for brand consistency, with an optional .dark.blue-primary variant matching the repo.

Can I use emoji or custom icons in Activepieces product UI?▼

No, the product UI uses Lucide icons exclusively at 16px default size with 1.5-2px strokes. Emoji and Unicode glyphs like checkmarks are banned in-app; piece integration icons must be copied from the real SVGs, not redrawn.

What are the limitations of the included Figma references?▼

The Pro-Blocks Figma pages are stock Shadcn templates, not real Activepieces marketing surfaces, and the Figma primary swatch #9747FF is wrong. The shipping primary is #8142E3 from packages/web/src/styles.css, which this system uses.

Related Skills

Explore More Design & Creative Skills→
wzserwzser
9

to-issues

Decompose project plans and specifications into granular issues for tracking.

Community
Advanced
Impertio-StudioImpertio-Studio

shadcn-errors-styling-conflicts

Diagnose shadcn className overrides for Tailwind utility conflicts and merge-order errors.

Official
Intermediate
trevorc-aitrevorc-ai

accessibility-checker

Identify and remediate WCAG 2.1 Level AA accessibility gaps in UI components.

Community
Intermediate
andrey-belenandrey-belen

frontend-shadcn

Initialize shadcn/ui components and theming for React/Next.js projects.

Community
Intermediate