# Tools > Every listed resource, editors’ picks first. The filters below can be combined. - Search: append `?q=` to the URL. Separate several keywords with spaces; all of them must match. Matches name, repository, tags, professions, description and README. - Filter by type: append `?type=` to the URL. - Filter by profession: append `?profession=` to the URL. Separate several ids with commas; a resource matches when it suits any of them. Ids are listed at https://hebbmind.com/api/v1/professions - Filter by tag: append `?tag=` to the URL. Separate several tags with commas; a resource must carry all of them. Tags are listed at https://hebbmind.com/api/v1/tags Resources for Design or Teachers / Students, Tagged `ui-design`: 99 items. > - Design: Interface, interaction, visual and brand design. > - Teachers / Students: Lesson prep, quizzes, grading and course materials; self-study and exam prep. - [Frontend Design](https://hebbmind.com/es/skill/frontend-design.md): [Skill] Has the agent commit to a visual direction before building or redesigning an interface, making deliberate choices on color, type and layout instead of generic, templated AI UI. Official Anthropic skill. - [Frontend Design](https://hebbmind.com/es/plugin/frontend-design.md): [Plugin] Has the agent settle on a clear aesthetic direction first, then write distinctive, production-ready frontend interfaces that avoid the generic AI look. Official Anthropic plugin. - [Figma MCP Server](https://hebbmind.com/es/mcp/mcp-server-guide.md): [MCP] Figma's official remote MCP: hands components, variables and layout from your designs to the agent to generate code, and can create and edit designs on the canvas. Needs Figma sign-in; Starter plans and View or Collab seats get only 6 read calls a month. - [UI UX Pro Max](https://hebbmind.com/es/plugin/ui-ux-pro-max-skill.md): [Plugin] UI/UX design knowledge base plugin with searchable UI styles, color palettes, font pairings, charts and guidelines for 20+ tech stacks; generates complete design system recommendations by product type. Needs Python 3 installed locally. - [UI UX Pro Max](https://hebbmind.com/es/skill/ui-ux-pro-max-skill.md): [Skill] UI design knowledge base skill: looks up UI styles, palettes, font pairings, charts and UX guidelines by product type and generates a full design system, covering 22 stacks including React, SwiftUI and Flutter. Needs Python 3 locally. - [OpenDesign](https://hebbmind.com/es/mcp/open-design.md): [MCP] Open-source local design workbench and Claude Design alternative: builds web and mobile prototypes, slides, images and motion videos from a DESIGN.md system, exporting HTML, PDF, PPTX or MP4. MCP lets Claude Code and Codex use it. Needs the macOS or Windows app; Linux from source. - [Taste Skill](https://hebbmind.com/es/skill/taste-skill.md): [Skill] Helps agents build frontends that don't look templated: picks a design direction first, then tunes layout variance, motion intensity and information density. Also includes redesign audits, minimalist and brutalist styles, and design reference generation. - [Impeccable](https://hebbmind.com/es/skill/impeccable.md): [Skill] Frontend design polish skill: one skill with 24 commands such as polish, audit, critique and typeset, plus 61 deterministic rules that catch typical AI-generated UI problems, with live iteration in the browser. Works with Claude Code, Codex, Cursor and others. - [Impeccable](https://hebbmind.com/es/plugin/impeccable.md): [Plugin] Frontend design quality plugin: one skill plus 24 commands (audit, critique, polish and more) and 61 built-in deterministic rules that find common design flaws in AI-generated interfaces and fix them one by one. - [Penpot MCP Server](https://hebbmind.com/es/mcp/penpot-mcp.md): [MCP] Official MCP for the open-source design tool Penpot: through the Penpot plugin API, agents can query, modify and generate designs, supporting design-to-code and code-to-design. Run npx -y @penpot/mcp@latest first and load the MCP plugin in Penpot to connect. - [Conversion Rate Optimization (CRO)](https://hebbmind.com/es/skill/cro.md): [Skill] Conversion rate optimization skill from the marketingskills collection: give it a homepage, landing page, pricing page or form and it diagnoses value proposition, headlines, CTAs, trust signals and friction, returning quick wins, high-impact changes, A/B test ideas and alternative copy. - [Skills For Designers and Engineers](https://hebbmind.com/es/skill/emilkowalski-skills.md): [Skill] Design engineering skills by Emil Kowalski, author of Sonner and Vaul: choose animation easing and durations, review and improve motion, apply Apple design principles, make web apps feel native on phones, and help pick UI libraries and prototype multiple versions. - [daisyUI Colors](https://hebbmind.com/es/skill/daisyui-colors.md): [Skill] Color rules for daisyUI 5: explains semantic names such as primary, base-100 and error with their -content foregrounds, says to prefer them over fixed Tailwind colors and never add dark: to them, and shows how to enable, create and override themes. Part of the official daisyUI skill. - [Accessibility Compliance](https://hebbmind.com/es/plugin/accessibility-compliance.md): [Plugin] Accessibility review plugin with an audit command, a UI validation subagent, and WCAG 2.2 and screen reader testing skills. Before design reviews or launch, the agent checks contrast, keyboard use and screen reader support and suggests fixes. For Claude Code; automated checks need Node.js. - [UI Design](https://hebbmind.com/es/plugin/ui-design.md): [Plugin] UI/UX design plugin from the wshobson/agents marketplace with 3 subagents, 9 skills and commands for design review, component creation and accessibility audits, covering design tokens, WCAG 2.2, responsive layout, iOS HIG and Material Design 3 for in-code UI design and review. - [Playground](https://hebbmind.com/es/plugin/playground.md): [Plugin] Has the agent build single-file HTML interactive playgrounds: visual controls on one side, live preview on the other, and a prompt to copy back into Claude. Templates for design tuning, data exploration, concept maps, doc annotation, code review and architecture diagrams. By Anthropic. - [Web Design Guidelines](https://hebbmind.com/es/skill/web-design-guidelines.md): [Skill] Reviews UI code against Vercel's Web Interface Guidelines, covering accessibility, focus, forms, animation, typography, dark mode and more, listing issues as file:line. Fetches the latest rules before each review. Maintained by Vercel. - [Design](https://hebbmind.com/es/plugin/design.md): [Plugin] Plugin for design teams: design critiques, design system audits, UX copy, accessibility checks, user research synthesis and developer handoff notes. Official from Anthropic; works best with Figma connected. - [DESIGN.md](https://hebbmind.com/es/cli/design-md.md): [CLI] Google Labs' DESIGN.md format and CLI: designers capture colors, typography and spacing in a file for agents; lint checks broken references and WCAG contrast, diff compares versions and export outputs design tokens for Tailwind and more. Needs Node.js; the format is in alpha. - [Huashu Design](https://hebbmind.com/es/skill/huashu-design.md): [Skill] Have an agent produce high-fidelity clickable prototypes, editable slides, timeline animations (exportable to MP4/GIF) and infographics in HTML from one sentence. Proposes three design directions first and includes a five-dimension design review. By Huashu, MIT licensed. - [Garden Skills](https://hebbmind.com/es/skill/garden-skills.md): [Skill] ConardLi's skill collection: turn articles or scripts into web presentations you can screen-record as videos (23 themes, optional voiceover), lay out material as shareable long-form web pages, search local knowledge base folders, web design, and GPT-Image-2 image generation with 79 templates. - [UI Skills](https://hebbmind.com/es/skill/ui-skills.md): [Skill] UI skills for design engineers: clean up spacing and hierarchy in AI-generated interfaces, fix accessibility and page metadata, debug janky animations, build DESIGN.md from an existing product or site, and run read-only UI reviews with fix plans. Use with a local frontend project in a coding agent. - [Stitch Design Skills](https://hebbmind.com/es/skill/stitch-skills.md): [Skill] Companion skills for Google Stitch: generate UIs from text or images, extract DESIGN.md from code, and turn designs into React or React Native components. From Google Labs but not an officially supported Google product; set up the Stitch MCP first. - [Jakub Krehel Skills](https://hebbmind.com/es/skill/jakubkrehel-skills.md): [Skill] Design engineer Jakub Krehel's 11 UI skills: targeted fixes for typography, color, layout, accessibility and UI copy, plus full interface reviews, animation teardowns, component state stress tests and multi-variant generation. Works on web project code; installing needs Node.js. - [Product Design](https://hebbmind.com/es/plugin/product-design.md): [Plugin] OpenAI's official Codex plugin that turns early product ideas, live pages or screenshots into interactive prototypes, proposing a few visual directions before building. Also reviews user flows, researches user pain points and checks accessibility issues. - [MagicPath (Codex)](https://hebbmind.com/es/plugin/magicpath.md): [Plugin] MagicPath's official Codex plugin from OpenAI's plugin marketplace: search and install UI components from MagicPath canvases, apply team themes, and move interfaces from local code onto the canvas to keep iterating. Needs a MagicPath account and Node.js. - [Figma (Codex)](https://hebbmind.com/es/plugin/figma.md): [Plugin] Figma's Codex plugin in OpenAI's official marketplace: implements UI from designs, generates Code Connect mappings, and creates or updates pages, component libraries, FigJam diagrams and slides in Figma. Needs a connected Figma account. - [Talk to Figma MCP](https://hebbmind.com/es/mcp/cursor-talk-to-figma-mcp.md): [MCP] Uses a Figma plugin and a local WebSocket server so agents can read and directly edit designs: create frames and text, adjust auto layout and styles, and replace copy in bulk. Requires Bun; now maintained by Grab. - [Company Logos](https://hebbmind.com/es/skill/company-logos.md): [Skill] Has the agent use Iconify Simple Icons brand marks instead of typed company names in logo rows, integration grids and partner lists, sized in a 64x64 box, monochrome by default, grid-aligned and labeled for accessibility when needed. - [Design-First UI Prompting](https://hebbmind.com/es/skill/design-first-ui-prompting.md): [Skill] Turns a fuzzy UI idea into a design-first prompt spec for UI generation: goal, format, layout, type system, color, imagery, exact copy, constraints and negative prompt, then iterates by changing one variable at a time. - [Pricing Page](https://hebbmind.com/es/skill/pricing-page.md): [Skill] Designs or rewrites a high-converting SaaS pricing page: gathers plans, limits, upgrade triggers and objections, then structures a value headline, monthly/annual toggle, tiered plans, comparison, FAQ and trust sections with copy templates. - [Animation Systems](https://hebbmind.com/es/skill/animation-systems.md): [Skill] Guides the agent to build a coherent, product-grade web motion system in the style of Stripe, Linear, Apple and Vercel: reusable primitives, duration and easing defaults, stagger choreography, scroll and hover patterns, performance rules and reduced-motion support. - [Tailwind CSS](https://hebbmind.com/es/skill/tailwindcss.md): [Skill] General guidance for building UI with Tailwind CSS: responsive and state variants, dark mode, sparing arbitrary values, components before @apply, and pitfalls such as dynamically built class names missing in production, with button and hero examples. - [WebGL Landing Steering](https://hebbmind.com/es/skill/webgl-landing-steering.md): [Skill] Steers WebGL-heavy landing pages toward a chosen look by picking one of four visual lanes per page type, passing message, performance, accessibility and reliability gates, and outputting a lane, visual spec, stack, fallback and build order. - [Beautiful Shadows](https://hebbmind.com/es/skill/beautiful-shadows.md): [Skill] Gives the agent three exact Tailwind arbitrary-value shadow utilities (sm, md, lg) for layered, neutral elevation on cards, controls, popovers and hero media, with rules against mixing them with default shadows, tinting or stacking. - [Container Lines](https://hebbmind.com/es/skill/container-lines.md): [Skill] Adds thin vertical guide lines at the content container edges plus small corner squares for a measured, structured layout, with CSS tokens and pseudo-element code that keeps guides behind content and out of pointer events. - [Landing Page](https://hebbmind.com/es/skill/landing-page.md): [Skill] Designs or rewrites a single-offer, high-converting landing page for SaaS, apps or services: gathers the primary action, audience, objections and proof, then lays out hero, argument and objection-handling sections with copy templates and SEO/AEO notes. - [Progressive Blur](https://hebbmind.com/es/skill/progressive-blur.md): [Skill] Creates a layered progressive blur at the top or bottom edge of the viewport by stacking backdrop-filter layers with gradient masks, with ready-to-paste HTML and CSS and knobs for height, blur steps, direction and z-index. - [pastel](https://hebbmind.com/es/cli/pastel.md): [CLI] Command-line color tool: generate, mix, lighten and darken colors, convert between HEX, RGB, HSL, Lab and more, build gradients and sets of distinct colors, pick readable text colors for a background, and simulate color blindness. Install via Homebrew; no account or API key. - [OpenPencil](https://hebbmind.com/es/mcp/openpencil.md): [MCP] Open-source AI-native vector design tool with an MCP server built into its desktop app, connectable to Claude Code or Codex in one click. Agents read and edit .op designs in natural language, apply style guides and export React, Vue, Flutter or SwiftUI code. Needs the desktop app. - [Interface Design](https://hebbmind.com/es/plugin/interface-design.md): [Plugin] Design engineering plugin for product interfaces such as admin panels and dashboards: builds UI on design principles and saves spacing, color and hierarchy decisions to .interface-design/system.md to stay consistent across sessions. Not meant for marketing pages. - [Text-to-Lottie (Diffusion Studio)](https://hebbmind.com/es/skill/lottie.md): [Skill] Lets agents generate production-ready Lottie animations (icon motion, loaders, data animations and more) from a text description or SVG, with a local player for live preview and tweaks. Export JSON for web, apps or After Effects. Needs Node.js locally. - [Style Dictionary](https://hebbmind.com/es/cli/style-dictionary.md): [CLI] Design token build tool: define colors, font sizes, spacing and other design specs in one JSON source, then style-dictionary build generates CSS, SCSS, iOS, Android and other platform code, keeping the design system and implementations in sync. Needs Node.js and a config.json. - [designlang](https://hebbmind.com/es/cli/design-extract.md): [CLI] Reads any website's design system in a headless browser and exports DTCG design tokens, Tailwind config, Figma variables and a brand guide in one command, scoring contrast and cross-page consistency. Also an MCP server or Claude Code plugin. Needs Node.js and Chromium or Chrome. - [Make Interfaces Feel Better](https://hebbmind.com/es/skill/make-interfaces-feel-better.md): [Skill] Design engineer Jakub Krehel's UI polish skill covering animation, typography, icons, hover states, optical alignment, concentric radii, shadows and hit areas, with quick and full review modes, so agents get the details right when building or reviewing UI. Works on web code; needs Node.js. - [Dembrandt](https://hebbmind.com/es/cli/dembrandt.md): [CLI] Extracts any website's logo, colors, fonts, spacing, shadows and motion in one command, exporting W3C design tokens, a Tailwind theme, DESIGN.md or a brand guide PDF, plus WCAG contrast checks. Good for competitor and brand audits. Needs Node.js 18+; run dembrandt install-browser first. - [Designer Skills Pack](https://hebbmind.com/es/plugin/designer-skills.md): [Plugin] Claude Code plugin marketplace for designers: 33 plugins and 273 skills for user research, design systems, UX strategy, interaction, prototype testing, visual critique and accessibility. Install designer-toolkit and run /designer-toolkit:start-here for a suggested flow; no coding needed. - [Landing Page Design](https://hebbmind.com/es/skill/landing-page-design.md): [Skill] Builds landing pages in two halves: intake questions, page structure, layout choice, conversion copy and SEO first, then a strict visual system for fonts, Tailwind type scale, spacing, radius, backgrounds, icons and motion. The rules are opinionated, e.g. no Inter font and no background gradients. - [Figma Console MCP](https://hebbmind.com/es/mcp/figma-console-mcp.md): [MCP] Lets agents read and write Figma: extract variables, components and styles, create and edit screens, FigJam boards and slides on the canvas, and run accessibility checks and design-system audits. Needs a Figma personal access token, the Figma desktop app, Node.js and the companion plugin. - [Wondel.ai Skills](https://hebbmind.com/es/skill/wondelai-skills.md): [Skill] 65 skills built on methods from business, marketing and design bestsellers like Influence, StoryBrand and The Lean Startup: positioning, copywriting, conversion optimization, sales negotiation, UX review, plus step-by-step startup and site-building guides. Prompt-only, no API key needed. Next page: https://hebbmind.com/es/tools.md?page=2&profession=design%2Ceducation&tag=ui-design