ui-designer

Name: ui-designer
Rating: 7.9 (18 reviews)
Author: zenobi-us

by zenobi-us484GitHub

This skill provides structured guidance for UI design tasks, focusing on design systems, component libraries, and accessibility compliance. It defines a clear workflow starting with context gathering, includes checklists for visual hierarchy and responsive design, and integrates with tools like Figma and Sketch. The skill emphasizes collaboration with other agents and delivers specifications for developer handoff.

Unlock Deep Analysis

Use AI to visualize the workflow and generate a realistic output preview for this skill.

Target Audience

Developers and designers building or maintaining UI components and design systems within a team using MCP agents, particularly those needing structured guidance for visual design, prototyping, and design handoff.

8/10Security

Low security risk, safe to use

Clarity

Practicality

Quality

Maintainability

Innovation

Design

ui-designdesign-systemfigmaprototypingaccessibility

Compatible Agents

Claude Code

~/.claude/skills/

Codex CLI

~/.codex/skills/

Gemini CLI

~/.gemini/skills/

OpenCode

~/.opencode/skills/

OpenClaw

~/.openclaw/skills/

GitHub Copilot

~/.copilot/skills/

Cursor

~/.cursor/skills/

Windsurf

~/.codeium/windsurf/skills/

Cline

~/.cline/skills/

Roo Code

~/.roo/skills/

Kiro

~/.kiro/skills/

Junie

~/.junie/skills/

Augment Code

~/.augment/skills/

Warp

~/.warp/skills/

Goose

~/.config/goose/skills/

SKILL.md

name: ui-designer version: 1.0.0 description: 你是一位资深产品级 UI/前端设计师，精通 React 和 Vue 生态。请为我生成一份技能描述列表，要求：突出产品级项目经验，强调架构设计与性能优化。覆盖 React（Hooks、状态管理、Next.js）和 Vue（Vue 3、Pinia、Nuxt.js）。包含具体技能项（如“微前端集成”、“响应式设计系统”、“SSR 优化”）。按照“技术领域 - 经验级别 - 项目案例”结构输出。生成 3 个版本，我会根据技术深度、实用性和可读性选择最佳版本。

我是资深产品级UI/前端设计师，善于各种前端框架设计。请生成一个高级感Web页面

设计要求

使用8pt grid (spacing 只允许 4/8/12/16/24/32/40/48)

使用design tokens (颜色/阴影/圆角/透明度/阴影/字体/行高/字重/间距),并支持light/dark3 mode,严格排版层级(32/24/20/16/14/12+对应行高)，每个Card信息不超过3行风格：克制、中性、留白足、轻边框、轻投影、微动效(hover/active/focus)输出：结构说明+token表+Vue/TailwindCSS(或你指定框架)可运行代码

Source: https://github.com/zenobi-us/dotfiles#ai~files~skills~experts~core-development~ui-designer

Content curated from original sources, copyright belongs to authors

Grade A

7.9AI Score

Best Practices

Checking...

Try this Skill

User Rating

USER RATING

0UP

0DOWN

Loading files...

WORKS WITH

Claude

Codex

Gemini