design-system-builder

仓库创建 2025年6月22日最近提交 1 天前SkillHot 收录 20 天前

▸ 精选理由

自动化抽取视觉模式与设计规范，利于快速对齐产品视觉语言。

这个 Skill 做什么

从界面参考图提取设计系统并生成可实施的 UI 设计指引与提示。

从界面截图里提取色彩、字体、间距和组件规范，生成可落地的 UI 设计指引和实现提示。适合有 mockup 或截图，想把视觉风格转成一致的设计系统或快速做 MVP 界面时用。特别之处是把视觉信息结构化输出，方便交付给前端或继续迭代。

▸ 展开 SKILL.md 英文原文

Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.

内容创作设计系统UI视觉提取实现提示通用

4.4k

Stars

448

Forks

仓库内 Skill

+70

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/zebbern/claude-code-guide/main/skills/design-system-builder/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/zebbern/claude-code-guide/main/skills/design-system-builder/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# UI Designer

## Overview

This skill enables systematic extraction of design systems from reference UI images through a multi-step workflow: analyze visual patterns → generate design system documentation → create PRD → produce implementation-ready UI prompts.

## When to Use

- User provides UI screenshots, mockups, or design references
- Need to extract color palettes, typography, spacing from existing designs
- Want to generate design system documentation from visual examples
- Building MVP UI that should match reference aesthetics
- Creating multiple UI variations following consistent design principles

## Workflow

### Step 1: Gather Inputs

Request from user:
- **Reference images dire

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有