ui/ux设计师：把可访问性和以用户为中心的设计写进界面工作流
介绍社区 Skill ui/ux设计师（坐标 @user_3c47cf70/ui-ux-max，版本 1.0.0，来源 community，分类 design-media）。它面向界面设计、设计系统、动画和可访问性四类工作，防止快捷键只按美观排布，并把可访问性与可用性变成流程中的硬约束，无论遇到时间压力、权威建议还是“锦上添花”式的否定都不让步。使用无需 API key。安装命令未在资料中给出，需访问官方地址确认。适合需要定期做界面取舍的开发者和设计者，注意其社区维护、安装量尚小，且不替代真实可用性测试。
Read Moredavepoon-buildwithclaude-moodboard-creator：把灵感素材整理成可落地的设计方向
这个社区 Skill 解决视觉落地前的卡点：参考图收了一堆，却拿不出能指导开发的说明。它按通用 SKILL.md 格式提供分步指导，从灵感素材中提取颜色、排版和 UI 模式，组织成文档化的设计方向，再按用户反馈迭代，最终形成可供实施的设计系统。官方建议的前置步骤是趋势调研或网站分析。由 user_31805bfd 发布，版本 1.0.0，分类 design-media，来源 community，requires_api_key=false，无需额外 API Key。正文说明了它不生成图片、输出质量依赖素材质量等限制，并给出素材准备、要素提取、方向组织、迭代收敛的四步流程。
Read MoreUI原型设计：从界面布局到设计系统搭建的完整流程指南
UI原型设计是一个面向界面原型设计环节的 Skill，由社区发布者 user_3c6cb52e 发布，属于 design-media 分类，当前版本 2.0.1，采用通用 SKILL.md 格式，标签 requires_api_key=false，无需 API Key。它把界面原型设计拆成一条完整流程：先做界面布局确定页面骨架，再做组件选型，接着定义交互的状态流转，最后把沉淀下来的样式、组件和规则固化为一套设计系统，前一环节的产出作为后一环节的输入。文章介绍了它是什么、四部分核心功能、安装启用方式（资料中未给出官方安装命令，指向官方页面核实）、按流程推进的典型用法，以及适用场景与注意事项：它提供的是流程指南而不包含组件库或模板文件，安装数为 0、评分 100000 的口径未说明，范围不涉及后端与构建。
Read More设计系统审计助手：给 UI 一致性做自动审计
设计系统审计助手是 SkillHub 上的社区 Skill（坐标 @user_c562f70c/design-system-auditor，版本 1.0.0，分类 design-media），面向设计系统落地后的样式漂移问题。它提供四项核心能力：UI 一致性审查、设计 Token 规范生成、组件库遵守情况检查、涉及样式的 PR 审阅，支持 Material Design、Ant Design 及自定义系统搭建。标签 requires_api_key=false，页面显示评分 100000、下载 881、安装 0。文章给出官方页面与 API 入口，说明在对话式编码工具中的启用方式与四类典型用法，并指出审计依赖规范完整性、不替代功能测试、采用前需在测试项目验证等注意事项。
Read More0177: Dark Purple and Gold Themed Website Design System
0177 is a dark purple and gold themed website design system Skill reconstructed from the Photofolio photography portfolio template. It is maintained by SkillHub community publisher user_6ca8e607, classified under design-media, requires no API key, and is at version 1.0.0. This Skill includes a complete static template site and design specifications, suitable for tribute sites, personal portfolios, photography galleries, sports hall of fame websites, and web designs that explicitly require a purple and gold color scheme, a dark premium aesthetic, or Mamba/Lakers styling. The article introduces its positioning, verified core features, installation access, and typical usage, while also highlighting considerations such as static site extensions and license verification.
Read MoreFrontend UI Engineering: Bridging the Gap from "It Runs" to "Production-Ready"
Frontend UI Engineering (@kunlungrowth/kg-frontend-ui-engineering) is a frontend development Agent Skill released by Kunlun Growth, categorized under dev-programming with version 1.0.0. Targeting the issue of model-generated interfaces being "runnable but undeliverable," it codifies design systems, WCAG accessibility, responsive layouts, and state management practices into the generation workflow, explicitly aiming to circumvent "AI aesthetics." Following the official introduction, the article outlines four core capabilities and provides an actionable interface development workflow (establishing constraints first, prioritizing semantic structure, completing loading/empty/error states, and performing breakpoint and accessibility self-checks). It also details applicable scenarios and limitations: the Skill does not include the component library itself, does not replace real browser testing, and its effectiveness depends on the clarity of the design system. Due to two failed scraping attempts on the official page, the retrieved materials lacked installation commands and configuration fields; the article reports this factually, defers to the official page, and does not fabricate any commands or data.
Read MoreDesign Taste Frontend: Determine Design Direction Before Writing Pages
Design Taste Frontend (Leonxlnx/taste-skill) is a frontend Skill targeting landing pages, portfolios, and redesign projects, located at @user_2bd73b3a/design-taste-frontend-leonxlnx-user-2bd73b3a. Version 1.0.0, sourced from the community, categorized under design-media, and published by user_2bd73b3a. It requires_api_key=false, so no API Key is needed. Its core approach is to have the Agent first read the brief, infer the design direction, and then produce an interface that does not resemble a template. When applicable, it adopts a real design system; for redesign projects, it audits before making changes; and before delivery, it runs a strict pre-flight check. The article unfolds within its capability boundaries, without fabricating installation commands, configuration fields, or official examples. Installation methods and pre-flight check details not provided in the materials are honestly noted as pending verification.
Read MoreBaoyu Multi-style Illustration Drawing: A Unified Dark Theme SVG Skill
Baoyu Multi-Type Diagram Drawing (@org-b6kzcl68/baoyu-diagram, v1.0.0) is a drawing skill in the design-media category on SkillHub, published by Chongqing Tuguang Network Media Co., Ltd., and tagged with requires_api_key=false. It solves the problems of lacking drawing standards and experiencing messy graphic overlaps and layering when Agents generate SVGs. It features built-in semantic color schemes, JetBrains Mono monospace fonts, grid backgrounds, arrow markers, correct layer rendering order, and strict spacing rules. It covers diagram types such as architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, schematic diagrams, state machines, and data flow diagrams. It outputs a self-contained single .svg file and can convert it to @2x PNG. Trigger phrases include "draw a diagram", "draw an architecture diagram", "diagram", "flowchart", and "sequence diagram". This article introduces its positioning, core capabilities, installation and activation methods, reproducible typical use cases, as well as applicable scenarios and considerations.
Read MorePersonal Dashboard Builder: **Unify** daily widgets into a single HTML file.
Personal Workspace Builder Expert is a Skill designed for personal use, located at @user_cae83fba/workspace-builder, version 2.0.1, sourced from community and categorized under life-service, with no API Key required. It identifies needs by first leveraging presets across five user personas (student exam prep, workplace productivity, self-media creation, mothering/childcare, lifestyle management) and nine major scenarios, then selects 3–4 modules from a library of 21. Following 21 iron rules, it generates a single-file HTML workspace. Data is persisted locally via localStorage. It supports five clickable design systems—Brand, Apple, Linear, Notion, and Material—and allows one-tap addition to a phone’s home screen. The official description includes a series of trigger words (workspace, check-in dashboard, civil service exam dashboard, bookkeeping dashboard, to-do dashboard, want a webpage, etc.) and explicitly excludes team back-office tools, corporate reports, public portfolios, one-off lottery/countdown pages, and general HTML coding Q&A. Installation instructions are not provided in the official summary; only the SkillHub page address is available.
Read MoreFull-stack UI Design Expert: Turning Design Systems and Delivery Standards into an Actionable Skill
UI & Graphic Design Master (@user_442551c3/ui-design-expert-600029, v1.0.0, categorized as design-media, no API Key required) is a community-sourced design Skill covering the entire UI/graphic design workflow. Its core capabilities are divided into three sections: 1. A four-layer design system pyramid (foundational language → component library → page templates → collaboration standards), including a brand color system, typography hierarchy, 8pt grid, and spacing standards. 2. Interfaces and components, featuring a component library for buttons, forms, cards, modals, and navigation; the full Wireframe-to-Mockup-to-Prototype workflow; an icon and illustration system; and WCAG accessibility standards. 3. Collaboration and delivery, covering Figma/Sketch workflows, annotation, asset slicing, and Design Tokens. It is applicable for building design systems from scratch, unifying team styles, establishing standards for colors, typography, and components, standardizing handoff to development, APP/Web interface design, and design reviews. No one-click installation command is officially provided; it must be loaded in the client via the SKILL.md method.
Read MoreBuilding an Experience Design System: Codifying the repeatable workflows of design system creation into a reusable Skill
This article introduces the Skill "Experience Design System Building" (@org-b6kzcl68/ui-ux-designer, version 1.0.0, published by Chongqing Tuguang Network Media Co., Ltd., source: enterprise, category: design-media). It organizes the methodology of interface and experience design into an on-demand expert guide, covering design system methodology and token management; component library design and documentation; user research and usability testing; accessibility standards (including contrast analysis and keyboard navigation); information architecture and conversion optimization; responsive and cross-platform patterns; micro-interaction animations; multi-brand themes and dark mode; and the design-to-development handover process. Starting from the pain points of repeatedly redefining tokens and rewriting handover specifications in design work, the article explains its core capabilities and trigger words, factually notes unverified installation commands, and provides applicable scenarios and precautions: the tag requires_api_key=false indicates no API Key is required for use; with version 1.0.0 and zero installations, it recommends validating it in a small-scale pilot.
Read MoreEDIC Design System
The EDIC Design System is a community Skill for generating UI components, complete pages, documents, emails, and assets that adhere to the Editorial × Olive Green visual guidelines. It is built on OKLch color tokens, supports dark mode and Chinese optimization, and outputs accessible HTML/CSS.
Read MoreFront-end Full-stack Design Expert
Integrating visual creativity, web prototype design, production-grade interface engineering, and experience/accessibility review, the Frontend Full-stack Design Expert Package covers the complete frontend workflow from concept to production. It is applicable to frontend tasks including websites, landing pages, dashboards, UI components, design systems, HTML presentations, animations, and data visualization.
Read MoreDESIGN.md to Prototype: From Design Document to Working HTML
"DESIGN.md to Prototype" is a SkillHub community skill that reads Stitch DESIGN.md and requirements descriptions to generate a single HTML file prototype. It is ideal for scenarios where you need to quickly produce a working page from design documents.
Read Moreui-design-aitool-plus: High-Fidelity UI Generation Tool Covering 11 Major Platform Design Systems
ui-design-aitool-plus is a design skill covering the design systems of 11 major platforms, supporting mobile apps, desktops, and mini-programs. With a single command, it generates native-level, high-fidelity UI solutions, including design specification documents, component libraries, and interactive HTML prototypes.
Read Moreui-ux-pro: Cross-Stack Design Guide
Introducing ui-ux-pro, a cross-stack design guide Skill published by community users. It provides 67 styles, 96 color schemes, 57 font pairings, 99 UX guidelines, and 25 chart types, covering 13 tech stacks, with a searchable database and priority-based recommendations. It is ideal for quickly obtaining design standards and interaction suggestions matched to your current stack during conversations.
Read MoreImpeccable Poster Style Design | Jianshi AI: Solidifying Visual Standards with Skills
The SkillHub community skill "Perfect Editorial Poster Style Design | Jianshi AI" (@user_fccf428b/impeccable, v1.0.1) writes the Impeccable editorial poster style into SKILL.md. Featuring cream and burnt orange blocks, amber tokens, WCAG 2.2 AA compliance, and a fixed output structure, it guides Agents to generate actionable design system documents. This article outlines its positioning, core capabilities, installation paths on SkillHub (Cursor/Codex/Claude Code), and typical prompts, while noting the discrepancies between the store description and the package's font fields.
Read MorePRD to UI Prototype Design Expert Team: From Requirements Document to Reviewable Prototype
PRD to UI Prototype Design Expert Squad (@user_cae83fba/design-ui-prototype-expert-pack) is a SkillHub community Skill in the design-media category. Version 1.2.0, no API key required. It transforms a PRD, requirements spec, or product idea into a reviewable UI prototype, design specifications, a design system, and a front-end handoff checklist, and performs evidence-based reviews of existing prototypes. If information is missing, it asks follow-up questions first. Deliverables are review-grade rather than production-grade front-end. The article outlines core capabilities, guardrails and boundaries, installation paths (SkillHub CLI, Cursor, etc.), and typical trigger scenarios.
Read Moreui-ux-pro-max: Integrating UI/UX Design Knowledge into Agent Skills
ui-ux-pro-max is an enterprise-grade design-media Skill (v1.0.0) released by Zhiyu Technology on SkillHub, requiring no API Key. It features 50 styles, 21 color palettes, 50 font pairings, and 20 chart types, targeting 9 tech stacks including React, Next.js, Vue, and Svelte. The article explains its positioning, verified capability boundaries, and installation steps into skills directories of Cursor, Claude Code, etc. via the skillhub CLI or official prompts. It also reminds users to refer to the SKILL.md in the package and avoid speculating about unpublished stack names and workflows.
Read MoreFrontend User Experience Engineering: Constraining Production-Grade Interface Output with Skill
Introduce the SkillHub skill “Production-Grade Frontend Interface Engineering Standards” (@org-b6kzcl68/frontend-ui-engineering, v1.0.0). This Skill is intended for creating or modifying user interfaces, covering component architecture and file colocat...
Read Moredesign-system-polisher: Polishing AI-generated interfaces with 59 brand design system specifications
design-system-polisher is a SkillHub community skill that embeds 59 brand design system specifications—including Apple, Stripe, and Vercel—directly into its core. Upon selecting a style at launch, it audits and optimizes Agent-generated UI code against these standards. It requires no API key and runs offline. This article covers its positioning, core capabilities, installation methods via the skillhub CLI and skills directories (Cursor, Claude Code, Codex), and typical usage workflows.
Read MoreUI/UX Design Master: Completing Interface, Brand, and Design System Decisions in Agents
The UI/UX Design Master is a Skill from the SkillHub community (Skill: @user_ad872d55/ui-ux-designer, v2.1.1) and requires no API Key. Its introduction covers UI/UX, Eastern and Western aesthetics, and brand VI, as well as design-system management including multi-project standardization, cross-platform synchronization, and theme switching. Trigger words include design, brand, UI, color scheme, component library, etc. The article describes its positioning and capability boundaries, and provides the skillhub CLI installation command, examples of skills directories for Cursor, Claude Code, and Codex, along with reproducible conversation usage.
Read MoreDesign Maven: UI/UX Diagnosis and Design System Collaboration within the Agent
Design Master is a Skill from the SkillHub community (ID: @user_ad872d55/design-master, v2.2.0, design-media). It integrates UI/UX, web design critique, aesthetics, VI, and design system management to diagnose the root causes of why a page looks off. It requires no API Key. The article outlines its positioning, trigger keywords, installation methods via SkillHub CLI and prompts, and skills directories such as Cursor, providing reproducible conversation examples based on the official description.
Read Moredsh-design-tokens: Design Token Naming Conventions Reference
`dsh-design-tokens` is a plugin for DeepSeek Harness (DSH) that addresses the challenge of unifying naming conventions in design systems. Maintained by uckkk, it provides predefined specifications and tools to ensure that the code or configurations generated by developers comply with specific naming rules. Implemented in pure Node.js with no network dependencies, it must be installed and configured in the `package.json` of the profile. It can be invoked directly in a session, but users should be mindful of its dependency versions and code security.
Read MoreDeep Design: DeepSeek Harness Design Patterns Plugin
DeepSeek Harness's Deep Design plugin, guided by the “everything is a plugin” philosophy, turns local tools into a design studio. It includes agent presets, principle skill packs, and QA skill packs, supporting a complete closed loop from briefs to delivery. The tool uses first principles to guide design, offers composition and motion suggestions, and achieves automatic repair and iteration through headless rendering and structured critique. The plugin runs entirely locally, supports web research, allows design memory to accumulate across sessions to improve design quality, and provides privacy protection under an MIT open-source license.
Read More# Figma-Create-Design-System-Rules: Develop Project-Specific Design System Rules for Agents
This is an introduction to `figma-create-design-system-rules` in the openai/skills curated catalog: On the premise of connecting Figma MCP, it analyzes the codebase and generates project-level design system rules, constraining component paths, Design Tokens, styling solutions and the Figma-to-code workflow, and writes them into `CLAUDE.md`, `AGENTS.md` or `.cursor/rules/figma-design-system.mdc` respectively, to alleviate problems such as random use of spacing, hard-coded colors, and repeated creation of components when AI implements UI. The article verifies the installation method, five-step workflow and precautions.
Read MoreUse figma-generate-design to reverse-generate pages from code into Figma
This article introduces the `figma-generate-design` Skill in the OpenAI curated and Figma MCP ecosystems: on the premise that Figma MCP is connected and the target file has a design system, it writes application pages or multi-block layouts into Figma in the form of component instances and Tokens, and forcibly cooperates with `figma-use`. The article verifies official processes including plugin installation (Cursor / Claude Code / Codex), npx skills installation method, block assembly and parallel calibration of `generate_figma_design`, as well as the boundaries between adjacent Skills such as `figma-implement-design` and Code Connect.
Read More