design-engineer-plugin

Generates a single-file HTML prototype directly in Claude Code. One-pass approach: gather context, agree on a brief, generate the interactive prototype, iterate. Use for new products (after planning), new features for existing products, or redesigns. Pulls design context from planning documents or Figma designs.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Generates a single-file HTML landing page with conversion-optimized structure and copy. Reads StoryBrand deliverable as the copy foundation. Use when the user needs a marketing landing page for their product.

Guides design intent exploration and reference gathering before opening any design tool. Use when starting high-fidelity UI work, establishing visual direction, or when the product needs intentional design decisions rather than defaults.

Strategic checkpoint primitive – invoke at high-leverage moments to consult the Opus 4.7 advisor agent for a short course correction. Use early in a task (before substantive work), before declaring done, when stuck, or when changing approach. Quotes Anthropic's advisor-tool docs verbatim for timing and treatment.

Generates and maintains a comprehensive CLAUDE.md file for any project. Use when setting up a new project, when the project has evolved significantly, or when switching tech stacks.

Stack-agnostic component gallery scaffolder and updater. Creates a single-page visual catalog of every component in the project (all variants, source-labelled, real production styles). Adapts to the project's framework via context7 MCP – never carries a hardcoded stack table. Used by frontend-implementer to keep the gallery in sync after every component change; audited by design-system-auditor.

Automates Git workflow – commits, branches, PRs, and merges. Use when committing changes, or invoked automatically during plan execution after each approved phase. Do NOT use for Git concept education; see the github-for-designers.md reference instead.

Guides setup of essential MCP integrations for AI-assisted development. Use when configuring a new development environment or choosing which MCP servers to install.

Documents knowledge and engineers context for design projects. Stores project status, maintains living context files, and tracks cross-deliverable dependencies. Use when completing a major phase or when context needs to be preserved across sessions. Do NOT use for development context management; see dev-status-tracking instead.

Controls the full design pipeline across discovery, strategy, planning, and validation phases. Manages autonomous, guided, and direct access modes while tracking project state. Use when running the end-to-end design workflow via /design-engineer:discovery.

Mode selection, project setup, and status line installation for first-time plugin use. Runs after goal selection.

Smart entry point for the design-engineer plugin. Detects project state and routes to the right flow: new projects get full setup, returning projects resume where they left off, existing projects get a capability guide. Use as the first command for any project.

Installs, uninstalls, or checks the design-engineer status line. Copies the statusline script to ~/.claude/hooks/ and configures settings.json. Use when running /design-engineer:launch.

Runs a broad psychology audit across 100+ UX principles. Scans designs for opportunities and violations, then routes to section-specific deep dives. Use when reviewing a design holistically for psychology compliance. Do NOT use for deep-dive into a specific psychology section; see the section-specific psych skills instead.

Automates Figma design structuring and development handoff preparation. Use when preparing raw designs for development – converts flat frames into components with tokens, then adds annotations, sections, and dev status badges. Do NOT use for learning Figma workflow basics; see ui-figma-guide instead.

Conducts structured competitive analysis identifying direct and indirect competitors, strengths, weaknesses, and market positioning. Use when you need to understand the competitive landscape before making product or business decisions.

Sets up a specialized agent pipeline for AI-assisted development with context analysis, planning, implementation, and auditing phases. Use when configuring agent-driven development workflows for a new project.

Generates kick-start prompts for beginning development in any IDE. Use when transitioning from planning to coding or when starting a new project and needing structured initial prompts.

Teaches and implements context management for long-running development projects. Use when context loss becomes a problem or when setting up status tracking for AI-assisted workflows.

Guides creation of a code-first design system using atomic design patterns. Use when setting up design tokens, auditing design system compliance, or refactoring hardcoded styles into reusable tokens.

Creates a living assumptions document categorizing beliefs about users, product, and business by risk level. Plans validation approaches. Use when identifying assumptions, tracking validation status, or planning research priorities.

Maps user behavior using the Behavior Map framework (Behavior = Motivation x Ability x Prompt). Analyzes activation thresholds, mental models, and prompt validation. Use when user motivation is unclear or for complex products needing behavioral analysis.

Applies a systematic bias audit process (Identify, Analyze, Design, Document) to audit or design user experiences. Use when reviewing existing products, designing new screens, or improving conversion flows. Do NOT use for full psychology compliance scanning; see psych-full-scan instead.

Develops a business plan covering revenue model, market size, go-to-market strategy, and financial projections. Use when defining how a product will make money, estimating market potential, or planning finances before building.

Applies ethical design review using the Regret Test, Manipulation Matrix, Black Mirror Test, and Humane Design Principles. Use when auditing products for ethical concerns, reviewing dark patterns, or building humane products. Do NOT use for comprehensive product assessment; see ux-full-review instead.

Runs a comprehensive product design assessment across usability, psychology, accessibility, and ethics. Covers the full Product Assessment Checklist. Use when reviewing existing products end-to-end or as a final quality gate before launch. Do NOT use for ethics-only reviews or dark pattern audits; see ux-ethics-review instead.

Creates information architecture including screen inventory, navigation structure, user flows, and content hierarchy. Use when you need a structural blueprint before UI design or when navigation feels unclear.

Creates and improves customer journey maps by identifying key moments and applying proven improvement tactics. Use when designing a new product experience, reviewing an existing one, or optimizing the user's emotional arc.

Applies the Motivation Framework to evaluate Experience Value across each step of a user experience. Tracks the user's "Motivation Level" health bar of motivation vs. friction. Use when performing screen-level analysis of user experience quality.

Defines and prioritizes MVP features using the ICE model, separating must-haves from nice-to-haves. Use when deciding what to build first, cutting scope to launch faster, or when the feature list exceeds initial release capacity.

Creates a problem statement defining what problem exists, who feels it most, and how the product will help. Use when starting a new product, pivoting direction, or when the team lacks clarity on what they are solving.

Guides creation of Story Panels – comic-style visual product stories with 6 panels that build customer empathy. Produces image generation prompts for each panel, reviews generated images, and iterates until the story is right. Use when starting a new product or documenting an existing product's user experience.

Creates a StoryBrand framework document for clear product messaging where the user is the hero and the product is the guide. Use when crafting landing pages, marketing copy, or UX writing that emotionally connects with users.

Develops detailed user personas with demographics, motivations, pain points, and behavioral patterns. Use when defining or refining who your product is for, after the problem statement is established.

Decides per-image whether to generate (hero, marketing, brand-specific) or stock-fetch (avatars, list rows, decorative many-of-a-kind), produces strong search queries or detailed AI-generation prompts, and lays out destination folders. Use when working with images, photos, illustrations, hero shots, avatars, or any visual asset in a prototype, landing page, or generated HTML – before reaching for gradient placeholders, emoji-stamped SVGs, or random Pexels/Unsplash links.

Explores cognitive biases and self-perception psychology principles (Laws 81-90) for UX design. Covers thinking errors that affect both users and designers. Use when auditing interfaces for knowledge gaps, planning fallacies, or survey and research validity. Do NOT use for design-level UX audits (see ux-bias-audit) or individual law analysis (see section-specific psych skills).

Explores cognitive interaction fundamentals (Laws 1-10) for UX design. Covers cognitive load, choice architecture, information grouping, and discoverability. Use when analyzing how an interface manages mental effort and attention. Do NOT use for navigation simplification or form reduction; see psych-simplification instead.

Explores core decision-making psychology principles (Laws 21-25) for UX design. Covers loss aversion, decision fatigue, anchoring, and defaults. Use when auditing interfaces where users must choose between options, such as pricing, forms, or filter systems. Do NOT use for social proof, scarcity, or persuasion tactics; see psych-decision-persuasion instead.

Explores advanced decision-making psychology principles (Laws 26-30) for UX design. Covers persuasion, scarcity, social proof, and the boundary between ethical influence and manipulation. Use when auditing pricing pages, urgency tactics, or social proof elements. Do NOT use for basic decision fatigue, defaults, or anchoring; see psych-decision-fundamentals instead.