prototype-prompt-generator_skill

Overview

This skill generates detailed, production-ready prompts for building UI/UX prototypes. It converts user requirements into structured specifications that cover design systems, color palettes, component dimensions, layout trees, and implementation details. Outputs are optimized for AI-driven prototype builders or front-end developers.

How this skill works

Ask targeted questions to gather platform, users, pages, features, content, and technical constraints. Select an appropriate design system (WeChat Work, iOS Native, Material, Ant Design Mobile) and map exact tokens: hex colors, font sizes, spacings, and component rules. Produce a complete prompt using a strict template: role, task, tech stack, visual specs, page tree, Tailwind config (optional), and final output format.

When to use it

• When you need a ready-to-run prompt to generate HTML/CSS/React prototypes
• Designing mobile or web app screens with a specified design system
• Creating comprehensive UI specs for handoff to developers
• Preparing inputs for AI prototype builders or multi-agent code workflows
• Turning vague design ideas into precise measurements, colors, and content

Best practices

• Ask incremental questions (2–3 at a time) to clarify platform, users, and key pages
• Default to full, precise specs when requirements are minimal (colors, sizes, states)
• Prefer mobile-first layouts and consider safe areas and touch targets (≥44px)
• Replace placeholders with real content and realistic data points
• Run the quality checklist: colors with hex codes, precise measurements, and component states

Example use cases

• Generate a 375×812 iPhone prototype prompt following iOS Native with exact typography and spacing
• Produce a dashboard prototype prompt for an enterprise app using Ant Design Mobile with list item specs
• Create a WeChat Work–style sales app prompt with Chinese enterprise conventions and tech-blue palette
• Build a Material Design prompt for an Android-first consumer app, including elevation and ripple guidelines
• Export a Tailwind-based prompt with custom tailwind.config entries and CDN links