Design skills

Add compact visual summaries to Markdown answers using static HTML and CSS. Show comparisons, key metrics, timelines, or simple relationships in a preview, while keeping explanations and detailed information in the surrounding text.

• Comparing key metrics visually
• Showing a process or sequence of steps
• Summarizing events on a timeline

Create sparse vertical posters from themes, articles, or photos, using paper textures, generous empty space, experimental typography, and one accent color. It also analyzes visual references and produces reusable style rules and image generation prompts.

• Turn an article into a poster with one visual metaphor
• Create a poster that preserves a photo's recognizable subject
• Extract reusable style rules from reference images

Build pages and components, or refine spacing, color, and typography in existing interfaces. Use product styles and visual references to guide decisions, then check the rendered result across relevant screen sizes.

• Building a new page or component
• Refining spacing and typography in an existing screen
• Improving an interface using screenshots

Design and implement iPolloWork plugin interfaces using shared components, colors, typography, and interaction rules. Covers host React and iframe integration, component readiness, and checks for loading, errors, keyboard use, and recovery.

• Build plugin forms with shared components
• Integrate shared controls into iframe plugins
• Design loading, error, and retry states

Create reusable iPolloWork templates for designs, editable presentations, and HyperFrames videos through conversation. Define replaceable content and visual settings, maintain the template package, and validate editing and theme changes before saving.

• Turn an existing project into a personal template
• Create reusable editable presentation layouts
• Prepare design or video templates with replaceable content

Add, edit, or inspect animation on Figma elements through use_figma. Work with keyframes, existing animation styles, color changes, easing that controls how movement accelerates, and timeline duration, with video frame checks when needed.

• Adding position or color animation to Figma elements
• Adjusting easing and animation timing
• Applying or removing existing animation styles

Create editable FigJam diagrams for workflows, system architecture, data relationships, and schedules. The skill selects a suitable diagram type and guides Mermaid, a text format for diagrams, while accounting for rendering limits.

• Visualizing a workflow or decision tree
• Mapping services and data stores
• Showing API interactions over time

Build or update Figma pages, modals, and other composed views from code or descriptions. Reuse existing components, shared color and spacing values, and styles, assembling and checking the design section by section.

• Recreate an application page in Figma from code
• Build a landing page using an existing design system
• Create a modal or sidebar from a description

Use JavaScript through Figma's Plugin API to inspect file structure and edit design elements, components, variables, and layouts. Follow incremental steps with font loading, returned element IDs, and visual checks to validate changes.

• Edit shapes and text in a Figma file
• Set up components, variants, and shared design values
• Adjust auto-layout, fills, and variable bindings

Generate standalone images or supporting assets for presentations, websites, and videos through iPolloWork's image service. The skill follows requested visual details, selects a suitable authorized model, and saves the resulting image in the workspace.

• Generate an image with a specified composition and style
• Create supporting images for presentation slides
• Prepare image assets for a website

Create and revise slide presentations within an active iPolloWork Design session while preserving the selected template’s appearance and editable objects. Support focused text or theme changes, broader narrative revisions, and presentation checks through the host’s preview tools.

• Creating a slide deck in the current Design session
• Revising text or selected slide objects
• Changing theme colors while preserving layout

Route design work to the appropriate specialist skill for websites, graphics, documents, slides, or video. For other design types, create or edit the existing project while preserving its design settings, editable elements, and selected scope.

• Route design work to the appropriate specialist skill
• Make targeted edits to an existing design
• Adjust a theme while preserving content and layout

Create or edit websites and application interfaces in the current iPolloWork Design session. Preserve shared design settings, component identities, and editing boundaries while making targeted or structural changes, then check affected interactions and supported exports through the host.

• Creating a website or application interface in Design
• Editing text or selected components
• Changing a theme while preserving content and layout

Build or update a Figma design system to match a codebase. Organize reusable design values, light and dark themes, component variants, and documentation, then check component structure, appearance, and bindings to those values.

• Build a Figma component library from existing code
• Set up shared design values and light and dark themes
• Create components with variants and variable bindings

Create or edit posters and social card series in the current iPolloWork Design session. Preserve existing design settings and editing boundaries, then check the full poster or each card at its final dimensions using the host preview.

• Create a poster
• Create a series of social cards
• Revise selected text or themes

Create and edit FigJam boards through Figma's use_figma tool. Organize meeting or brainstorming content with sections, sticky notes, shapes, connectors, and tables, and inspect existing board elements before updating their text, styling, or positions.

• Prepare a brainstorming board with sticky notes
• Build a retrospective or meeting board
• Draw diagrams with shapes and connectors

Create a blank Figma design, FigJam, or Slides file with a chosen name. Resolve the destination plan, save the file in its drafts folder, and obtain a URL and file key for subsequent editing.

• Create a blank Figma design file
• Start a named FigJam whiteboard
• Create an empty Slides presentation

Use extracted document content, design evidence, and local assets in iPolloWork video, slide, website, or design templates. Apply confirmed requirements and verify that supplied assets actually appear in the output, without using models to reparse references.

• Create slides using facts and figures from reference documents
• Apply supported reference styles to a website template
• Reuse document assets in video scenes

Create and edit presentations in Figma Slides using the use_figma tool. Build layouts that follow brand guidelines or reference files, update existing slides, organize sections, and add speaker notes when requested.

• Create a presentation that follows brand guidelines
• Update text and layouts in an existing deck
• Organize slides into sections

Turn written descriptions into editable Excalidraw diagrams, including flowcharts, mind maps, system architecture, and database relationships. Generate a .excalidraw JSON file with connected shapes, labels, and a consistent sketch or clean visual style.

• Turning business procedures into flowcharts
• Organizing ideas into mind maps
• Drawing cloud architecture with service icons

Fetch design structure, screenshots, variables, and assets from Figma through MCP, a connection between the agent and Figma. Use these references to guide code implementation within an existing project and troubleshoot connection setup.

• Inspecting a specific Figma frame or layer
• Fetching images and SVG assets for implementation
• Adapting a design to existing project components

Plan and build frontend interfaces through guided questions, visual references, and agreed design choices. Define colors, typography, and layout before coding, then implement small sections for review, with optional Google Stitch prototyping.

• Clarifying a visual direction before building a page
• Designing dashboards from references and brand guidelines
• Reviewing improvements to an existing interface

Build working web pages, components, and app interfaces around a clear visual concept. Coordinate typography, color, spacing, motion, and interaction details, adapting layouts to different screen sizes while avoiding repetitive visual templates.

• Building a landing page with a distinct visual direction
• Creating a dark-themed analytics dashboard
• Implementing responsive web components

Give navigation, controls, and feature cards a consistent icon style using Iconify Solar Duotone Bold. It guides icon sizing, clear labels, two-tone opacity, and contrast so icons fit the surrounding interface.

• Unify icons across navigation elements
• Pair control icons with clear labels
• Align icon sizes in feature cards