More screenshots

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    DeLibra: design systems builder

    1

    Create AI-native, token-first design systems in seconds from Figma, CSS or code as an interactive, ready-to-use library.

    $15

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned
    DeLibra: design systems builder

    DeLibra: design systems builder

    Example session with this skill installed

    Extract the design system from ./src/styles/legacy.css and create a new delibra package in ./docs/design-system.

    • Read your context and instructions
    • Compiled the delibra
    • Generated the UI component

    I have analyzed ./src/styles/legacy.css and initialized a new DeLibra Lite package.

    Writing to ./docs/design-system/.

    Design System Extraction

    I have successfully mapped 14 color tokens and 8 spacing primitives from your legacy CSS. The component library has been scaffolded with 5 initial blocks including Buttons, Cards, and Form Inputs, all converted to a token-first architecture.

    {
  "id": "legacy-system",
  "title": "Legacy System",
  "description": "Built by DeLibra Lite from Design system CSS + gallery-specs",
  "version": "0.1.0",
  "css": {
    "tokens": "tokens.css",
    "components": "components.css"
  },
  "design": {
    "source": "css",
    "codebase": "./src/styles/legacy.css"
  }
}

    Next steps

    1. Open ./docs/design-system/preview.html in your browser to inspect the extracted specimens.
    2. Review tokens.deferred.json for 3 complex linear-gradients that require manual naming.
    3. Run python3 scripts/build-preview-data.py ./docs/design-system/ after making any manual adjustments.

    legacy.css

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Extracting design systems from Figma or legacy code often results in hallucinated values or messy, unusable documentation. This skill enforces a strict, token-first methodology to transform real sources into structured, browser-ready design system packages without inventing data.

    What it does

    • Source extraction reads Figma variables, CSS files, or codebase folders to identify tokens and components.
    • Traceable tokenization generates tokens.css using only verified values, mapping them to a clean token-map.json.
    • Component documentation builds components.css using BEM-like classes and var(--*) references for all sizes and colors.
    • Interactive preview creates a static preview.html viewer for browsing specimens and swatches without a server.
    • Strict validation runs automated checks to ensure all examples have data-pick attributes and zero hardcoded hex values in component rules.

    How it works

    1. Intake triggers a check for Figma access or codebase paths and resolves mobile/dark mode requirements.
    2. Router determines if the agent should extract new tokens or document existing components based on the manifest.
    3. Execution writes the standardized folder structure, including CSS, JSON maps, and an AGENTS.md for team context.
    4. Validation runs a Python-based build script to refresh the viewer and verify the package against strict design-system rules.

    Frameworks & tools

    This skill utilizes Figma MCP/Bridge for design access and Python for package validation. It outputs standard CSS, JSON, and vanilla HTML/JS for the viewer.

    Why this beats prompting it yourself

    Generic prompts often lead to "typical" palettes and inconsistent component naming. This skill follows a rigid mismatch protocol and a token-first contract that prevents the agent from filling gaps with guesses, ensuring 100% traceability to your source.

    Use cases

    • Figma to Code converting a design file into a production-ready token system and component gallery.
    • System Discovery documenting the UI primitives hidden inside an existing, undocumented codebase.
    • Agent Handover creating a machine-readable AGENTS.md so other AI tools can safely use your brand guidelines.
    • Design Audits identifying raw hex values and spacing overrides that deviate from the established design system.

    Known limitations

    Does not support executable React/Vue components in the viewer; examples are static HTML snapshots. Requires Python 3 for the validation and preview build scripts.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scanned

    Verified clean 6 days ago

    • Passed all security checks, Safe to install

    Listed6 days ago

    What's inside

    Frequently Asked Questions