mirrors / skillhub-185-design-system-builder

项目文件夹

文件

T

wehub-skill-sync 3a956ae284 chore: import zh skill design-system-builder

2026-07-13 21:37:08 +08:00

6.5 KiB

原始文件 永久链接 Blame 文件历史

name, description

name	description
design-system-builder	从参考 UI 图片中提取设计系统，并生成可直接用于实现的 UI 设计提示词。当用户提供 UI 截图/设计稿并希望创建统一风格的设计、生成设计系统或构建与参考审美一致的 MVP 界面时使用。

UI Designer

概述

本技能支持通过多步骤工作流，从参考 UI 图片中系统性地提取设计系统：分析视觉模式 → 生��设计系统文档 → 创建 PRD → 产出可直接用于实现的 UI 提示词。

何时使用

用户提供 UI 截图、设计稿或设计参考
需要从现有设计中提取调色板、排版、间距
希望从视觉示例生成设计系统文档
构建与参考审美风格一致的 MVP 界面
创建遵循统一设计原则的多个 UI 变体

工作流程

步骤 1：收集输入

向用户请求以下内容：

参考图片目录：包含 UI 截图/设计稿的文件夹路径
项目构想文件：描述产品概念和目标的文档
现有 PRD（可选）：如果 PRD 已存在，则跳过步骤 3

步骤 2：从图片中提取设计系统

使用 Task 工具配合通用型子代理，提供以下内容：

提示模板来自 assets/design-system.md：

分析调色板（主色、辅色、强调色、功能色）
提取排版信息（字族、字号、字重、行高）
识别组件样式（按钮、卡片、输入框、图标）
记录间距系统
记录动画/过渡模式
如果存在深色模式变体，一并包含

将参考图片附加到子代理上下文中。

输出：遵循模板格式的完整设计系统 Markdown

保存至：documents/designs/{图片目录名}_design_system.md

步骤 3：生成 MVP PRD（如未提供）

使用 Task 工具配合通用型子代理，提供以下内容：

提示模板来自 assets/app-overview-generator.md：

将 {项目背景} 替换为项目构想文件中的内容
模板引导生成：电梯演讲、问题陈述、目标用户、独特卖点、功能列表、UX/UI 注意事项

与用户交互以完善和明确产品需求

输出：结构化的 PRD Markdown

保存为变量用于步骤 4（可选择保存至 documents/prd/）

步骤 4：组合最终 UI 实现提示词

使用 assets/vibe-design-template.md 将设计系统与 PRD 合并：

替换项：

{项目设计指南} → 步骤 2 中生成的设计系统
{项目MVP PRD} → 步骤 3 中生成的 PRD 或已提供的 PRD 文件

结果：完整的、可直接用于实现的提示词，包含：

设计美学原则
项目特定的颜色/排版指南
应用概览与功能需求
实现任务（多个 UI 变体、组件结构）

保存至：documents/ux-design/{构想文件名}_design_prompt_{时间戳}.md

步骤 5：验证 React 环境

检查是否存在已有的 React 项目：

find . -name "package.json" -exec grep -l "react" {} \;

如果未找到，告知用户：

npx create-react-app my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install lucide-react

步骤 6：实现 UI

使用步骤 4 中生成的最终提示词在 React 项目中实现 UI。

该提示词要求：

创建多个设计变体（移动端 3 个，Web 端 2 个）
组织为独立的组件：[solution-name]/pages/[page-name].jsx
在展示页面中聚合所有变体

模板资源

assets/design-system.md

用于提取视觉设计模式的模板。包含以下章节：

调色板（主色、辅色、强调色、功能色、背景色）
排版（字族、字重、文本样式）
组件样式（按钮、卡片、输入框、图标）
间距系统（4dp–48dp 比例）
动画（时长、缓动曲线）
深色模式变体

在分析参考图片时使用此模板，确保设计系统覆盖全面。

assets/app-overview-generator.md

用于协作生成 PRD 的模板。引导完成以下内容：

电梯演讲
问题陈述与目标用户
独特卖点
目标平台
附有用户故事的功能列表
各屏幕的 UX/UI 注意事项

设计为与用户交互式完善需求。

assets/vibe-design-template.md

最终的实现提示词模板，整合了设计系统和 PRD。包含：

美学原则（极简主义、留白、色彩理论、排版层级）
实践要求（Tailwind CSS、Lucide 图标、响应式设计）
任务规格（多个变体、组件组织）

该模板生成的提示词可直接用于 UI 实现，无需进一步修改。

最佳实践

图片分析

在开始分析之前先阅读所有图片
关注跨多个屏幕的模式规律
同时记录显式样式（颜色、字体）和隐含原则（间距、层级）
如果参考图片中包含深色模式，一并捕获

设计系统提取

保持系统性：覆盖模板的所有章节
使用具体数值（十六进制色码、px 尺寸），而非泛泛描述
在可推断的情况下记录设计选择背后的"原因"
包含变体状态（悬停状态、禁用状态）

PRD 生成

与用户交互以澄清模糊之处
基于对问题的理解建议功能
确保 MVP 范围切实可行
记录每个屏幕/交互的 UX 注意事项

输出组织

使用描述性文件名保存设计系统（基于图片目录名）
使用时间戳保存最终提示词，便于版本追踪
将所有输出保存在 documents/ 目录下，方便查阅
保留中间输出以便迭代

使用示例

用户提供：

reference-images/saas-dashboard/（5 张截图）
ideas/project-management-app.md（项目概念）

执行工作流程：

读取 reference-images/saas-dashboard/ 中的 5 张图片
使用 Task 工具 → design-system.md 模板 → 分析图片
保存至 documents/designs/saas-dashboard_design_system.md
使用 Task 工具 → app-overview-generator.md 配合项目概念
通过与用户交互完善 PRD
使用 vibe-design-template.md 合并设计系统与 PRD
保存至 documents/ux-design/project-management-app_design_prompt_20251025_153000.md
检查 React 环境，如需搭建则告知用户
使用最终提示词实现 UI

备注

这是一个高自由度的工作流程——根据上下文调整各步骤
模板提供结构框架，但鼓励深思熟虑的分析而非机械填空
PRD 生成过程中的用户交互对质量至关重要
最终提示词的质量直接影响 UI 实现的成败
保留所有中间输出，便于迭代和完善

6.5 KiB 原始文件 永久链接 Blame 文件历史 Unescape Escape