Turn reference UI screenshots into documented design rules, product requirements, and prompts for building React interfaces. Extract colors, typography, spacing, and component styles, then use them to create consistent screen variations.
中文简介正在准备中。当前显示英语简介。
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.
安装前可以查看交给 AI 代理的指令内容。
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.
Request from user:
Use Task tool with general-purpose subagent, providing:
Prompt template from assets/design-system.md:
Attach reference images to the subagent context.
Output: Complete design system markdown following the template format
Save to: documents/designs/{image_dir_name}_design_system.md
Use Task tool with general-purpose subagent, providing:
Prompt template from assets/app-overview-generator.md:
{项目背景} with content from project idea fileInteract with user to refine and clarify product requirements
Output: Structured PRD markdown
Save as variable for Step 4 (optionally save to documents/prd/)
Combine design system and PRD using assets/vibe-design-template.md:
Substitutions:
{项目设计指南} → Design system from Step 2{项目MVP PRD} → PRD from Step 3 or provided PRD fileResult: Complete, implementation-ready prompt containing:
Save to: documents/ux-design/{idea_file_name}_design_prompt_{timestamp}.md
Check for existing React project:
find . -name "package.json" -exec grep -l "react" {} \;
If none found, inform user:
npx create-react-app my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install lucide-react
Use the final composed prompt from Step 4 to implement UI in React project.
The prompt instructs to:
[solution-name]/pages/[page-name].jsxTemplate for extracting visual design patterns. Includes sections for:
Use this template when analyzing reference images to ensure comprehensive design system coverage.
Template for collaborative PRD generation. Guides through:
Designed for interactive refinement with user to clarify requirements.
Final implementation prompt template combining design system and PRD. Includes:
This template produces prompts ready for UI implementation without further modification.
documents/ directory for easy referenceUser provides:
reference-images/saas-dashboard/ (5 screenshots)ideas/project-management-app.md (project concept)Execute workflow:
reference-images/saas-dashboard/documents/designs/saas-dashboard_design_system.mddocuments/ux-design/project-management-app_design_prompt_20251025_153000.md还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Get a simulated peer review of a paper, abstract, or selected sections. Receive assessments of originality, methods, results, and writing, with specific revision suggestions, severity ratings, and a prioritized checklist for improving the manuscript.
中文简介正在准备中。当前显示英语简介。
Guide Windows domain penetration testing through Active Directory reconnaissance, credential attacks, privilege escalation, and certificate service checks. Use references for tools such as BloodHound and Impacket to examine attack paths and understand testing prerequisites.
中文简介正在准备中。当前显示英语简介。
Test REST, SOAP, and GraphQL APIs for authentication flaws, improper access to other users’ records, and unsafe input handling. Guides endpoint discovery and request variations to identify vulnerabilities and document evidence of unauthorized access.
中文简介正在准备中。当前显示英语简介。
Explores alternative APIs, the interfaces other code uses to call a module. Parallel sub-agents develop distinctly different designs, then present signatures, usage examples, and trade-offs to help choose or combine an approach before implementation.
中文简介正在准备中。当前显示英语简介。
Trace system behavior across code, APIs, authentication, data, and networks through an interactive workflow. Store steps, branches, and findings in SQLite, then export diagrams and documentation for security audits, debugging, architecture reviews, or incident analysis.
中文简介正在准备中。当前显示英语简介。
Compare login approaches and authentication providers, then use implementation examples and security checklists to plan or review an app’s login flow. Covers sessions, tokens, external login providers, passkeys, and common implementation mistakes.
中文简介正在准备中。当前显示英语简介。