claude

implement-design

Turn a Figma URL into fully implemented SLDS components — scaffolded, styled with design tokens, visually validated against the design, tested, documented, and reviewed. Supports Lit and Angular.

68 on GitHubby SL Design Systemv1.0.0Apache-2.0updated today
/

Plugin implement-design from marketplace sl-design-system in sl-design-system/components. Commands read from the repo's manifest — today.

What it installs

Skills (3)

  • implement-design-angular

    Angular implementation conventions for the /implement-design pipeline. Loaded on demand by component-implementer (and component-author) when the chosen framework is Angular.

  • implement-design-lit

    Lit/LitElement implementation conventions for the /implement-design pipeline. Loaded on demand by component-implementer (and component-author) when the chosen framework is Lit.

  • implement-design

    Turn a Figma URL into fully implemented components — scaffolded, styled with tokens, visually validated against the design, tested, documented, and reviewed. Supports Lit and Angular.

Subagents (6)

  • component-author

    Stage 5 of /implement-design. For one implemented component, scopes its work to the output location — for a published package it writes Vitest tests, enriches the story, writes website docs, adds a changeset, and runs i18n extraction; for an example it just enriches the story. Reads the finished com

  • component-decomposer

    Reads a design manifest produced by design-analyst and proposes a component decomposition tree with per-component public APIs. Read-only, no tool calls except reading the manifest schema.

  • component-implementer

    Scaffolds and implements one new component (Lit or Angular) from a decomposition spec, design screenshot, and Code Connect snippet. Stage 3 of the /implement-design pipeline. Loads the chosen framework's skill on demand. Writes the component plus a basic Storybook story; leaves tests and docs to Sta

  • component-reviewer

    Final-pass reviewer over a generated SLDS component — source, CSS, tests, stories, docs together. Stage 6 of /implement-design. Emits a prioritized punch list separating critical fixes (route back to implementer) from non-critical notes (PR comments). Read-only.

  • design-analyst

    Ingests a Figma node via the Figma MCP calls and produces a structured design manifest. Returns BLOCKED_ON_CODE_CONNECT if unconnected nodes are detected.

  • visual-validator

    Renders a freshly-implemented SLDS component in Storybook, screenshots it at each breakpoint with Playwright MCP, and structurally diffs it against the original Figma screenshot — including a close-up finish pass for detail defects (doubled borders, one-sided edge contact, stray chrome, clipping). S

View source on GitHub sanomalearning.design

Similar plugins

storybook

claudecodex

Build, preview, and test UI components with Storybook.

7 skills

storybookjs/storybook 91,552

hyperframes

claudecodex

Recommended: all published HyperFrames skills in one versioned bundle. Create and render videos from HTML: the contract, film, captions, overlays, motion and look references, the CLI, the registry, media, Figma, slideshows and Remotion ports.

22 skills

heygen-com/hyperframes 83,516

figma

claude

Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and development workflows.

18 skills · 1 MCP server

anthropics/claude-plugins-official 47,076

daisyui-blueprint

claude

daisyUI Blueprint MCP server - (Needs paid license)

saadeghi/daisyui 42,821

Figma

claude

Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and development workflows.

18 skills · 1 MCP server

anthropics/knowledge-work-plugins 35,601

product-skills

claude

14 bundled product skills with 19 Python tools: product-skills fork-orchestrator with continuous-discovery loop (deterministic 16-lane router, Torres cadence tracker, OST linter, /cs-product + /cs-grill-product + /cs-product-loop), product manager toolkit (RICE, PRDs), product strategist, UX researcher, UI design system, competitive teardown, landing page generator, SaaS scaffolder, product analytics, experiment designer, product discovery, roadmap communicator, spec-to-repo, design-qa (UI finish gate: inert controls, missing states, rendered WCAG 2.2 checks). Companion standalone plugins: agile-product-owner, code-to-prd, apple-hig-expert, research-summarizer, design-qa.

14 skills · 3 commands · 1 agent · hooks

alirezarezvani/claude-skills 29,725

Maintain implement-design?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex pluginslisted