app-builders-club

app-builders-club/design-builder

Plugin Claude Code

Plugin marketplace listing 1 plugin: design-builder.

app-builders-club/design-builder

Plugin Claude Code

Build distinctive production-grade interfaces on web + iOS through 6 user-facing commands (/setup, /designpage, /designscreen, /build, /improve, /review). Spec-first workflow: design specs (markdown) precede code generation. Knowledge-base skills: design (anti-patterns, HIG, BM25 search), motion (web animation li.

app-builders-club/design-builder

MCP server Claude CodeCodexCursor +2

MCP server "designlib", hosted remotely at designlib.app-builders.club, as configured in app-builders-club/design-builder.

app-builders-club/design-builder

MCP server Claude CodeCodexCursor +2

MCP server "figma", hosted remotely at mcp.figma.com, as configured in app-builders-club/design-builder.

app-builders-club/design-builder

Instructions file

Instructions for app-builders-club/design-builder, covering design-builder plugin, structure, architecture (three-layer rule), the 6 commands at a glance and inspirationpages (new in v2.0).

app-builders-club/design-builder

Agent

Use when the user requests a strict design critique — composition, hierarchy, focal point, rhythm, grid, typography, color/WCAG, motion, AI-slop, anti-patterns, accessibility, iOS HIG. Returns a scored P0–P3 report plus fix plan. Supports visual (Figma URL or screenshots) and code-only modes. Does not edit code.

app-builders-club/design-builder

Command

Universal code generator. Reads spec(s) from design/pages/ or design/screens/ and writes code to the project source tree. Single, batch, or glob targets.

app-builders-club/design-builder

Command

Generate a design spec (markdown) for a web page. Spec lands in design/pages/ .md. No code emitted — use /build for that.

app-builders-club/design-builder

Command

Generate a design spec (markdown) for an app screen (iOS / native). Spec lands in design/screens/ .md. No code emitted — use /build for that.

app-builders-club/design-builder

Command

Improve an existing design — light audit + apply concrete fixes to user code or Figma. Does not write to design/.

app-builders-club/design-builder

Command

Strict design critique — composition, typography, color, accessibility, AI-slop, anti-patterns. Delegates to design-auditor agent. Writes report to design/reviews/.

app-builders-club/design-builder

Command

Scaffold design/ folder, detect/confirm project stack, run interview, render foundation. Writes design-system.md, style-guide.md, content-library.md, tokens.css, preview.html.

app-builders-club/design-builder

Command

Alias for /design-builder:setup — establish the project's design foundation.

app-builders-club/design-builder

Skill Claude CodeCodex

Knowledge base and rules for the design-builder plugin. Three-layer model (commands -> filters -> knowledge base) for building distinctive production-grade interfaces on web + iOS. Backed by designlib MCP (palettes, fonts, inspirationpages, landingpatterns, icons, animations), iOS HIG references (iOS 18/26 Liquid…

app-builders-club/design-builder

Skill Claude CodeCodex

Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling usefigma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard).

app-builders-club/design-builder

Skill Claude CodeCodex

Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server…

app-builders-club/design-builder

Skill Claude CodeCodex

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the…

app-builders-club/design-builder

Skill Claude CodeCodex

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it…

app-builders-club/design-builder

Skill Claude CodeCodex

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via…

app-builders-club/design-builder

Skill Claude CodeCodex

MANDATORY prerequisite — you MUST invoke this skill BEFORE every usefigma tool call. NEVER call usefigma directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in…

app-builders-club/design-builder

Skill Claude CodeCodex

Web animation + short-video knowledge for design-builder. Two modes: (1) UI motion in production web apps — GSAP / WAAPI / CSS / Anime.js / Lottie / Three.js library patterns, easing, stagger, performance, prefers-reduced-motion, motion anti-slop; (2) short video generation via HyperFrames (HTML compositions, CLI…

app-builders-club/design-builder

Skill Claude CodeCodex

Browser automation via @playwright/cli. Use when capturing screenshots of a running web app for design audit, capturing live web pages as design references, inspecting rendered DOM/computed styles for review, or driving end-to-end interaction. Invoked by /design-builder:review (design-auditor) and…