laioutr-design-manager

Plugin laioutr-design-manager from marketplace laioutr in laioutr/claude-marketplace. Commands read from the repo's manifest — 28 days ago.

Skills (7)

• component-library-build

  Builds the component library of the project's design-system file in Figma — atoms/molecules/organisms modelled on the Laioutr Storybook (https://storybook.laioutr.cloud). Compares the Laioutr UI kit (`@laioutr-core/ui-kit`, names/props) and Storybook with the project's legacy Figma files, transfers

• compose-page

  Composes a complete page from existing Laioutr sections/blocks, fills it with data directly in Laioutr Studio (via the Cockpit MCP). Delegates to the ux-designer agent. Loads memory/sections-blocks/ (catalog + composition rules) and memory/page-types/ (recipes). Focus: marketing-driven landing pages

• create-layout

  Creates a new UI layout/screen/component directly in Figma from a brief. Delegates the heavy generation to the ui-designer agent — functional-minimalist, one reasoned direction, strictly buildable (defineSection/defineBlock + Vue), WCAG 2.1 AA. Loads memory/design-system/, memory/figma/, memory/patt

• design-critique

  Pre-handoff QA gate for designs on a Laioutr project. Validates a finished Figma design (or an export) against three gates: WCAG 2.1 AA (contrast, focus, keyboard, touch target, semantics), design-system consistency (only canonical tokens/components, no detached instances/hardcodes) and buildability

• laioutr-design-manager

  Laioutr Design Manager orchestrator — the central control instance for all layout, Figma, design-system and page-composition workflows on a Laioutr project. North star: deliver **buildable, system-consistent, accessible UI** fast and at senior quality. Owns the project's design system as single sour

• design-system-governance

  Maintains the project's design system with full governance — creates tokens/components in the project's design-system file in Figma, structures the variable library logically (primitive + semantic/theme collection with theme × color scheme × light/dark), diffs against @laioutr-core/ui-tokens + Story

• taste

  Design taste gate for Laioutr projects — corrects the statistical LLM biases towards generic AI-slop UI. Enforces a reasoned taste direction via three dials (design variance, motion, visual density), anti-AI tells (no AI purple, no centered hero, no row of three identical cards, no generic names/fak

Slash commands (2)

• /laioutr-design-manager:design

  Build a UI layout/screen/component directly in Figma — functional-minimalist, one reasoned direction, buildable (defineSection/defineBlock + Vue), WCAG 2.1 AA. Loads skills/create-layout and delegates to the ui-designer agent.

• /laioutr-design-manager:landing-page

  Compose and build a marketing-driven landing page in Laioutr — from existing sections/blocks, filled with data, one clear conversion action. Loads skills/compose-page and delegates to the ux-designer agent.

Subagents (2)

• ui-designer

  Senior UI designer for Laioutr projects — the design hat of the Design Manager plugin. Builds **directly in Figma** (Figma MCP `use_figma` / `create_new_file`), owns the design system (tokens, variables, components, UI-kit sync, migration of legacy Figma files) and **builds the component library of

• ux-designer

  Senior UX designer for Laioutr projects — the composition hat of the Design Manager plugin. Composes **real Laioutr sections/blocks** (`defineSection`/ `defineBlock`) into complete pages, sets up **page types** (Home, PDP, PLP, Content, Blog, Locations) and specializes in **marketing-driven landing

MCP servers (4)

• figma

  connects to: https://mcp.figma.com/mcp

• figma-desktop

  connects to: http://127.0.0.1:3845/mcp

• laioutr-docs

  connects to: https://docs.laioutr.com/mcp

• laioutr

  connects to: https://mcp.laioutr.com/mcp

Similar plugins