pandaos-design

Designs UI prototypes and mockups on the PandaOS Design canvas with versioned, revertable output.

Updated Mar 9, 2026
One-click install
npx skills add https://github.com/ArMaTeC/Redball --skill pandaos-design-armatec
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pandaos-design
Source: https://github.com/ArMaTeC/Redball/tree/main/.devin/skills/pandaos-design
Command: npx skills add https://github.com/ArMaTeC/Redball --skill pandaos-design-armatec

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It guides the full UI design workflow inside PandaOS, from gathering visual direction to building, iterating, and handing off a saved design, so mockups never end up as throwaway HTML files in the project. ## Core Features & Use Cases - Direction gathering: Uses generative_ui pickers (palette, layout, type pairing) plus saved design systems so users choose real visual options before anything is built. - Canvas-based building and iteration: Creates designs with design_create, edits them surgically with design_edit keyed by data-eid, screenshots the render for visual review, and keeps every version revertable. - Design craft enforcement: Applies an 8pt spacing grid, modular type scale, WCAG contrast floors, empty/loading/error states, and accessibility rules to every design. - Use Case: A user asks for a dashboard mockup; the skill presents a palette picker including saved design systems, builds the screen on the canvas, screenshots it to verify quality, then hands off frozen HTML and design tokens via design_handoff. ## Quick Start Ask the assistant to design a new screen or prototype in PandaOS and it will gather your style direction, build it on the Design canvas, and iterate with you until approved.

Frequently Asked Questions about pandaos-design

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

FAQPage Schema
How do I design a UI prototype in PandaOS?▼

Start by describing the screen you want; the skill gathers direction with palette, layout, and font pickers, then builds the design on the canvas with design_create. You iterate with design_edit until you approve, then hand off with design_handoff.

How do I choose colors and fonts for a PandaOS design?▼

The skill presents a generative_ui palette picker showing saved design systems as real swatches alongside fresh palette proposals. Selecting a saved pack passes its id to design_create as designSystemId, which also defines the fonts.

Can I reuse a saved design system in PandaOS?▼

Yes. The skill calls design_system_list to load packs from the project and personal library, then shows each as a swatch in the palette picker. Picking one applies its colors and fonts to the new design automatically.

Should I edit or regenerate an existing PandaOS design?▼

Use design_edit with surgical ops keyed by data-eid for normal changes, since it preserves untouched elements and manual visual-editor edits. Reserve design_regenerate for large redesigns that rewrite most of the document.

What design types does PandaOS Design support?▼

It routes to dedicated per-type skills: prototypes for clickable apps, mockups for static screens, documents for one-pagers, slides for decks, motion for animated reels, and product-demo for recorded screen flows.