Design & Frontend ui-uxprototype-promptsdesign-systemsmaterial-designant-design-mobilewechat-worktailwind-cssmobile-design

Prototype Prompt Generator

Turns vague UI requirements into structured, production-ready prototype prompts with complete design specs, ready to hand to any AI tool or developer.

FollowSkills review · FSRS-2.0
Recommended
59/ 100 5-point scale 3.0 / 5
1 2 3 4 5 6
1Trust20 / 25 · 4.0/5

Skill is text-only prompt generation: no code execution, no sensitive permissions, no external effects; least privilege trivially satisfied. Deducted for lack of explicit confirmation/rollback statements and publisher attribution only at repo level (unverified publisher).

2Reliability9 / 20 · 2.3/5

Instructions are self-consistent; SKILL.md and both reference files cross-reference correctly with clear workflow and trigger conditions. Static cap 10; deducted for no test or edge-case execution evidence specific to this skill, failure feedback relies on model behavior.

3Adaptability12 / 15 · 4.0/5

Triggers are specific, non-fit boundary explicitly declared (generates prompts, not prototypes), covers China-relevant design systems (WeChat Work, Ant Design Mobile), no network dependency so mainland-China reachability is fine. Deducted for no usage evidence backing trigger precision; spec currency undisclosed.

4Convention9 / 15 · 3.0/5

Well-layered docs (SKILL.md + references), troubleshooting and quality checklists included, repo-level AGPL-3.0 license clear. Deducted for no skill-level version, changelog, or maintenance responsibility; update path depends on whole-repo releases.

5Effectiveness5 / 15 · 1.7/5

Claims to produce structured, directly usable prototype prompts with complete templates, but static review cannot verify actual output quality; cap 7. Deducted for lack of representative verified outputs or comparative-benefit evidence over manual prompt writing.

6Verifiability4 / 10 · 2.0/5

Claims are auditable against source files (templates and specs present), but no third-party execution evidence; CI tests cover only codeagent-wrapper and harness, unrelated to this skill. Cap 5; deducted for no reproducible output validation or cross-source corroboration.

Evidence confidence:Low Reviewed Sep 09, 2026 Reviewed revision f2e75c1263a2
Before you use it
  • This skill only generates prompt text, not prototypes; outputs must be handed to another tool or developer.
  • Publisher is unverified, and there is no skill-level versioning or changelog; track updates via whole-repo releases.
  • Referenced design-system specs (e.g., WeChat Work colors) may become outdated; verify against current official guidelines.
  • Static review did not execute the skill; actual generation quality is independently unconfirmed.
See the full review method →

What does this skill do, and when should you use it?

This is a prompt-engineering skill for UI/UX prototyping. It gathers requirements through incremental questioning — app type, platform, design preferences, technical constraints — selects one of four design systems (WeChat Work, iOS Native, Material Design, Ant Design Mobile), then builds a comprehensive prompt from a nine-section template covering hex color palettes, component dimensions, layout trees, Tailwind config, and realistic sample content. The output is prompt text, not prototype code; it must be passed to another AI tool or developer. The workflow includes a multi-category quality checklist and iterative refinement.

1) Collects requirements through incremental questions (2-3 at a time) covering app type, target platform, viewport sizes, design style, framework preferences, and real content needs; 2) Loads the chosen design system's palette, component specs, and interaction patterns from bundled references/design-systems.md; 3) Assembles the prompt using the nine-section template in references/prompt-structure.md (role, task, tech stack, visual specs, implementation details, Tailwind config, content hierarchy tree, special requirements, output format); 4) Replaces all placeholders with concrete values — hex codes like #3478F6, exact dimensions like 44px touch targets and 64px list rows, and realistic business content; 5) Self-checks against completeness, clarity, specificity, realism, and technical accuracy checklists; 6) Presents the result, offers refinement options, and can export to Markdown or text files.

  1. A product manager needs a spec-grade prompt an AI can execute to prototype a Chinese enterprise mobile work app (WeChat Work style)
  2. An indie developer wants a complete HTML/Tailwind prototype prompt for an iOS-style consumer app
  3. An outsourced team needs consistently formatted design documentation with hex codes, component dimensions, and page structure trees for multi-party collaboration
  4. A designer wants to validate whether an Ant Design Mobile form-heavy app layout works at a 375px viewport
  5. A founder describing a dashboard prototype to an AI tool wants to avoid vague instructions like 'use some blue'

What are this skill's strengths and limitations?

Pros
  • Exceptionally specific output: every color has a hex code, every measurement has units, real content instead of Lorem Ipsum placeholders
  • Bundled full specifications for four design systems, with recommendation logic based on user geography, platform, and app type
  • Nine-section template plus five quality checklists produce consistent, reusable results
  • Pure instruction-based skill — no scripts, network, or specific runtime required; highly portable
Limitations
  • Generates prompts only, not prototype code — requires a second execution step
  • Design system coverage limited to WeChat Work, iOS Native, Material Design, and Ant Design Mobile; desktop web systems (e.g., Ant Design desktop) are not mentioned
  • No test suite or real-world output validation in the source; final quality depends on the AI tool that executes the prompt
  • The questioning flow can take multiple rounds; users wanting one-shot results may find it tedious

How do you install this skill?

The skill lives in the stellarlinkco/myclaude repository (a bundle of 11 skills). Install: 1) interactively install the collection: npx github:stellarlinkco/myclaude; 2) list individually installable skills: npx github:stellarlinkco/myclaude --list; 3) or manually download from GitHub and place the skills/prototype-prompt-generator folder into your Agent Skills client's directory (default ~/.claude/skills/ for Claude Code). The exact standalone-install command for this one skill is not documented in the source.

How do you use this skill?

In an Agent Skills-capable client such as Claude Code, trigger it with prompts like 'create a prototype prompt', 'generate UI specifications', or 'design a mobile app'. The skill asks grouped questions, recommends a design system, then outputs the full prompt. Note: the output is prompt text — pass it to another AI tool or developer to produce the actual HTML/CSS/React code.

More skills from this repository

All from stellarlinkco/myclaude

Productivity & Collaboration

Product Requirements (Interactive PRD Skill)

Turns vague feature ideas into a professional PRD through interactive dialogue and a 100-point quality score, only generating at 90+.

Dev & Engineering

SPARV Five-Phase Workflow

A Specify→Plan→Act→Review→Vault workflow with external memory files that pushes vague requirements through to verifiable delivery in one pass, instead of coding on assumptions.

Dev & Engineering

Test Cases Generator

Turns PRDs or user requirements into structured test cases covering functional, edge, error and state transition scenarios.

Dev & Engineering

Codeagent Multi-Backend Orchestration Skill

Run AI code tasks across Codex, Claude, Gemini, and OpenCode backends through one codeagent-wrapper command, with parallel multi-agent orchestration built in.

Dev & Engineering

Harness Long-Running Agent Framework

Keeps agent tasks running across sessions: automatic progress checkpointing, interruption recovery, failure rollback, and dependency-ordered task scheduling.

Automation & Ops

Browser Automation Skill

Drive Chrome directly over the Chrome DevTools Protocol — navigate, run JS, screenshot, and pick DOM elements — with no MCP server required.

Dev & Engineering

Skill Install — Secure Skill Installer

Installs Claude skills from any GitHub repository with automated pre-install security scanning that blocks malicious code and backdoors.

Dev & Engineering

do — Feature Development Orchestrator

Turns feature work into a five-phase workflow where parallel sub-agents handle code understanding, design, implementation and review — the orchestrator never writes code itself.

Dev & Engineering

OmO Multi-Agent Orchestrator

Trigger with /omo and dispatch code analysis, bug investigation, and fixes to the minimal right mix of agents — no fixed pipeline.

Dev & Engineering

Dev End-to-End Development Workflow

An extreme-lightweight end-to-end dev workflow: clarifies requirements, orchestrates multi-backend parallel execution, and enforces 90% test coverage.

Related skills